Atoms
Reusable building blocks. Palettes hold swatches; fonts hold family + weights + license; layouts hold spacing scales. Each atom is versioned with semver and references its canonical source.
Brand Atoms
A machine-readable encyclopedia of palettes, fonts, and brand standards — the canonical source AIs and humans consume to produce on-brand outputs.
Encyclopedia is alive · Converter emits W3C Design Tokens + JSON · Builder UI coming
What this is
Most brand guides live as PDFs or Figma boards — beautiful for humans, opaque to machines. Brand Atoms is the inverse: a typed, version-controlled library where every color, font, and rule is structured data. AI agents, design tools, and human builders all read from the same source of truth.
Each piece is an atom — a palette like nord or material-3, a
font like jetbrainsmono-nerdfont. Atoms compose into brands, which add
semantic role mappings (which color is the CTA, which font is the heading) and
typed-constraint rules describing how the brand should be applied (minimum logo width,
contrast ratios, forbidden treatments).
Brands
Compositions of atoms plus semantic role mappings (primary, cta,
heading, etc.) and structured assets (logos, favicons, og-images) with
intended-mode metadata.
Rules
Typed constraint vocabulary — numericRange, contrastRatio,
forbiddenTreatment, fontPairing and seven more. AI consumers
iterate them programmatically; they're never opaque prose.
3
palettes
364 swatches total →
5
fonts
sans + monospace →
1
brand
composed →
11
constraint types
in the rule vocabulary
Who consumes this
- AI agents generating sites and apps — fetch a brand, render in-brand output every time.
- Design systems teams — pull tokens in W3C / Tailwind / CSS-vars format and stay in sync with canon.
- Brand composers — humans browsing the catalog to compose new brands from atoms.
- The encyclopedia itself — every change is a typed YAML diff in git, reviewable like code.