P0 Folio Components

FOUR DIRECTIONS · 2026-07-09

Three P0 components, four incompatible directions each, every direction shown in light and dark mode. The canonical Folio tokens are the constraint — directions explore form factors, animation patterns, and interaction details, not colors.

01 / P0

Toast

Ephemeral feedback. Closes the unannounced-results SR gap with role="status" + aria-live="polite".

A Slide-up bottom card · single slot, fades
B Top banner strip · pushes content down
C Inline status line · in-flow, marginal-note feel
D Stacked dock · multi-toast history

Open toast directions →

02 / P0

Modal / Dialog

Replaces the one-off sanction-risk-dialog.html (R12, the only sanctioned interruption). Adds dark mode + Folio tokens + focus trap.

A Centered card + scrim · conventional modal
B Right side sheet · context visible
C Bottom sheet · mobile paradigm, 350 px friendly
D Engraved framed notice · inline, no scrim

Open modal directions →

03 / P0

Form Inputs

Standardized gb-input / gb-textarea / gb-select. Ships the new --hair-control (3:1) token for WCAG 1.4.11.

A Underline only · maximum paper, minimum chrome
B Boxed with hairline · textbook form control
C Boxed + eyebrow label · labeled-field density
D Sunken (recessed) · fields carved into the page

Open form input directions →

What was explored

Constraint

Canonical Folio tokens from 2026-07-09-wcag-canonical-tokens.md — every direction uses the same --paper, --raised, --ink, --hair, --hair-control, --green, --err, --gold-text, and tint tokens. 96/96 pairings pass WCAG AA in both modes (verified).

Variation axis

Form factor (where the component lives in the pane), animation pattern (slide / push / inline / stack), and interaction details (single-slot vs multi, dismiss affordance, focus trap vs visible-only focus).

Held constant

Color tokens, font stack (serif headings / sans body / mono labels), no blue, dark mode is warm leather not cold grey, all four components ship both light and dark in a single file, all four are interactive (toast buttons fire animations; modal "open" pulses the focus ring; inputs have working focus + error states).

Audit gaps closed

Toast: #results not announced → all four directions use role="status" + aria-live="polite". Modal: R12 dialog has no dark mode → all four inherit canonical dark. Inputs: legacy 1.28:1 border + non-visible focus → all four use --hair-control (3.84:1 L / 4.03:1 D) + 2 px --green focus ring.

Offline-safe

No CDN, no external font fetches, no external JS. Fonts fall back through Iowan Old Style → Apple Garamond → EB Garamond → Garamond → Georgia, so the file renders correctly in Word's webview and the Mac launcher's bundled WKWebView.

Why four, not three

Thariq's "Four Directions" methodology — incompatible full designs, not variations of the same idea. blu3dot clicks through, picks the winner, names it. The four should not be mergeable into one by tweaking values; each makes a different bet about the component's role.

Designed 2026-07-09 by Emory (AMANTU design lead) for GreenBook / Folio. Tokens canonicalized by Granville (Fable 5) the same day; see docs/design/2026-07-09-wcag-canonical-tokens.md and docs/design/2026-07-09-wcag-audit-findings.md.