Skip to main content
Compendium / Specs & Documents / Atoms / Intent Statement
#011

Intent Statement

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">&ldquo;</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>