WONDAYS — Internal Design System

The presentation layer for everything internal: decks, docs, dashboards, walkthroughs, journey maps, HQ artifacts. Canonized 2026-08-16 from Haris's chosen reference: Origin Financial (refero style c60f05ff — "midnight gallery of quiet wealth"), synthesized for Wondays.

The two-layer design law

• Product surfaces (sheets, diary pages, toys, anything a customer touches) keep the Wondays paper language: cream (#fbf7ef), ink (#2b2620), amber (#c97f2e), graphite fills, warm light. That's the brand.
• Internal/presentation surfaces (decks, docs, demos' chrome) use this system: the midnight gallery — so the paper product glows like the artwork inside the dark room. The deck is the gallery; the product is the painting.

Tokens (adapted — our amber replaces Origin's violet as the sole chromatic family)

:root{
  /* surfaces — elevation by color step, NEVER shadows */
  --obsidian:#0f1011;   /* page canvas */
  --abyss:#090a0b;      /* deeper sections */
  --graphite:#2e2e2e;   /* elevated cards */
  --steel:#3f4041;      /* hover/pressed */
  --silver:#cacaca;     /* rare inverted blocks */
  /* text */
  --pure:#ffffff;       /* primary text, CTA fill */
  --cloud:#f5f5f7;      /* headings */
  --ash:#9f9fa0;        /* body/secondary — never full white for body */
  --fog:#6a6b6b;        /* muted/disabled */
  /* chromatic — Wondays amber family ONLY, full-bleed moments only */
  --amber:#e8a24b; --amber-deep:#c97f2e; --amber-pale:#f0d9b4;
  /* paper (when product appears inside internal surfaces) */
  --paper:#fbf7ef; --paper-ink:#2b2620;
}

The three voices (official stack — the guide's own fallbacks, all free via Google Fonts)

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">

1. Display — "Playfair Display", ui-serif, Georgia at weight 300, never bold. (Origin runs Lyon Display; Playfair is the guide's named fallback.) 38–96px, line-height 0.9–1.0. Mix roman + italic inside one headline. Whisper-weight authority is the signature — bolding breaks the system.
2. UI — Inter, -apple-system, sans-serif, weights 300–400. (Suisse Int'l stand-in.) 14–18px body in --ash, headings in --cloud.
3. Data — "Roboto Mono", ui-monospace, uppercase. Identical to the reference — Origin uses Roboto Mono literally. 10–12px, letter-spacing .05–.18em. All eyebrows, labels, badges, stats.

Offline artifacts degrade to system stacks gracefully; anything shipped or presented loads the real fonts. Deviation register (the ONLY intentional differences from Origin): ① chromatic family = Wondays amber instead of iris violet (brand coherence with the paper products — flip to violet only on Haris's say-so) ② the paper product may cast a shadow when shown inside internal surfaces (it is an object, not UI). Everything else — neutrals, radii, spacing, elevation, buttons, motion — follows the guide verbatim.

Rules (the do/don't spine)

• Elevation = surface stepping (obsidian → graphite → silver). No drop shadows on internal surfaces. (Exception: the paper product itself may cast its warm shadow — it's an object in the gallery.)
• Radii: 8px buttons/inputs · 16–30px cards · 9999px pills only.
• Primary action: white fill, black text — the only loud thing on the page. Ghost-outline for secondary.
• Amber: full-bleed tiles or single accents ≥18px — never body text, never borders-everywhere.
• Motion: 0.2s ease states; one slow 2.5s atmospheric reveal per page max. No bounce, no overshoot, no parallax. Predictability over spectacle.
• Body text is never #fff — --ash for copy, --cloud for headings.
• Mono eyebrows open every section: WONDAYS · SECTION NAME tracked wide.

Application map