Browse all DESIGN.md examples

Color Systems

Browse DESIGN.md examples where palette systems, semantic tokens, and color logic are described as reusable design infrastructure.

140 curated examples24 per pagePage 1 of 6

What To Compare

Study how these systems document surfaces, accents, text contrast, semantic states, and token naming so color decisions remain durable across implementation.

What To Compare

Pay attention to token structure, contrast strategy, accent restraint, light/dark mode logic, and whether color intent is obvious from the system itself.

Design Analysis

Common color systems signals

--- version: alpha name: Editorial Contrast Stage description: A portfolio language built on giant grotesk type, floating pill navigation, pale-to-black chapter contrast, and a subtle global cursor follower. colors: prim... --- version: alpha name: Precision N...

Recurring System Signals

  • Primary ( 222222): High-intent button fill and dark utility emphasis.
  • Secondary ( FFFFFF): Card, button, and workspace window surface.
  • Tertiary ( 0072F5): Small interactive signal, link, and icon accent.
  • Display: Oversized, italic, tightly tracked, and highly confident.
  • Body: Calm, friendly, and evenly spaced.
  • Labels: Slightly weightier than body copy to preserve clarity on very light surfaces.

Related Keywords

OverviewImage DirectionColorsTypographyDisplay: Oversized, italic, tightly tracked, and highly confidentBody: Calm, friendly, and evenly spacedLayoutSecondary ( 111111): Utility surfaces and card fillTertiary ( FFE81E): Statement accent and key emphasisDisplay: Bold, centered, tightly tracked, and directBody: Clear, compact, and utility-firstBody: Plain and evenly spaced

Analogue Agency

Home

2026-01-26

--- version: alpha name: Editorial Contrast Stage description: A portfolio language built on giant grotesk type, floating pill navigation, pale-to-black chapter contrast, and a subtle global cursor follower. colors: prim...

Open example

Hex

Home

2026-01-26

--- version: alpha name: Precision Notebook Grid description: Paper-toned analytics marketing with editorial display type, square CTAs, and layered product-window storytelling. colors: primary: " 8F7AE6" secondary: " E5C...

Open example

LobeHub

Home

2026-01-23

--- version: alpha name: Soft Agent Workspace description: Off-white workspace marketing system with giant italic grotesk display, soft aurora tinting, rounded white product windows, and black first-action buttons. color...

  • Primary ( 222222): High-intent button fill and dark utility emphasis.
  • Secondary ( FFFFFF): Card, button, and workspace window surface.
Open example

Color Systems FAQ

What should I study on this page?

Study how these systems document surfaces, accents, text contrast, semantic states, and token naming so color decisions remain durable across implementation.

Why browse this as a dedicated DESIGN.md collection?

A focused collection makes it easier to compare how teams describe one system concern consistently across many examples instead of mixing unrelated signals on a single page.