Skip to content
Library

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.

Screenshot of Atoms
Captured from atoms.co on October 11, 2026

Atoms design system

Atoms

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

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.