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 5 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: Lime Signal Revenue Suite description: Revenue-platform marketing system with editorial black display type, lime conversion CTAs, and white product canvases framed by pastel support atmospheres.... --- version: "alpha" name: "Expeditio...

Recurring System Signals

Keep the shell near-white and highly legible.
Use lime for the clearest conversion action.
Use black for headlines, borders, and serious utility moments.
Use an editorial serif for the biggest platform promises.
Switch to a blunt grotesk display style when a section needs to feel more technical or data-heavy.
Keep body copy sober, commercial, and easy to scan.

Related Keywords

OverviewImage DirectionColorsTypographyKeep the shell near-white and highly legibleUse lime for the clearest conversion actionUse full-bleed landscape media as the first impressionLet black and outdoor imagery drive the contrastKeep proof literal and legible rather than atmosphericKeep the page snow-white with faint gray structureLet diagrams and reference fragments carry the identityTreat each card like a paper exhibit tile

Apollo

Home

2026-01-23

Keep the shell near-white and highly legible.
Use lime for the clearest conversion action.

Open example

Lightship

Home

2026-01-20

--- version: "alpha" name: "Expedition Cinema Ledger" description: "A cinematic adventure storytelling system with full-bleed landscapes, monumental headlines, bone technical panels, and black utility pills." colors: pri...

Use full-bleed landscape media as the first impression.
Let the page oscillate between cinematic outdoor scale and grounded technical panels.

Open example

Picmal

Home

2026-01-20

--- version: "alpha" name: "Blue Utility Manual" description: "A crisp utility-product system with snow-white space, blue action bars, faint strokes, and screenshot-heavy proof." colors: primary: " 171717" secondary: " F...

Treat the system like a clean utility manual: direct, efficient, and screenshot-led.
Use blue actions to point the way without over-branding the shell.

Open example

Apollo - Home

Lightship - Home

Picmal - Home

Devouring Details - Home

Motion Graphic Design - Home

Amplemarket - Home

Popcorn - Home

Trawelt - Home

Integrated Biosciences - Home

Attio - Home

Vercel - Home

N1 - Home

COLLINS - Home

Aaron Sananes - Home

Humble - Home

Visitors - Home

LlamaIndex - Home

teampaper - Home

Dot - Home

unlock - Home

Schema - Home

Zerohash - Home

Keeby - Home

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