The WHY of a spec, rendered as a massive editorial pull-quote — typography-led, attributed, datelined.
STABLE DO
#card
#real-content
#dark-mode-tested
Live
“
Authenticate via OAuth so verified identities can act, and unverified ones cannot — silently.
SPEC-014 · INTENT@platform / 2026-05-21
Spec
Intent
Render the core intent of a spec as a museum-label pull-quote. Editorial scale, leading mark, body sentence, attribution. The visual treats intent as the primary artefact — exactly what the framework asserts.
Acceptance Criteria
[ ] Massive opening quotation mark
[ ] Bold uppercase body (mono evokes document feel)
[ ] Attribution line: spec id + owner + date
[ ] No decorative elements that compete with the type
[ ] Does not wrap the quotation glyph into the flow text
Constraints
Pure CSS
Theme-aware
// intent-statement-block.astro
---
import type { CompendiumMeta } from '../../../data/types';
export const meta: CompendiumMeta = {
id: 11,
slug: 'intent-statement-block',
name: 'Intent Statement',
category: 'specs-documents',
subcategory: 'atoms',
pillar: 'do',
description: 'The WHY of a spec, rendered as a massive editorial pull-quote — typography-led, attributed, datelined.',
spec: `## Intent
Render the core intent of a spec as a museum-label pull-quote. Editorial scale, leading mark, body sentence, attribution. The visual treats intent as the primary artefact — exactly what the framework asserts.
## Acceptance Criteria
- [ ] Massive opening quotation mark
- [ ] Bold uppercase body (mono evokes document feel)
- [ ] Attribution line: spec id + owner + date
- [ ] No decorative elements that compete with the type
- [ ] Does not wrap the quotation glyph into the flow text
## Constraints
- Pure CSS
- Theme-aware`,
tags: ['card', 'real-content', 'dark-mode-tested'],
status: 'stable',
health: { ics: 100, a11y: 'aa', themed: true, animated: false },
};
---
<figure class="w-full bg-paper text-black border-4 border-black shadow-nb-sm px-4 py-4 relative">
<span aria-hidden="true" class="absolute top-0 start-2 font-black text-[80px] leading-[0.7] text-do select-none pointer-events-none">“</span>
<blockquote class="relative pt-6 pe-2">
<p class="text-[15px] font-black uppercase leading-[1.1] tracking-tight">
Authenticate via OAuth so verified identities can act, and unverified ones cannot — silently.
</p>
</blockquote>
<figcaption class="mt-3 pt-2 border-t-2 border-black flex items-baseline justify-between font-mono text-[9px] uppercase tracking-widest">
<span class="opacity-70">SPEC-014 · INTENT</span>
<span class="font-black">@platform / 2026-05-21</span>
</figcaption>
</figure>