A draft spec is intent under construction. The pip marks that state visibly so reviewers do not mistake exploration for commitment. Hatched fill signals "in motion".
Acceptance Criteria
[ ] Renders a square pip labelled DRAFT with a hatched paper fill
[ ] Includes an SPEC-NNN reference and "since" timestamp
[ ] Uses pillar token for the accent edge
[ ] Negative: does NOT use rounded shapes or status colour beyond draft semantics
Constraints
Pure markup, no JS
Theme-aware via tokens
Self-contained — no shared imports
// draft-state-pip.astro
---
import type { CompendiumMeta } from '../../../data/types';
export const meta: CompendiumMeta = {
id: 341,
slug: 'draft-state-pip',
name: 'Draft State Pip',
category: 'specs-documents',
subcategory: 'lifecycle',
pillar: 'do',
description: 'The first lifecycle pip — DRAFT — declaring a spec is open, mutable, and not yet binding.',
spec: `## Intent
A draft spec is intent under construction. The pip marks that state visibly so reviewers do not mistake exploration for commitment. Hatched fill signals "in motion".
## Acceptance Criteria
- [ ] Renders a square pip labelled DRAFT with a hatched paper fill
- [ ] Includes an SPEC-NNN reference and "since" timestamp
- [ ] Uses pillar token for the accent edge
- [ ] Negative: does NOT use rounded shapes or status colour beyond draft semantics
## Constraints
- Pure markup, no JS
- Theme-aware via tokens
- Self-contained — no shared imports`,
tags: ['badge', 'stamp', 'real-content', 'dark-mode-tested', 'responsive'],
status: 'stable',
kind: 'atom',
health: { ics: 92, a11y: 'aa', themed: true, animated: false },
};
---
<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
<p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-2">// lifecycle pip</p>
<div class="flex items-stretch gap-3">
<div
class="w-16 h-16 border-4 border-black flex items-center justify-center font-black text-[10px] uppercase tracking-widest shrink-0"
style="background-image: repeating-linear-gradient(45deg, var(--color-paper) 0 4px, var(--color-do) 4px 8px);"
>
<span class="bg-paper px-1 border-2 border-black">DRAFT</span>
</div>
<div class="min-w-0 flex-1 flex flex-col justify-center">
<div class="font-mono text-[11px] font-black uppercase tracking-widest truncate">SPEC-341</div>
<div class="font-mono text-[9px] uppercase tracking-widest opacity-60 mt-1">SINCE 2026-05-14</div>
<div class="text-[11px] leading-snug mt-1 font-medium">Open · mutable · not binding</div>
</div>
</div>
</div>