A pinned hard-limit chip — like "p99 ≤ 200ms" or "no PII" — with a rationale strip underneath, taped to the spec.
A single constraint from a spec, rendered as a "pinned" chip you might stick to a corkboard. The pin makes the constraint impossible to miss; the rationale strip explains WHY the limit exists, which is the part teams usually forget.
---
import type { CompendiumMeta } from '../../../data/types';
export const meta: CompendiumMeta = {
id: 7,
slug: 'constraint-pin',
name: 'Constraint Pin',
category: 'specs-documents',
subcategory: 'criteria-and-constraints',
pillar: 'go',
description: 'A pinned hard-limit chip — like "p99 ≤ 200ms" or "no PII" — with a rationale strip underneath, taped to the spec.',
spec: `## Intent
A single constraint from a spec, rendered as a "pinned" chip you might stick to a corkboard. The pin makes the constraint impossible to miss; the rationale strip explains WHY the limit exists, which is the part teams usually forget.
## Acceptance Criteria
- [ ] Big mono headline of the constraint
- [ ] Rationale text below
- [ ] Pin / tape visual (small accent square)
- [ ] Severity badge (HARD / SOFT)
- [ ] Does not require JS or hover for the rationale to read
## Constraints
- Pure CSS
- Theme-aware`,
tags: ['stamp', 'badge', 'real-content', 'dark-mode-tested'],
status: 'stable',
health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};
---
<div class="w-full flex justify-center py-2">
<div class="relative bg-paper text-black border-4 border-black shadow-nb-sm w-[90%] max-w-[280px] rotate-[-1.5deg]">
<span class="absolute -top-2 start-1/2 -translate-x-1/2 w-4 h-4 bg-attention border-2 border-black rotate-45 shadow-[2px_2px_0_0_var(--color-ink)]"></span>
<div class="flex items-center justify-between px-3 pt-3 pb-1">
<span class="font-mono text-[9px] uppercase tracking-widest opacity-60">CONSTRAINT</span>
<span class="font-mono text-[9px] uppercase tracking-widest font-black bg-ink text-paper px-1.5 py-0.5">HARD</span>
</div>
<div class="px-3 pb-2">
<div class="font-mono text-2xl font-black leading-none tracking-tight">p99 ≤ 200ms</div>
</div>
<div class="px-3 py-2 border-t-2 border-dashed border-black text-[10px] leading-snug">
<span class="font-mono uppercase tracking-widest opacity-60">WHY: </span>
Auth latency above 200ms causes mobile retry storms.
</div>
<span class="absolute -bottom-1 end-3 h-2 w-12 bg-do border border-black rotate-[3deg]"></span>
</div>
</div>