Design System
What does the brand look like, what components ship, and how does a landing page sequence work?
This page covers the four things unique to this repo: the brand identity, the component inventory, the landing page sequence, and the Docusaurus IFM cascade fix. For tokens and composition rules see Design Language. For numbers see the Hard Thresholds Table.
Operational Bible
The runtime source of truth for this design system is src/components/DESIGN.md — a Google Labs design.md file living beside the components it governs. Every primitive listed below is documented there in machine-readable YAML (colors, typography, spacing, components) plus human prose (do's and don'ts). Agents working in src/components/ read this file first.
# Lint the operational bible before shipping
npx @google/design.md lint src/components/DESIGN.md
The bible aligns with tailwind.config.js and the :root block in src/css/custom.css. Those two runtime surfaces are paired in this Docusaurus repo: Tailwind generates utility names, while CSS variables provide the rendered values that survive the Infima cascade fix. Drift across any layer is a blueprint failure — patch the bible, config, CSS token surface, and consumers in one PR.
Full standard, four-scope rules (system / per-venture / per-workchart / per-deck), section order, and lint enforcement live in Design System Standards §The DESIGN.md Standard.
Brand Identity
The Dreamineering logo is a P&ID (Process & Instrumentation Diagram) — the same visual language used to draw factories. Four shapes form a feedback loop that doubles as a question mark.
| Shape | P&ID element | Function | Asset |
|---|---|---|---|
| Trapezoid | Hopper | Capture | drmg-dream.svg |
| Triangle | Pump | Act | drmg-act.svg |
| Circle | Gauge | Measure | drmg-measure.svg |
| Curve | Controller | Question | drmg-learn.svg |
Logo variants
| File | Use |
|---|---|
logo.svg | Full mark, currentColor fill |
logo-home-red.svg | White shapes on red — homepage nav |
logo-home-white.svg | Red shapes on white |
logo-white.svg | White fill — dark backgrounds |
All assets at /static/img/brand/.
The logo is a diagram, not decoration. Every appearance should feel like a system, not a brand mark.
Component Inventory
Fifteen design-system primitives wrap everything else. The component catalogue lives in Design Language → Primitive Catalogue, and the operational export list lives in src/components/design-system/index.ts.
Section
Vertical padding wrapper. Outputs <section>.
<Section spacing="lg" bg="alt">
{children}
</Section>
Spacing scale: none 0 · sm 24/32 · md 32/48 · lg 48/64 · xl 64/80 (mobile / desktop). Default lg.
Container
Max-width + horizontal padding wrapper. Outputs <div>.
<Container size="md">{children}</Container>
Sizes: sm 640px · md 768px (default for landing) · lg 1024px · xl 1280px. Padding px-4 md:px-6.
SectionHeader
Label + heading + description in consistent sizing and spacing.
<SectionHeader
label="The Tight Five"
heading="Five questions that change everything."
description="Optional supporting text."
dark={false}
/>
Renders: label (mono uppercase) → heading → lede. Centered by default, left-aligned with align="left". The component maps heading levels onto the public text-h1 / text-h2 / text-h3 scale; standalone heroes may use text-display directly when they need a larger page-level treatment.
Button
<Button variant="primary" size="lg" to="/intention/">
Explore the mental model →
</Button>
Variants: primary (bg-brand · white) · secondary (bg-paper-muted · text-ink) · ghost (transparent · text-ink) · outline (transparent · text-ink · border-edge). Sizes: sm md lg. All rounded-full.
Current primitive list
| Primitive | Job |
|---|---|
Section, Container | Page rhythm and width constraints |
SectionHeader | Eyebrow + heading + lede |
Button | CTA/link/button primitive |
Card | Bordered surface for grouped content |
Chip | Semantic pill |
Prose | Markdown-style content wrapper |
Eyebrow, EyebrowLink, InlineLink | Structural labels and links |
TightFive | Five-item disclosure primitive |
Rhythm | Tokenized vertical stack |
Stat | Metric display |
Divider | Labelled or plain rule |
DataListTable | Mobile-first data table |
CopyablePrompt | Paste-ready next-action prompt |
Navigation Pattern — Sticky Proposal Nav
Multi-page venture packages need persistent nav so readers don't lose their place on long pages.
Component: ProposalNavigation — JSON-driven, two-row, sticky.
<ProposalNavigation venture={ventureJson} currentPage="business-plan" />
Structure:
Row 1 (always): ← Ventures | Venture Name | Section tabs
Row 2 (context): Sub-tabs — only when the active section has children
Key decisions:
| Decision | Choice | Why |
|---|---|---|
| Data source | venture.nav.sections JSON | One component, every venture |
| Sticky | sticky top-0 z-50 | Long pages — nav must persist |
| Active indicator | border-b-2 border-brand | Underline pattern, no fill |
| Accessibility | aria-current="page" on active tab | WCAG 2.2 — screen reader orientation |
| Container | role="navigation" + aria-label={venture.name} | Multiple navs on page — must be labelled |
| Children trigger | Any section with children[] shows Row 2 | Data-driven, no special casing |
Nav schema in venture JSON:
"nav": {
"sections": [
{ "id": "overview", "label": "Overview", "path": "/ventures/{slug}/" },
{ "id": "business-plan", "label": "Think Slow", "path": "/ventures/{slug}/business-plan/",
"children": [
{ "id": "business-plan", "label": "Business Plan", "path": "..." },
{ "id": "pitch", "label": "Pitch", "path": "..." }
]
},
{ "id": "prompt-deck", "label": "Act Fast", "path": "/ventures/{slug}/prompt-deck/" }
]
}
Labels teach the mental model: Overview (what) → Think Slow (why) → Act Fast (do). The tab names are not arbitrary — they communicate the proposal arc before the reader clicks.
Landing Page Sequence
Every section follows this exact structure:
<Section spacing="lg" bg="alt">
<Container size="md">
<div className="space-y-8">
<SectionHeader label="..." heading="..." description="..." />
{/* section content */}
</div>
</Container>
</Section>
Section sequence
| # | Section | Role | Background |
|---|---|---|---|
| 1 | Hero | Orientation | bg-brand-bg or bg-ink |
| 2 | Why now | Stakes | bg-brand-bg or white |
| 3 | Model | Mechanism | bg-brand-surface or white |
| 4 | Doors | Routing | bg-brand-surface or white |
| 5 | Belief | Thesis | bg-ink |
| 6 | Proof | Substance | bg-brand-bg or bg-surface-alt |
| 7 | FAQ | Objections | bg-brand-surface or white |
| 8 | Final CTA | Action | bg-ink |
Narrative arc: orientation → stakes → mechanism → routing → belief → proof → objections → action.
Background alternation
bg-ink → Thesis and CTA dark bookends
white / bg-surface → Primary docs and operational sections
bg-surface-alt → Alternating docs sections
brand-* tokens → Premium homepage/front-door editorial surfaces
Do not use generic Tailwind palette backgrounds like bg-stone-50 for new surfaces. Use semantic tokens so docs, runtime, and agents speak the same grammar.
Link Styles
Global
All links: font-weight: 600, no underline by default. On hover: color: brand, underline 2px with 3px offset.
On dark backgrounds
text-chalk underline hover:text-chalk-light
Links on bg-ink sections are always underlined (no other affordance on dark). This is the explicit exception to the "no underline by default" rule — context-driven, not a contradiction.
Brand accent links
text-brand hover:underline font-medium
Used inline where the link IS the emphasis.
Button-style links
All rounded-full elements suppress underline on hover via CSS override.
Docusaurus IFM Cascade Fix
Infima's unlayered CSS rules override Tailwind's @layer utilities. Compound selectors with !important are required for headings and links on landing pages:
h1.text-chalk {
color: var(--color-chalk) !important;
}
a.text-brand {
color: var(--color-brand) !important;
}
These live in custom.css. Do not remove them — without the !important overrides, Infima reverts colours and the landing page looks broken on dark sections.
IFM variable mapping
Design tokens map to Docusaurus Infima variables in :root:
| Our token | Maps to |
|---|---|
--color-brand | --ifm-color-primary |
--color-brand-dark | --ifm-color-primary-dark |
--color-brand-light | --ifm-color-primary-light |
--font-sans | --ifm-font-family-base |
--font-mono | --ifm-font-family-monospace |
--color-ink | --ifm-link-color |
--color-brand | --ifm-link-hover-color |
CSS load order (this repo)
@tailwind base/components/utilities ← Framework first (required for v3)
:root { } ← Token definitions
Infima cascade fix ← !important overrides
IFM variable mapping ← var(--color-*) → --ifm-*
Component styles ← Navbar, footer, links
For Tailwind v4 (greenfield apps, not this repo), @import "tailwindcss" replaces the three @tailwind directives and the layer order shifts. See Tailwind v4 Theme. For this repo's v3 specifics see src/css/CLAUDE.md.
Light Mode Only
Dark mode is disabled. The colour mode toggle is hidden via CSS. No dark: classes are used anywhere on the site.
The amended rule allowing deliberate dark themes per component (when WCAG-cached + runtime-gated) lives in Design Language → No Dark Mode Amended. The site-wide rule stands; per-component themes earn their exception.
Context
- Product Design hub — Hard Thresholds Table, situation router
- Design Language — tokens, primitives, component hierarchy, composition rules
- Audit Loop — verify tokens resolve, components render, pages pass
- Tailwind v4 Theme — v4 token layering for greenfield apps
- Live Design System reference