Design System

How does every element on this site earn its place?

This is the living style guide for mm.dreamineering.com. Every color, typeface, spacing value, and component documented here is extracted from what's actually shipping — not aspirational.

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.

Color Tokens

Single source of truth: src/css/custom.css @theme block.

Semantic Palette

Token	Hex	Tailwind Class	Role
`--color-ink`	`#111827`	`bg-ink`, `text-ink`	Dark backgrounds, primary text
`--color-paper-cool`	`#f9fafb`	`bg-paper-cool`	Light section backgrounds
`--color-paper-muted`	`#f3f4f6`	`bg-paper-muted`	Secondary surfaces
`--color-brand`	`#b91c1c`	`bg-brand`, `text-brand`	Crimson accent, CTAs
`--color-brand-dark`	`#991b1b`	`bg-brand-dark`	Hover state
`--color-brand-light`	`#dc2626`	`text-brand-light`	Labels on dark backgrounds

Text Colors

Context	Token	Hex	Class
Primary on light	`--color-ink`	`#111827`	`text-ink`
Secondary on light	`--color-ink-muted`	`#4b5563`	`text-ink-muted`
Tertiary on light	`--color-ink-subtle`	`#6b7280`	`text-ink-subtle`
Disabled on light	`--color-ink-disabled`	`#9ca3af`	`text-ink-disabled`
Primary on dark	`--color-chalk`	`#f9fafb`	`text-chalk`
Secondary on dark	`--color-chalk-muted`	`#d1d5db`	`text-chalk-muted`
Tertiary on dark	`--color-chalk-subtle`	`#9ca3af`	`text-chalk-subtle`
White (CTA text)	`--color-chalk-light`	`#ffffff`	`text-chalk-light`

Borders

Token	Hex	Class	Use
`--color-edge`	`#e5e7eb`	`border-edge`	Default borders, dividers
`--color-edge-strong`	`#d1d5db`	`border-edge-strong`	Emphasized borders

Focus

Token	Hex	Use
`--color-focus`	`#2563eb`	Focus ring via `:focus-visible`

Background Alternation

Landing page sections alternate to create visual rhythm:

bg-ink       → Hero, CTA (dark bookends)
white        → Primary content sections
bg-stone-50  → Alternating content sections (warm gray)

bg-stone-50 is a Tailwind default, not a custom token. Used for warmth over bg-gray-50.

Typography

Font Stack

Token	Family	Weight Range	Use
`--font-sans`	Inter	400-700	All body and heading text
`--font-mono`	JetBrains Mono	400-500	Code, labels, accent text

Both loaded via Google Fonts with display=swap.

Type Scale

Element	Size	Weight	Line Height	Class Pattern
Hero H1	36-72px	Bold (700)	1.1	`text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1]`
Section H2	24-30px	Bold (700)	tight	`text-2xl md:text-3xl font-bold tracking-tight`
Body large	18-20px	Regular (400)	relaxed	`text-lg md:text-xl leading-relaxed`
Body	16-18px	Regular (400)	relaxed	`text-base md:text-lg leading-relaxed`
Small/caption	14-16px	Regular (400)	normal	`text-sm md:text-base`
Mono label	14px	Regular (400)	normal	`font-mono text-sm tracking-[0.15em] uppercase`

Text Patterns

Section label (mono, uppercase, tracked):

font-mono text-sm tracking-[0.15em] uppercase

On light: text-brand. On dark: text-brand-light.

Section heading (via SectionHeader):

text-2xl md:text-3xl font-bold tracking-tight

On light: text-ink. On dark: text-chalk.

Body description (via SectionHeader):

text-base md:text-lg leading-relaxed

On light: text-ink-muted. On dark: text-chalk-muted.

Cultural anchor (mono, subtle):

font-mono text-ink-subtle text-sm md:text-base tracking-wide

Spacing

Base Unit

4px (0.25rem). All spacing is a multiple of this base.

Section Spacing

Controlled by the Section component:

Prop	Mobile	Desktop	Use
`none`	0	0	Hero only
`sm`	24px	32px	Transitional elements
`md`	32px	48px	Visual transitions (diagram)
`lg`	48px	64px	Standard content sections
`xl`	64px	80px	Major divisions

Default is lg. All standard sections use lg.

Container Widths

Controlled by the Container component:

Prop	Max Width	Use
`sm`	640px	CTA section (tight focus)
`md`	768px	All standard sections
`lg`	1024px	Documentation content
`xl`	1280px	Full-width layouts

Default for landing page is md. Horizontal padding: px-4 md:px-6.

Content Gaps

Pattern	Value	Use
`space-y-8`	32px	Between section header and content
`space-y-4`	16px	Between heading and description
`space-y-3`	12px	Within `SectionHeader` (label/heading/description)
`gap-4`	16px	Inline elements (logo + wordmark)

Components

Three design system primitives. All landing page sections compose from these.

Section

Vertical padding wrapper. Outputs <section>.

<Section spacing="lg" className="bg-stone-50">
  {children}
</Section>

Container

Max-width + horizontal padding wrapper. Outputs <div>.

<Container size="md">
  {children}
</Container>

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) → <h2> (bold) → <p> (muted). Centered, max-width xl (576px).

Button

Rounded pill buttons with four variants.

<Button variant="primary" size="lg" to="/docs/">
  Explore the mental model &rarr;
</Button>

Variant	Background	Text	Border	Use
`primary`	`bg-brand`	white	none	Main CTA
`secondary`	`bg-paper-muted`	`text-ink`	none	Supporting actions
`ghost`	transparent	`text-ink`	none	Tertiary actions
`outline`	transparent	`text-ink`	`border-edge`	Alternative actions

Sizes: sm (px-4 py-2), md (px-6 py-3), lg (px-8 py-4). All use rounded-full.

Landing Page Pattern

Every section follows this exact structure:

<Section spacing="lg" className={/* bg-stone-50 for alternating */}>
  <Container size="md">
    <div className="space-y-8">
      <SectionHeader label="..." heading="..." description="..." />
      {/* section content */}
    </div>
  </Container>
</Section>

Section Sequence

#	Section	Role	Background
1	Hero	Hook	`bg-ink`
2	Enemy	Fear	white
3	Problem	Tension	white
4	Loop	Visual transition	white
5	Control System	Frame	`bg-stone-50`
6	Tight Five	Protocol	white
7	Beings	Edge	`bg-stone-50`
8	Belonging	Community	white
9	Factories	Proof	`bg-stone-50`
10	CTA	Action	`bg-ink`

Narrative arc: problem → mechanism → framework → application → community → action.

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

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 Integration

IFM Variable Mapping

Design tokens map to Docusaurus's 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`

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

Light Mode Only

Dark mode is disabled. The color mode toggle is hidden via CSS. No dark: classes are used anywhere.

Technical Architecture

CSS Load Order

@import "tailwindcss"       ← Framework first (required)
@source "..."               ← Content paths
@theme { }                  ← Design tokens (generates utilities)
Infima cascade fix          ← !important overrides
:root { }                   ← IFM variable mapping
Component styles            ← Navbar, footer, links

@import "tailwindcss" MUST be first. If @theme comes first, tokens are defined but Tailwind never processes them — utilities resolve to transparent.

Token Flow

@theme block (custom.css)
    |
    +-- Tailwind utilities: bg-ink, text-chalk, border-edge
    +-- Infima overrides: var(--color-*) !important
    +-- IFM mapping: var(--color-*) -> --ifm-*
    +-- Component styles: var(--color-*)

Every color in the codebase references @theme tokens via var(). The only raw hex values are inside the @theme block itself and four Docusaurus IFM shades with no design system equivalent.

Checklist

Before shipping any UI change:

Context

Rendering Verification -- Verify tokens resolve visually
Visual Design -- Contrast, hierarchy, spacing thresholds
Tailwind Theme -- v4 token layering best practices
Component Design -- Component architecture patterns
Dreamineering Design System -- Live token reference

Brand Identity​

Logo Variants​

Color Tokens​

Semantic Palette​

Text Colors​

Borders​

Focus​

Background Alternation​

Typography​

Font Stack​

Type Scale​

Text Patterns​

Spacing​

Base Unit​

Section Spacing​

Container Widths​

Content Gaps​

Components​

Section​

Container​

SectionHeader​

Button​

Landing Page Pattern​

Section Sequence​

Link Styles​

Global​

On Dark Backgrounds​

Brand Accent Links​

Button-Style Links​

Docusaurus Integration​

IFM Variable Mapping​

Infima Cascade Fix​

Light Mode Only​

Technical Architecture​

CSS Load Order​

Token Flow​

Checklist​

Context​