How many color systems examples are included here?

This collection currently includes 151 curated examples with visible design analysis or structured design system values.

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.

151 curated examples24 per pagePage 4 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

--- version: alpha name: Signal Circuit Diagnostics description: Midnight engineering-marketing system with pale diagnostic surfaces, serif signal headlines, acid-lime pill actions, and faint technical diagram fields. co... --- version: alpha name: Creative Mo...

Recurring System Signals

Primary is an acid-lime action signal used only for the highest-intent CTA.
Secondary is a deep ink navy used for body text, dark actions, and utility surfaces.
Tertiary is an electric blue atmospheric accent, best used in glows, tiny signals, and technical diagram emphasis.
Use an editorial serif for the largest statements and key product-section headings.
Use a compact grotesk for all operational copy, labels, and UI text.
Keep display lines short and deliberate. Keep body copy plainspoken.

Related Keywords

OverviewImage DirectionColorsTypographyUse a simple UI sans for everything operationalKeep the personality soft rather than hyper-illustratedBlend operational clarity with a calm cultural atmosphereKeep the shell predominantly whiteBuild the experience like a quiet exhibition catalogLayoutTertiary ( FA651E): Rare annotation or proof accentPrimary ( 040404): the dominant black field

Antimetal

Home

2026-01-23

Primary is an acid-lime action signal used only for the highest-intent CTA.
Secondary is a deep ink navy used for body text, dark actions, and utility surfaces.

Open example

Affinity

Home

2026-01-23

--- version: alpha name: Creative Monolith Stage description: Black creative-software system with massive serif display type, acid-green CTAs, vivid artwork collage, and load-bearing pinned showcase progression. colors:...

Primary is an acid green reserved for the main action.
Secondary is a warm stone support surface for secondary action.

Open example

Ghost Designer

Home

2026-01-20

--- version: "alpha" name: "Soft Mascot Subscription" description: "A pale subscription-sales system with giant graphite headlines, white chips, dark slabs, and soft mascot punctuation." colors: primary: " 2D2A32" second...

Lead with one giant statement, one simple CTA, and one playful mascot cue.
Use white chips and dark slabs to keep the commercial structure obvious.

Open example

Antimetal - Home

Affinity - Home

Ghost Designer - Home

Muse - Home

Tailwind CSS - Home

Epic Games Store - Home

Endless - Home

Wist - Home

Jackie Zhang - Home

Profound - Home

Featurebase - Home

Codex - Home

Unmoth - Home

Gleap - Home

Unichain - Home

UFO Timeline - Home

UserJot - Home

Holo - Home

Macfolio - Home

Hex Security - Home

Notion - Home

Kiro - Home

Koto - Home

Making Software - Home

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.