Atoms. A near-black canvas where a single warm champagne accent cuts like a blade through the darkness.
- AI
- Dark theme
- 4 colors
- 2 typefaces
Atoms operates in a near-total monochrome discipline: pure black canvases carry warm cream type and a single champagne accent. The system avoids color as decoration and instead uses a tight chromatic scale — cream for text, gold for emphasis, black for depth — to create an atmosphere of industrial precision, like machined titanium under tungsten light. Layout is compact, typographic, and grid-driven: large geometric logo marks, centered headline stacks, and dark bordered cards that hold company information with minimal chrome. Components are flat, low-contrast, and rely on hairline borders rather than shadows for definition. Motion is implied through structure rather than animation; every element reads as placed, not animated.

Atoms design system
Accent1
Accent headings, category tags, decorative borders — the only chromatic color in the system, used sparingly to mark emphasis and brand-bearing elements
Neutrals3
Page canvas, card surfaces, image backgrounds — absolute black dominates the visual field
Muted surface variation, secondary backgrounds, low-emphasis fills
Primary text, hairline borders, icon strokes — warm off-white reads softer than pure white against the black canvas
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Obsidian Black on Champagne Gold
9.78 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictPasses AAA 7











