Dreamborn Design System — Spec
Dreamborn Design System — Spec Date: 2026 04 27 Status: Approved Repo: C:/Users/jstnk/downloads/cc/projects/dreamborn design system Purpose A full brand system for Dreamborn covering website, marketing materials, product UI (cockpit), and pitch decks. Delivered as a single CSS file (dreamborn.css) using CSS @layer with a three register theme system. No build...
Date: 2026-04-27
Status: Approved
Repo: C:/Users/jstnk/downloads/cc/projects/dreamborn-design-system
---
A full brand system for Dreamborn covering website, marketing materials, product UI (cockpit), and pitch decks. Delivered as a single CSS file (dreamborn.css) using CSS @layer with a three-register theme system. No build step required — drop in any HTML file.
---
Three layers in cascade order:
``
@layer tokens, base, components;
``
- tokens — all CSS custom properties (palette, semantic, spacing, type scale, motion, shadow)
- base — reset and foundational element styles
- components — reusable UI patterns as CSS classes
Three typographic/color contexts activated via a data attribute:
``html
<body data-register="brand"> <!-- marketing, homepage, campaigns -->
<body data-register="editorial"> <!-- blog, long-form, newsletters -->
<body data-register="forge"> <!-- cockpit, internal tools, dashboards -->
``
Semantic tokens (--db-bg, --db-text, --db-accent, --db-cta, --db-font-display, etc.) resolve to different values per register. Components automatically adapt — no register-specific class variants needed.
---
| Scale | Base | Use |
|---|---|---|
| Crimson | #8C1A13 | Primary brand, CTA, active states |
| Lime | #8DC63F | Accent, live status, growth signals |
| Warm Neutral | #6B5F54 taupe base | Backgrounds, borders, muted text |
Derived from the overlapping circles in the logo mark:
| Name | Hex | Source |
|---|---|---|
| --db-olive | #4A5828 | Crimson × Lime overlap |
| --db-ember | #5C2318 | Crimson × Taupe overlap |
| --db-stone | #8A7E6A | Lime × Taupe overlap |
| Token | Brand (dark) | Editorial (light) | Forge (dense dark) |
|---|---|---|---|
| --db-bg | #0F0B0A | #FAF8F5 | #0A0807 |
| --db-surface | #1A100E | #FFFFFF | #110D0B |
| --db-text | #FAF8F5 | #0F0B0A | #E8E2DC |
| --db-text-muted | #6B5F54 | #6B5F54 | #5A4F46 |
| --db-accent | #8DC63F | #6A9A2C | #8DC63F |
| --db-cta | #8C1A13 | #8C1A13 | #8C1A13 |
Crimson CTA (--db-cta) is the one constant across all three registers.
Forge adds four semantic status tokens not present in other registers:
| Token | Value | Use |
|---|---|---|
| --db-status-live | #8DC63F (lime-500) | Active / in-progress tasks |
| --db-status-complete | #4A5828 (olive) | Completed tasks |
| --db-status-claim | #C9963A | Claimed / pending states |
| --db-status-blocked | #C4352B | Blocked / error states |
---
Brand register — Bebas Neue (display) + Lora italic (subheads, body, pull quotes) Editorial register — Fraunces (display, bold/italic weight contrast) + DM Sans 300 (body) Forge register — DM Sans throughout (display, body, labels) + Fira Code (mono for IDs, topic hashes, terminal) Shared UI chrome — DM Sans handles all nav, buttons, labels, badges across all registers Mono — SF Mono / Fira Code for code and topic IDs
All fonts loaded from Google Fonts. Single <link> tag covers all three registers.
| Element | Brand | Editorial | Forge | |---|---|---|---| | Display XL | Bebas Neue, ~112px, +0.03em | Fraunces 700, ~64px, -0.02em | DM Sans 600, ~28px, -0.01em | | Subhead | Lora italic, 1rem | DM Sans 300, 1rem | DM Sans 500, 0.8rem | | Body | Lora italic, 0.9rem, leading 1.75 | DM Sans 300, 0.9rem, leading 1.8 | DM Sans 400, 0.82rem, leading 1.5 | | Label/kicker | DM Sans 600, 0.62rem, uppercase, +0.2em | DM Sans 500, 0.62rem, uppercase, +0.18em | DM Sans 500, 0.6rem, uppercase, +0.15em | | Mono / IDs | Fira Code, 0.8rem | — | Fira Code, 0.75rem |
The editorial register's core technique: font-weight: 700 for the title, font-weight: 300; font-style: italic for an <em> word within it. One crimson word per headline maximum. Use font-variation-settings: 'opsz' 9 below 18px, 'opsz' 24 at display sizes.
Forge is a functional register — no expressive typefaces. DM Sans at multiple weights (400/500/600) provides all hierarchy. Fira Code is used extensively: task IDs, HCS topic hashes, agent handles, consensus log entries. Density is a feature: line heights tighten, font sizes drop to 0.75–0.82rem, letter-spacing is minimal.
---