Skip to content
Browse
Library

Atoms. White atelier with one blue spark.

  • Developer tools
  • Light theme
  • 14 colors
  • 2 typefaces

Atoms operates as a quiet workshop: near-white canvas, one confident blue-violet accent, and typography that lets content breathe rather than perform. The system is almost achromatic — gray is the structural material, and the single chromatic note appears only when something is actionable, linked, or wants to be named. Surfaces are flat and soft, cards float on barely-there shadows, and radii swing between fully pill-shaped (9999px) and generously rounded (24px) — never sharp, never heavy. IBM Plex Sans carries the UI at compact sizes while Plex Serif surfaces once, at 48px, giving the hero headline a literary weight that the product photography (template thumbnails with Mac chrome) deliberately undercuts with its playful, colorful content.

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

Atoms design system

Atoms

Brand2

  • Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

  • Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color

Accent3

  • Red supporting accent for decorative details and low-frequency emphasis

  • Decorative window-chrome dot on template preview thumbnails

  • Decorative window-chrome dot on template preview thumbnails

Neutrals9

  • Maximum-contrast text, dark template preview surfaces, image elements requiring true black

  • Primary text, heading text, icon fills, input borders — near-black rather than pure black for less harshness

  • Secondary text, badge labels, muted icon fills — sits between Ink Black and the mid-grays

  • Tertiary text, placeholder text, disabled button labels, input helper text

  • Muted icon fills, decorative text, low-emphasis UI marks

  • Subtle borders and dividers where Canvas Mist feels too prominent

  • Page-level background, hairline dividers, icon strokes — the dominant neutral that defines the system's floor

  • Subtle recessed surfaces, secondary card backgrounds, image overlays

  • Card backgrounds, input fields, elevated surfaces — the top layer of the surface stack

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Pure Black on Atoms Blue

4.62 : 1 contrast

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

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