Variation

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

Palette Options

Not yet approved — do not build against this.

Palette is unresolved. Placeholder greyscale. Not a client palette — generate the Palette option set, get one approved, then paste its hexes here and date the decision.

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

Palette options

Palette options are generated per client and presented for approval. Client-facing.

3 options, exactly one marked recommended.

An entry must satisfy PaletteOption

export type PaletteRole =
  | "primary"
  | "ink"
  | "paper"
  | "rule"
  | "muted";

export type PaletteOption = {
  id: string;
  name: string;                       // semantic, never descriptive
  recommended: boolean;               // exactly one option is true
  reasoning: string;                  // why this one is recommended
  uxRationale: string;                // client-facing benefit framing
  /** oklch only — never hex, rgb or HSL. */
  roles: Record<PaletteRole, string>;
  contrast: {
    bodyOnPaper: number;              // >= 4.5
    largeOnPaper: number;             // >= 3
    uiOnPaper: number;                // >= 3
  };
  audience: "client";
};

Generator

Palette 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.

Palette generator

Generate 3 palette options for the Palette Library.

INPUT: the client's brand colours, logo, and any style guide they have supplied. If they
have an existing palette, treat it as fixed and build the options around ROLE ASSIGNMENT,
not new hues — the variable is which colour does which job.

Each option provides exactly these roles. No fifth hue:
  --ink        darkest text, deep surfaces
  --paper      primary background
  --accent     CTAs, links, highlights
  --rule       borders, dividers, muted surfaces
  --muted      secondary text — prefer an ALPHA of ink over a separate hue, so it stays
               correct on any background tint

CONTRAST TABLE IS MANDATORY. For every option, compute and display:
  - each role against --paper
  - each role against --ink
  - the CTA pair: --accent fill with its foreground
Label each AAA / AA / AA Large / FAIL. Compute, never assume.

If a brand colour fails 4.5:1 for text, DO NOT silently substitute it. State the failure,
then offer:
  (a) restrict it to large text, icons, borders and fills
  (b) a derived interactive-only shade for controls that carry a label, brand hex unchanged
      everywhere else
  (c) accept it as a documented exception
Recommend one and say why.

Also emit the BB Global Colors table: role, hex, in role order, ready to type into Beaver
Builder's Global Settings with the prefix "jcd-color" and no leading dashes.

Placeholder — replace on remixRecommended

Neutral Blueprint — role assignment only

The blueprint's own five roles, unchanged: --ink, --paper, --accent, --rule, --muted. No fifth hue. Present so the contrast table format is visible before any brand colour arrives.

Specification

--ink: oklch(0.22 0 0) — text, deep surfaces
--paper: oklch(1 0 0) — primary background
--accent: oklch(0.955 0 0) — CTA fill, links, highlights
--rule: oklch(0.9 0 0) — borders, dividers, muted surfaces
--muted: oklch(0.5 0 0) — secondary text (alpha of ink)
BB Global Colors prefix: jcd-color (no leading dashes)

Why it works

Five fixed roles keep every surface decision pre-made — Nielsen's consistency and standards heuristic. --muted is an alpha of --ink rather than a separate grey, so secondary text stays correct on a tinted ground instead of drifting light.

On every device

The same five colours carry the whole site, so a page reads the same on a laptop in an office and a phone in daylight — nothing washes out at one size and not the other.

Why recommended

The only entry in the set. A generated set replaces it with three options and moves this flag to whichever palette carries the client's brand colour in the accent role without a text-contrast exception.

Contrast — computed from token values

--ink on --paper17.3:1AAA
--muted on --paper6.0:1AA
--rule on --paper1.4:1FAIL
--paper on --ink17.3:1AAA
--rule on --ink12.9:1AAA
CTA: --accent-foreground on --accent16.4:1AAA

Notes

--rule fails 4.5:1 by design: it is a border and surface token, never a text colour. Stated rather than hidden, because a FAIL with no explanation is the row that gets ignored.
Neutral greys stand in for brand hues. If a supplied brand colour fails 4.5:1 as a text ground, the generator states the failure and offers the three documented remedies — it never substitutes silently.