Variation

Style Guide A Palette Options Typography Options Motion Library Module Library Navigation Library Footer Library StoryBrand Framework Library Asset Library

Typography Options

Not yet approved — do not build against this.

Typography is unresolved. Native system stack placeholder — no webfont request. Generate the Typography option set; verify every weight EXISTS before specifying it (browsers round silently).

Record the approved choice in src/data/project-decisions.ts — the one file edited per project. Every route, library entry and export reads from it.

No entries yet

Typography options

Typography pairings are generated per client and presented for approval. Client-facing.

3 options, exactly one marked recommended.

An entry must satisfy TypographyOption

export type TypefaceCut = {
  family: string;                     // multi-cut display faces are SEPARATE families
  weights: number[];                  // only weights the face actually ships
  source: "google" | "adobe" | "self-hosted";
  tracking: string;                   // tokenized letter-spacing, e.g. "var(--tracking-tight)"
};

export type TypographyOption = {
  id: string;
  name: string;
  recommended: boolean;               // exactly one option is true
  reasoning: string;
  uxRationale: string;                // client-facing benefit framing
  display: TypefaceCut;
  body: TypefaceCut;
  scale: Record<"h1" | "h2" | "h3" | "body" | "small", string>;
  deviceAdaptability: string;         // how it holds at xl / lg / md
  audience: "client";
};

Generator

Typography generator

Run this once per client, with the client's inputs pasted in. The shared constraints travel with it automatically when you copy.

Shared constraints

CONSTRAINTS — these apply to every option you generate. A generated option that breaks
one of these is worse than no option, because it enters the library looking finished.

- Every value references a token. No literal hex, no arbitrary px. If a token does not
  exist, say so and stop — do not invent one.
- Spacing on the 4pt scale only. A value outside it is a VIOLATION, not an extension:
  flag it and propose the nearest step.
- Naming: jcd_ SYSTEM carries the only padding and width. section_is_ SEMANTIC carries
  identity, never spacing. jcd_ui_ COMPONENT carries internal spacing only. BB Class field
  output is "<semantic class> <system classes>".
- Breakpoints are desktop-first max-width at 1200 / 992 / 768. Never min-width.
- Module vocabulary is PowerPack-first. Base BB is limited to Loop, HTML, Box, Flex
  Columns. UABB is used for five modules only: Advanced Icons, Off-Canvas, Devices, Image
  Carousel, Content Toggle. Advanced Menu is PowerPack.
- WCAG 2.1 AA is a hard gate. Compute every contrast ratio from token values and state the
  number. Body text >= 4.5:1, large text and UI >= 3:1.
- Every interactive element needs a :focus-visible state visually distinct from :hover.
- Every option carries uxRationale (why it works, tied to a named heuristic or law) and
  deviceAdaptability (benefit-framed, for the client).
- Exactly ONE option per set is marked recommended: true, with the reasoning attached.
- No lorem ipsum. Placeholder copy follows StoryBrand SB7 in the client's voice.

Typography generator

Generate 3 typography pairings for the Typography Library.

Each pairing provides:
  --font-serif    editorial and display
  --font-sans     body, UI, labels
  --font-display  optional — masthead or wordmark only

VERIFY EVERY WEIGHT EXISTS before specifying it. Browsers round to the nearest available
weight silently, so a spec that names a weight the family does not ship renders
correct-looking wrong output. Playfair Display ships 400-900 — there is no 300. State the
available weight range for each family.

Multi-cut display faces (Regular / Inline / Shadow / Dimensional) are SEPARATE families,
not weights. Each gets its own token and its own @font-face.

Each pairing also carries:
  - the full type scale as tokens, fixed px at a 16px root
  - responsive step-downs at 1200 / 992 / 768, with EVERY heading level stepped. Stepping
    h1 without stepping h2 collapses the hierarchy at the narrower size.
  - tracking tokens, not literals. Untokenized letter-spacing is the commonest source of
    drift.
  - the loading mechanism per family: Google, Adobe kit, or self-hosted. Adobe and foundry
    licences are domain-restricted; preview domains need separate authorisation.

Render each pairing live at true size with real copy, never lorem ipsum. Use
font-display: block on this page — showing the wrong typeface while a client evaluates
type is worse than showing nothing.

Check the workspace for a display face already in use on another client. Two projects in
the same vertical sharing a display face reads as house style rather than distinct brands —
flag it rather than deciding silently.

Placeholder — replace on remixRecommended

System Stack — native sans, no licence

The blueprint's white-label stack. One family in both the serif and sans slots, no display face. Present so the weight-range and step-down format is visible before a real pairing lands.

Specification

--font-sans: system-ui stack — weights 400, 500, 600, 700 verified
--font-serif: unassigned — inherits --font-sans until a pairing is approved
--font-display: unassigned — masthead only, and optional
Scale (1201px+): h1 56 · h2 40 · h3 28 · h4 22 · body 16
Step-down xl (<=1200): h1 48 · h2 36 · h3 26 · h4 20 · body 16
Step-down lg (<=992): h1 40 · h2 32 · h3 24 · h4 20 · body 16
Step-down md (<=768): h1 32 · h2 26 · h3 22 · h4 18 · body 16
Tracking tokens: --tracking-tight · --tracking-normal · --tracking-kicker
Loading: None — native stack. No Google, Adobe kit or self-host.

Why it works

A single family with a verified weight range removes the silent-rounding failure entirely, and a fully stepped scale keeps every heading level visually distinct at every width — the hierarchy holds when the layout narrows.

On every device

Type appears instantly, with no flash of the wrong typeface while a page loads, and headings stay clearly ranked from a wide monitor down to a phone.

Why recommended

The only entry in the set, and the correct default until type is chosen: it renders identically on every device with nothing to load and no licence to authorise.

Contrast — computed from token values

Body 16px --ink on --paper17.3:1AAA
Kicker 12px --muted on --paper6.0:1AA

Notes

Every heading level is stepped at every breakpoint. Stepping h1 alone collapses the hierarchy at the narrower size.
This page uses font-display: block on purpose — showing the wrong typeface while a client evaluates type is worse than showing nothing.