Three rules that trump everything else in this document. Use them to resolve any ambiguity you find in the chapters above.
We would rather ship one exceptional component than five adequate ones. If a piece of the system feels thin, it shouldn't exist yet.
Every token, every pattern, every line of copy reflects a decision we're willing to defend. Neutral design is generic design.
The brand lives in the space between elements. When in doubt, choose the next step up on the spacing scale. Silence is a component.
Eight chapter files, three shared primitives, one logo SVG, one tokens export. That's the entire system on disk.
The cover. Manifesto, mark, table of contents.
index.html→ 01Color ramps, spacing scale, radius, elevation, surfaces.
foundations.html→ 02Fraunces + Inter + Mono. The scale and the pairings.
type.html→ 03Mark construction, lockups, variants, favicon, misuse.
logo.html→ 04Seven primitives. Tempo, easings, reduced-motion.
motion.html→ 05Buttons, fields, badges, alerts, cards, nav, modals, toasts.
components.html→ 06Hero, thesis, products, form, empty state.
patterns.html→ 07Pillars, glossary, signature lines, rewrites.
voice.html→Every CSS custom property the system uses. Import once per page.
shared/tokens.csssourceReset, type scale, keyframes, reduced-motion. Import after tokens.
shared/base.csssourceRenders the system's nav + footer. Pass current page slug.
shared/chrome.jssourceThe primary mark. 120×120 viewBox. Six beams + gold core.
assets/logo-mark.svgsourceThe complete list of CSS custom properties. Never hard-code these values anywhere in product code — always reference the token. If you need a value that isn't here, propose adding it before using it.
| Group | Token | Value | Use |
|---|---|---|---|
| Color · core | --bg | #09090b | App background |
| --surface | #111113 | Cards, panels | |
| --surface-raised | #1a1a1f | Hovered cards, dropdowns | |
| --surface-sunken | #050506 | Inputs, code blocks | |
| --text | #fafafa | Primary text | |
| --text-secondary | #a1a1aa | Body, captions | |
| --text-muted | #71717a | Metadata, tertiary | |
| --border | #26262c | Dividers, panel outlines | |
| --border-strong | #3f3f47 | Hovered, higher contrast | |
| Color · accent | --accent | #eab308 | Primary accent (gold) |
| --accent-hover | #fde047 | Hover state | |
| --accent-ink | #09090b | Text on gold fill | |
| --accent-glow | rgba(234,179,8,0.25) | Focus ring, button glow | |
| Color · signal | --signal-success | #22c55e | Success states, live badges |
| --signal-warn | #f59e0b | Soft alerts | |
| --signal-error | #ef4444 | Errors (never as fill) | |
| --signal-info | #a8caec | Neutral notices | |
| Spacing | --s-1 … --s-11 | 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 192 | Use ascending; don't skip mid-range |
| Radius | --r-xs … --r-full | 4 · 8 · 12 · 16 · 24 · 9999 | Full for pills, md for popovers |
| Elevation | --shadow-sm / md / lg / xl | soft shadows · dark contexts | Prefer glow where possible |
| --glow-gold / lg | gold radial glow | Heroes, primary CTAs | |
| Motion | --dur-breath | 2800ms | Core tempo |
| --dur-radiate | 3000ms | Ring expansion | |
| --dur-atmosphere | 4000ms | Ambient drift | |
| --dur-shimmer | 8000ms | Gold text shimmer | |
| --ease-organic | cubic-bezier(.4, 0, .2, 1) | Default for all transitions |
Add the system to a new page in four lines. Tokens must come first. Base comes second. Your styles override last.
<!-- 1. Fonts — all self-hosted from /fonts, loaded by tokens.css --> <!-- Fraunces (variable) · Inter UI · JetBrains Mono --> <!-- 2. Tokens + base (in this order) --> <link rel="stylesheet" href="shared/tokens.css"> <link rel="stylesheet" href="shared/base.css"> <!-- 3. Mark theme on html root --> <html data-theme="dark" data-accent="gold"> <!-- 4. Use tokens, never raw values --> .my-button { background: var(--accent); color: var(--accent-ink); padding: var(--s-3) var(--s-6); border-radius: var(--r-full); transition: all 200ms var(--ease-organic); }
Handoff assets for design, engineering, and brand. Everything is open; nothing is locked behind a portal.
Primary six-beam mark with gold core. 120×120 viewBox, scalable to any size.
logo-mark.svgdownload → CSS · tokensAll color, spacing, radius, shadow, motion, and font variables as CSS custom properties.
tokens.cssdownload → CSS · baseReset, type scale, keyframes (all 7 motion primitives), reduced-motion fallback.
base.cssdownload → HTML · liveClone the entire system. Every page is plain HTML — no build step, no framework.
luminocity-ds/browse →Changes to the system are small, visible, and dated. We don't ship a v2 — we move forward in minor versions, and we write down what moved.
The system is maintained by Richard Moulton. Proposals for additions or revisions go to design@luminocity.ai. Every change to shared tokens requires a written rationale — not because we're precious, but because the next person needs to know why.
Built with conviction,
not consensus.
