Skip to main content
design.md v0.2.0 — runtime instrument

PromptDeck Design DNA

Color palette

background
#0b1020
surface
#151b2e
surfaceAlt
#111624
textMain
#f7f9ff
textMuted
#9ca5c5
textSoft
#7b84a3
accentPrimary
#7dd3fc
accentSecondary
#a5b4fc
accentDanger
#f97373

Semantic roles

RoleTokenHex
belongingaccentSecondary#a5b4fc
tensionaccentDanger#f97373
reframeaccentPrimary#7dd3fc
actionaccentPrimary#7dd3fc
continuationaccentSecondary#a5b4fc
outerPressureaccentSecondary#a5b4fc
depthLinktextMuted#9ca5c5
alarmaccentDanger#f97373

WCAG contrast cache (computed 2026-05-17)

PairRatioLevel
textMain_on_background18.00:1AAA
textMuted_on_background7.81:1AAA
textSoft_on_background5.12:1AA-normal, AAA-large
accentPrimary_on_background11.20:1AAA
accentSecondary_on_background9.48:1AAA
accentDanger_on_background6.99:1AAA-large, AA-normal
textMain_on_surface16.10:1AAA

Typography scale

headlineXl40px / 28px mobile
The quick brown fox jumps over the lazy dog
headlineLg32px / 24px mobile
The quick brown fox jumps over the lazy dog
mantra22px / 20px mobile
The quick brown fox jumps over the lazy dog
prompt20px / 18px mobile
The quick brown fox jumps over the lazy dog
body18px / 17px mobile
The quick brown fox jumps over the lazy dog
small15px / 14px mobile
The quick brown fox jumps over the lazy dog

Slide order + accent binding

Slide 1
Belonging
accent: belonging
layout: centered
Slide 2
Tension
accent: tension
layout: top-left
Slide 3
Reframe
accent: reframe
layout: top-left
Slide 4
Action
accent: action
layout: top-left
Slide 5
Continuation
accent: continuation
layout: centered

Forbidden patterns (machine-detectable)

  • brand-red-as-chrome (block)
    Element background or border uses accent-danger AND role is not in [alarm, error, kill-signal, slide-2-tension]
  • glass-morphism-hero (block)
    backdrop-filter: blur(*) on element matching hero|card|prompt
  • text-below-min-size (block)
    Computed font-size < 14px (mobile) / 15px (desktop) on any rendered text element
  • film-grain-on-body (block)
    Noise overlay opacity > 0.04 on any body slide
  • single-face-showcase (block)
    PromptDeckShowcase rendered without secondary face
  • always-on-3d-tilt (block)
    Element binds --pd-tilt-x or --pd-tilt-y to pointer without prefers-reduced-motion: no-preference media query gate
  • more-than-three-accents-visible (warn)
    More than 3 distinct accent color tokens visible in the viewport

Generic-test verdict (live)

Spacing rhythm

xs · 4px
sm · 8px
md · 12px
lg · 16px
xl · 24px
xxl · 32px
xxxl · 48px
huge · 64px

Proving Ground — every state per part

Each card renders the full PromptDeckShowcase in one named state. Captain dogfoods this page on every Vercel preview before merging changes that touch src/components/prompt-deck/. Verdict from scoreGenericTest() must be PASS — see audit-loop.

Full-Showcase states

01 — Default (ink theme, 5+5 slides, speech on, hints on)

Canonical render. Both faces with 5 slides each, all features enabled.

01

Prompt Deck default

canonical render — 5 + 5 slides, all features on
01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
02 — Minimal (1 slide per face)

Edge case: minimum viable face — single slide. Nav pills should still render.

02

Prompt Deck minimal

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
03 — Speech disabled (enableSpeech=false)

No ▶ Hear button on prompt cards. Hints row drops the speech hint.

03

Prompt Deck no-speech

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
04 — Hints disabled (enableHints=false)

Footer hint row hidden. Keyboard nav still works.

04

Prompt Deck no-hints

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
05 — Paper theme on secondary face

Toggle to Paper face — backdrop swaps to light, accent goes calm teal, alarm red preserved.

05

Prompt Deck paper theme

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
06 — No siblings (currentHref + siblings omitted)

SiblingPager block hidden. Used when this deck is the only journey page.

06

Prompt Deck no-siblings

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
07 — Reduced-motion preference

Detected: no-preference. Set OS-level prefers-reduced-motion to validate mantra char fade-in disables.

07

Prompt Deck reduced-motion

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
08 — Single-face anti-pattern (secondary === primary)

⚠ ANTI-PATTERN — design.md forbidden-pattern id: single-face-showcase (severity: block). PromptDeckShowcase rendered without a distinct secondary face violates the two-perspectives doctrine. Reproduced here for visual baseline of the rubric, not as a shippable state.

08

Prompt Deck ANTI-PATTERN

01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern

Part isolation

Each part rendered alone with fixtures. Confirms each unit is internally consistent and does not require the Showcase wrapper to behave.

FaceToggle — both states
MantraReveal — reducedMotion=false
DeckHero — full strip (with pills row)
PR 5

Prompt Deck proving-ground

dogfood preview — every state per part
DeckPills — top-of-hero subtle row (PR 5 nav)
DeckArrows — edge-anchored prev/next (PR 5 nav)
Hover the box edges to reveal the arrows. Active index: 1
SlideStage — single slide, speech on
01BelongingI

This is about you, today.

What if the next quarter felt different?

Describe one moment this week when the work felt true. What was different?
  • Name the moment.
  • Name the difference.
  • Decide what to repeat.
Read the pattern
DeckNav — 5 pills, prev/next handlers wired locally
DeckHints — speech hint visible when API supported
SpeechButton — hasSpeech=false (button below renders only when true)

Speech Synthesis API not available in this browser.