ash lumen
monochromatic design system · token-based · light/dark aware
a minimal system built from the grey spectrum. hierarchy through luminance, not hue.
brand
color via currentColor — inherits parent text token automatically. never tint with hex.
lead — lg size, text-secondary color. for subtitles and intro text.
body — 1.1rem base. the default reading size.
secondary — one step down. supporting copy.
muted — for metadata, timestamps, placeholders.
faint — barely visible. for dividers, underlines, ghost ui.
label — mono xs uppercase. for section eyebrows and data keys.
caption — xs, muted. for footnotes and image descriptions.
colors
foundations
buttons
badges
alerts
dark: prefix needed.color-mix() with css variable colors instead of /30 or /50.inputs
cards
default card — surface background, border-subtle, 6px radius, 24px padding.
for panels that hover one layer above the page.
border shifts to visible, shadow-md appears. 200ms ease.
96 declarations generated from base, light, and dark token files via the build script.
dialog
code
import { readFileSync } from 'node:fs';
interface Token {
name: string;
value: string;
}
// resolve design tokens at runtime
function getTokens(path: string): Token[] {
const raw = readFileSync(path, 'utf-8');
return JSON.parse(raw);
}
use color-mix(in srgb, var(--color-bg) 90%, transparent) for translucent surfaces.
opacity modifiers like /30 don't work with css variable colors.
motion
primary: light sweep translateX(−120% → 120%) · secondary: surface-raised bg · ghost: gains surface bg · danger: opacity 0.8
separator
content above
content below
states
2px solid focus-ring · outline-offset 2px · grey, not blue
opacity: 0.35 · pointer-events: none
links
links inherit accent color with a faint underline at 0.15em offset. on hover, the underline darkens to text-secondary — no color change, just the decoration.
within prose: underline-offset: 2px · transition: text-decoration-color 120ms ease.
selection
select this text to see the custom selection color — background: border · foreground: text. monochromatic. no blue highlight.