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

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

  • 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

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.