{ "id": "2026-04-27-dreamborn-design-system-b01a4d71c5", "scope": "redkey", "source_of_truth": "repo", "source_path": "docs/superpowers/specs/2026-04-27-dreamborn-design-system.md", "source_kind": "markdown", "visibility": "internal", "renderer_id": "design_doc.dreamborn-forge.generated.v1", "design_system": "dreamborn-design-system:forge", "generated_at": "2026-05-09T13:00:55.771Z", "artifact_type": "design_doc", "schema_version": "design_doc.generated.v1", "title": "Dreamborn Design System — Spec", "summary": "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...", "format_source": "markdown", "sections": [ { "title": "Dreamborn Design System — Spec", "level": 1, "body": "**Date:** 2026-04-27\n**Status:** Approved\n**Repo:** `C:/Users/jstnk/downloads/cc/projects/dreamborn-design-system`\n\n---" }, { "title": "Purpose", "level": 2, "body": "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.\n\n---" }, { "title": "CSS Layer System", "level": 3, "body": "Three layers in cascade order:\n\n```\n@layer tokens, base, components;\n```\n\n- **tokens** — all CSS custom properties (palette, semantic, spacing, type scale, motion, shadow)\n- **base** — reset and foundational element styles\n- **components** — reusable UI patterns as CSS classes" }, { "title": "Three-Register System", "level": 3, "body": "Three typographic/color contexts activated via a data attribute:\n\n```html\n \n \n \n```\n\nSemantic 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.\n\n---" }, { "title": "Palette Scales (9 steps each)", "level": 3, "body": "| Scale | Base | Use |\n|---|---|---|\n| Crimson | `#8C1A13` | Primary brand, CTA, active states |\n| Lime | `#8DC63F` | Accent, live status, growth signals |\n| Warm Neutral | `#6B5F54` taupe base | Backgrounds, borders, muted text |" }, { "title": "Mark Intersection Colors", "level": 3, "body": "Derived from the overlapping circles in the logo mark:\n\n| Name | Hex | Source |\n|---|---|---|\n| `--db-olive` | `#4A5828` | Crimson × Lime overlap |\n| `--db-ember` | `#5C2318` | Crimson × Taupe overlap |\n| `--db-stone` | `#8A7E6A` | Lime × Taupe overlap |" }, { "title": "Semantic Token Mapping", "level": 3, "body": "| Token | Brand (dark) | Editorial (light) | Forge (dense dark) |\n|---|---|---|---|\n| `--db-bg` | `#0F0B0A` | `#FAF8F5` | `#0A0807` |\n| `--db-surface` | `#1A100E` | `#FFFFFF` | `#110D0B` |\n| `--db-text` | `#FAF8F5` | `#0F0B0A` | `#E8E2DC` |\n| `--db-text-muted` | `#6B5F54` | `#6B5F54` | `#5A4F46` |\n| `--db-accent` | `#8DC63F` | `#6A9A2C` | `#8DC63F` |\n| `--db-cta` | `#8C1A13` | `#8C1A13` | `#8C1A13` |\n\nCrimson CTA (`--db-cta`) is the one constant across all three registers." }, { "title": "Forge Status Colors", "level": 3, "body": "Forge adds four semantic status tokens not present in other registers:\n\n| Token | Value | Use |\n|---|---|---|\n| `--db-status-live` | `#8DC63F` (lime-500) | Active / in-progress tasks |\n| `--db-status-complete` | `#4A5828` (olive) | Completed tasks |\n| `--db-status-claim` | `#C9963A` | Claimed / pending states |\n| `--db-status-blocked` | `#C4352B` | Blocked / error states |\n\n---" }, { "title": "Font Pairings", "level": 3, "body": "**Brand register** — Bebas Neue (display) + Lora italic (subheads, body, pull quotes)\n**Editorial register** — Fraunces (display, bold/italic weight contrast) + DM Sans 300 (body)\n**Forge register** — DM Sans throughout (display, body, labels) + Fira Code (mono for IDs, topic hashes, terminal)\n**Shared UI chrome** — DM Sans handles all nav, buttons, labels, badges across all registers\n**Mono** — SF Mono / Fira Code for code and topic IDs\n\nAll fonts loaded from Google Fonts. Single `` tag covers all three registers." }, { "title": "Register Behavior", "level": 3, "body": "| Element | Brand | Editorial | Forge |\n|---|---|---|---|\n| Display XL | Bebas Neue, ~112px, +0.03em | Fraunces 700, ~64px, -0.02em | DM Sans 600, ~28px, -0.01em |\n| Subhead | Lora italic, 1rem | DM Sans 300, 1rem | DM Sans 500, 0.8rem |\n| Body | Lora italic, 0.9rem, leading 1.75 | DM Sans 300, 0.9rem, leading 1.8 | DM Sans 400, 0.82rem, leading 1.5 |\n| 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 |\n| Mono / IDs | Fira Code, 0.8rem | — | Fira Code, 0.75rem |" }, { "title": "Fraunces Weight Contrast", "level": 3, "body": "The editorial register's core technique: `font-weight: 700` for the title, `font-weight: 300; font-style: italic` for an `` word within it. One crimson word per headline maximum. Use `font-variation-settings: 'opsz' 9` below 18px, `'opsz' 24` at display sizes." }, { "title": "Forge Typography Philosophy", "level": 3, "body": "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.\n\n---" }, { "title": "Spacing Scale", "level": 3, "body": "4px base unit. Key steps:\n\n| Token | Value | Common use |\n|---|---|---|\n| `--db-space-2` | 8px | Badge padding, inline |\n| `--db-space-4` | 16px | Input padding |\n| `--db-space-6` | 24px | Card padding, grid gap |\n| `--db-space-8` | 32px | Pull quote indent |\n| `--db-space-12` | 48px | Below article header |\n| `--db-space-16` | 64px | Section padding (editorial) |\n| `--db-space-20` | 80px | Section padding (brand) |\n| `--db-space-32` | 128px | Hero vertical padding |" }, { "title": "Container System", "level": 3, "body": "| Class | Max-width | Use |\n|---|---|---|\n| `.db-container--wide` | 1200px | Cockpit, full-bleed feature blocks |\n| `.db-container` | 980px | Homepage, marketing pages |\n| `.db-container--narrow` | 680px | All editorial — ~72 chars/line |\n\nSide padding: `24px` (desktop) → `16px` (mobile)." }, { "title": "Whitespace Philosophy", "level": 3, "body": "1. **Air is not empty.** Space signals importance. Never compress space to fit more content.\n2. **Editorial is narrower than brand.** 680px max. Reading is a focused act.\n3. **Section rhythm is consistent.** Brand: `5rem` block padding. Editorial: `3rem` block padding.\n4. **Forge is dense by design.** 8–12px gaps. Sidebar 220px. Content fills the viewport. Whitespace is not a feature here — information density is.\n\n---" }, { "title": "Mark Usage", "level": 2, "body": "The Dreamborn mark (three overlapping organic circles) is used as follows:\n\n- **Brand register only:** Large soft circles (400–600px, 15–25% opacity) as ambient background texture, bleeding off edges of dark sections. Creates dimensionality without competing with type.\n- **Brand + Editorial:** The **lime outline circle** from the mark is used as a framing device (`.db-circle-frame`) for author portraits, agent avatars, and featured image crops. The one decorative element that bridges these two registers.\n- **Editorial register:** No ambient circles. Pure whitespace. The contrast between registers is intentional and legible.\n- **Forge register:** No mark elements of any kind. No orbs, no circle frames. Forge is a tool surface — brand expression lives in the wordmark only.\n- **Never:** Tile as pattern, crop images into circles system-wide, or use at small scale/high repetition.\n\n---" }, { "title": "Shared (all registers)", "level": 3, "body": "| Component | Class | Notes |\n|---|---|---|\n| Container | `.db-container`, `.db-container--wide`, `.db-container--narrow` | |\n| Section | `.db-section` | 80px block padding |\n| Label | `.db-label`, `.db-label--accent` | Uppercase, 0.18em tracking |\n| Display heading | `.db-display`, `.db-display--xl/lg/md` | Register-aware font |\n| Body text | `.db-body`, `.db-body--lg/sm` | Register-aware weight |\n| Button primary | `.db-btn.db-btn--primary` | Crimson, always |\n| Button ghost | `.db-btn.db-btn--ghost` | Border, adapts to register |\n| Button accent | `.db-btn.db-btn--accent` | Lime |\n| Card | `.db-card`, `.db-card--dark`, `.db-card--feature` | |\n| Divider | `.db-rule`, `.db-rule--full` | |\n| Circle frame | `.db-circle-frame` | Lime outline ring (brand + editorial only) |\n| Nav | `.db-nav` | Sticky, register-aware |" }, { "title": "Brand register only", "level": 3, "body": "| Component | Class | Notes |\n|---|---|---|\n| Live badge | `.db-live-badge` | Pulsing lime dot |\n| Topic badge | `.db-topic-badge` | Mono, lime tint |\n| Terminal block | `.db-terminal` | Dark, with color tokens |\n| Ambient orb field | `.db-orb-field` | Circle background texture |" } ], "html_path": "artifacts/2026-04-27-dreamborn-design-system-b01a4d71c5.html", "json_path": "artifacts/2026-04-27-dreamborn-design-system-b01a4d71c5.json" }