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.

161 curated examples24 per pagePage 1 of 7

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

This system should feel like a design portfolio that trusts scale more than interface decoration. Build it from giant grotesk statements, deliberate emptiness, and a sharp alternation between pale gallery surfaces and bl... Build this system as a calm paper fi...

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

This system should feel like a design portfolio that trusts scale more than interface decoration. Build it from giant grotesk statements, deliberate emptiness, and a sharp alternation between pale gallery surfaces and bl...

Open example

Hex

Home

2026-01-26

Build this system as a calm paper field with strong editorial punctuation. The key move is contrast: oversized italic display language floats above dense, believable product windows. The page should feel exact and techni...

Open example

LobeHub

Home

2026-01-23

Soft Agent Workspace is a light-first system that makes advanced software feel collaborative and approachable. The first impression should be one giant italic statement over a near-white canvas, followed by a polished wh...

  • 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.