How many color systems examples are included here?

This collection currently includes 178 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.

178 curated examples24 per pagePage 2 of 8

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

Midnight Builder Marquee is a black-first launch system that sells speed and polish through reduction. The shell should feel almost empty at first glance: one oversized white headline, one short block of cool-gray suppor... Build for a developer and enterprise...

Recurring System Signals

Primary ( FFFFFF): Display text and the highest-intent CTA fill.
Secondary ( 1B1B1B): Quiet dark support action fill and panel tone.
Tertiary ( 8E8E93): Support copy, muted navigation, and low-priority labels.
Display: Very large, bold, tightly tracked, and tightly leaded.
Body: Neutral and readable, with restrained width under the hero.
Labels: Slightly heavier than body copy so small navigation items do not disappear on black.

Related Keywords

OverviewImage DirectionColorsTypographyAvoid mixing in extra decorative type familiesPrimary ( 444444): Main text and structural inkKeep all visible type mono and pixel-drivenSecondary ( D7E0DB): calm technical backdropTertiary ( EEDB3C): tiny observational signalDisplay: very large, sparse, and low-dramaBody: concise, explanatory, and calmLabels: minimal, mostly for navigation or tiny metadata

Framer

Home

2026-01-23

Primary ( FFFFFF): Display text and the highest-intent CTA fill.
Secondary ( 1B1B1B): Quiet dark support action fill and panel tone.

Open example

Groq

Home

2026-04-30

Build for a developer and enterprise audience that expects speed, clarity, and proof. Keep the outer shell warm and editorial so the system does not feel sterile, even when the content gets technical. Let one wide media...

Build for a developer and enterprise audience that expects speed, clarity, and proof.
Keep the outer shell warm and editorial so the system does not feel sterile, even when the content gets technical.

Open example

Addverb.ai

Home

2026-02-10

Midnight Robotics Stage is a product-stage system that uses black void space and glossy mechanical renders to make the hardware feel singular and cinematic. The interface should behave like a quiet frame around the robot...

Open example

Continue Exploring

Use these adjacent facet and workflow pages to connect color systems analysis with other structured design-system concerns across the site.

Hub

All DESIGN.md Examples

Return to the main DESIGN.md hub to scan the broader dataset and compare across multiple system concerns.

Related Hub

Design Topics

Branch into topic pages grouped by repeated visual signals when you want a broader inspiration lens beside this system-focused facet.

Adjacent Facet

Typography Systems

Examples where type scale, display choices, and reading hierarchy are described clearly enough to guide implementation.

Adjacent Facet

Component Rules

Examples that document reusable components, states, variants, and interaction expectations.

Adjacent Facet

Layout Principles

Examples that describe spacing, grid, rhythm, hierarchy, and structural decision-making.

Workflow Collection

AI Design System Examples

DESIGN.md-style references, token-driven systems, and tools for AI-readable design workflows.

Workflow Collection

Figma AI References

References for Figma AI, Figma Make, MCP-assisted design workflows, and editable UI generation.

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.