08. System.

Chapter 08·Files · tokens · handoff
What the system is made of, where it lives in the codebase, and how to carry it into a new surface without breaking it. If you're new to the system, start here after you've read the other seven.

Governing principles.

Three rules that trump everything else in this document. Use them to resolve any ambiguity you find in the chapters above.

01 / Less — but sharper

Density beats breadth.

We would rather ship one exceptional component than five adequate ones. If a piece of the system feels thin, it shouldn't exist yet.

02 / Conviction

Pick a side.

Every token, every pattern, every line of copy reflects a decision we're willing to defend. Neutral design is generic design.

03 / Breath

Leave room.

The brand lives in the space between elements. When in doubt, choose the next step up on the spacing scale. Silence is a component.

File structure.

Eight chapter files, three shared primitives, one logo SVG, one tokens export. That's the entire system on disk.

00

Home

The cover. Manifesto, mark, table of contents.

index.html
01

Foundations

Color ramps, spacing scale, radius, elevation, surfaces.

foundations.html
02

Type

Fraunces + Inter + Mono. The scale and the pairings.

type.html
03

Logo

Mark construction, lockups, variants, favicon, misuse.

logo.html
04

Motion

Seven primitives. Tempo, easings, reduced-motion.

motion.html
05

Components

Buttons, fields, badges, alerts, cards, nav, modals, toasts.

components.html
06

Patterns

Hero, thesis, products, form, empty state.

patterns.html
07

Voice

Pillars, glossary, signature lines, rewrites.

voice.html
· shared

tokens.css

Every CSS custom property the system uses. Import once per page.

shared/tokens.csssource
· shared

base.css

Reset, type scale, keyframes, reduced-motion. Import after tokens.

shared/base.csssource
· shared

chrome.js

Renders the system's nav + footer. Pass current page slug.

shared/chrome.jssource
· asset

logo-mark.svg

The primary mark. 120×120 viewBox. Six beams + gold core.

assets/logo-mark.svgsource

Token reference.

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

GroupTokenValueUse
Color · core--bg#09090bApp background
--surface#111113Cards, panels
--surface-raised#1a1a1fHovered cards, dropdowns
--surface-sunken#050506Inputs, code blocks
--text#fafafaPrimary text
--text-secondary#a1a1aaBody, captions
--text-muted#71717aMetadata, tertiary
--border#26262cDividers, panel outlines
--border-strong#3f3f47Hovered, higher contrast
Color · accent--accent#eab308Primary accent (gold)
--accent-hover#fde047Hover state
--accent-ink#09090bText on gold fill
--accent-glowrgba(234,179,8,0.25)Focus ring, button glow
Color · signal--signal-success#22c55eSuccess states, live badges
--signal-warn#f59e0bSoft alerts
--signal-error#ef4444Errors (never as fill)
--signal-info#a8caecNeutral notices
Spacing--s-1 … --s-114 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 192Use ascending; don't skip mid-range
Radius--r-xs … --r-full4 · 8 · 12 · 16 · 24 · 9999Full for pills, md for popovers
Elevation--shadow-sm / md / lg / xlsoft shadows · dark contextsPrefer glow where possible
--glow-gold / lggold radial glowHeroes, primary CTAs
Motion--dur-breath2800msCore tempo
--dur-radiate3000msRing expansion
--dur-atmosphere4000msAmbient drift
--dur-shimmer8000msGold text shimmer
--ease-organiccubic-bezier(.4, 0, .2, 1)Default for all transitions

Quickstart.

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);
}

Downloads.

Handoff assets for design, engineering, and brand. Everything is open; nothing is locked behind a portal.

SVG · 2KB

Logo mark

Primary six-beam mark with gold core. 120×120 viewBox, scalable to any size.

logo-mark.svgdownload →
CSS · tokens

Design tokens

All color, spacing, radius, shadow, motion, and font variables as CSS custom properties.

tokens.cssdownload →
CSS · base

Base styles

Reset, type scale, keyframes (all 7 motion primitives), reduced-motion fallback.

base.cssdownload →
HTML · live

This site, source

Clone the entire system. Every page is plain HTML — no build step, no framework.

luminocity-ds/browse →

Versioning.

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.

v1.0 · APR 2026

Initial system

  • Eight chapters: Home, Foundations, Type, Logo, Motion, Components, Patterns, Voice, System.
  • Three font families: Fraunces (display), Inter (clarity), JetBrains Mono (instrument).
  • Obsidian + Gold + Nebula palette — gold is the only warm element.
  • Seven motion primitives built on a 2800ms breath tempo.
  • Logo: six-beam nebula mark, 120u grid, four approved color variants.
  • Voice: four pillars, seven signature phrases, glossary of 10 replacements.
Next

Planned

  • Product shell patterns (authenticated nav, dashboard scaffolds) — after first product hits GA.
  • Email / transactional templates.
  • Motion library as a drop-in JS module.
  • Figma library mirroring every component on this site.

Ownership.

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.