Spec
Intent
Make the requirement visible. A spec that needs sign-off should not look the same as one that has it; the gate is loud, bureaucratic, and unambiguous.
Acceptance Criteria
- [ ] Rotated stamp at -8deg over an excerpt
- [ ] Double border in attention token
- [ ] Names the required role (@governor)
- [ ] Negative: does NOT block clicks (pointer-events-none)
Constraints
- Pure CSS
- Theme-aware via tokens
// signoff-required-stamp.astro
---
import type { CompendiumMeta } from '../../../data/types';
export const meta: CompendiumMeta = {
id: 581,
slug: 'signoff-required-stamp',
name: 'Sign-Off Required Stamp',
category: 'governance-risk',
subcategory: 'signoff',
pillar: 'go',
description: 'Diagonal stamp marking a spec or release as gated — sign-off is required before it can advance.',
spec: `## Intent
Make the requirement visible. A spec that needs sign-off should not look the same as one that has it; the gate is loud, bureaucratic, and unambiguous.
## Acceptance Criteria
- [ ] Rotated stamp at -8deg over an excerpt
- [ ] Double border in attention token
- [ ] Names the required role (@governor)
- [ ] Negative: does NOT block clicks (pointer-events-none)
## Constraints
- Pure CSS
- Theme-aware via tokens`,
tags: ['stamp', 'real-content', 'dark-mode-tested', 'responsive'],
status: 'stable',
health: { ics: 92, a11y: 'aa', themed: true, animated: false },
};
const target = { spec: 'SPEC-204', surface: 'release/2026-Q2' };
---
<section data-this-component class="w-full bg-paper text-black border-4 border-black p-4 relative overflow-hidden">
<div class="opacity-60">
<p class="font-mono text-[9px] uppercase tracking-widest mb-1">{target.spec} / {target.surface}</p>
<p class="text-[11px] leading-snug">
Release candidate is feature-complete and has cleared automated
gates. One governance sign-off remains before promotion.
</p>
</div>
<div class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[-8deg] pointer-events-none">
<div
class="border-4 border-attention text-attention bg-paper/40 px-3 py-2"
style="box-shadow: inset 0 0 0 2px var(--color-attention), 0 0 0 1px var(--color-paper);"
>
<div class="font-black text-[16px] uppercase tracking-[0.14em] leading-none">Sign-Off Required</div>
<div class="font-mono text-[8px] uppercase tracking-widest mt-1 text-center opacity-90">@governor · pending</div>
</div>
</div>
</section>