Subconscious Design System

Ink · Ivory · Signal Red. Three colors. Three fonts. One doctrine.

Live preview → subconscious-ai.github.io/design-system

---

Doctrine

Every surface we ship is built of pairs. Left column: stated — what people say (a lie, usually a flattering one). Right column: revealed — what they actually do (the truth, usually inconvenient). Signal red marks the gap. Always.

The three rules:

1. One thing violently large. One thing uncomfortably small. Kill the middle weight.
2. No 12px radius. No box-shadow. No scale() transforms. No gradients.
3. Red marks the gap only. It is not a brand color. It is a signal.

---

What's in here

tokens.css          — Design tokens: colors, type scale, motion, spacing
fonts/              — Exposure (display) + Sohne Mono (meta)
preview/            — Living design docs · 26 HTML cards · open in any browser
slides/             — Deck template (1920×1080, 9 layouts including falsifier)
ui-kits/            — HTML prototype UI kits
  marketing-site/   — Full marketing page prototype
react/web/          — Next.js 16 reference implementation
  src/components/   — Button, Nav, Stats, Features, MetricsTable, Footer
assets/             — Logo, OG image, brand assets

---

Viewing the design docs

Open preview/index.html in a browser. No build step, no server.

Keyboard shortcuts (on any preview page):

• Space — cycle through color palettes (ivory → ink → slate → parchment → forest → chalk)
• I — invert current palette foreground/background

---

Fonts

Font	Role	File
Exposure Light / ExtraLight	Display, headlines	fonts/Exposure-*.otf
Sohne Mono	Labels, data, meta	fonts/SohneMono-Regular.woff2
Cormorant Garamond Italic	Stated preference ("the voice of the lie")	Google Fonts

---

Using this system in another repo

See ADOPTING.md for step-by-step instructions for:

• ai-chatbot
• causl.io
• holodeck
• johnny-5-rebuild

---

Color palette

Name	Hex	Role
Ink	#0b0b0b	The voice. Always.
Ivory	#f2f1ed	Newsprint. Not white.
Signal Red	#c8102e	Marks the gap only.

---

Quick token import

<!-- in any HTML page -->
<link rel="stylesheet" href="https://subconscious-ai.github.io/design-system/tokens.css">

/* or in CSS */
@import url("https://subconscious-ai.github.io/design-system/tokens.css");

---

Stated vs Revealed · always.