Browse all DESIGN.md examples

Component Rules

Browse DESIGN.md examples that make component rules explicit through buttons, navigation, cards, variants, and state definitions.

151 curated examples24 per pagePage 3 of 7

What To Review

Compare how teams define reusable components, state logic, emphasis levels, and naming conventions so implementation becomes less ambiguous.

What To Compare

Look for state coverage, component naming clarity, variant strategy, interaction rules, and whether the system is strong enough to support repeated UI work without ad hoc decisions.

Design Analysis

Common component rules signals

--- version: "alpha" name: "Monument Mono Event Poster" description: "A typographic event-poster system built from white space, black monument type, mono navigation, and sharp vermilion interrupts." colors: primary: " 0A... --- version: alpha name: "Clinical M...

Recurring System Signals

  • Primary ( 010A21): Main type, lines, and structural emphasis.
  • Secondary ( 6D7483): Supporting paragraphs and secondary nav tone.
  • Tertiary ( FFF35A): CTA fill and geometric highlight cells.
  • Use the display grotesk for large conceptual statements only.
  • Keep body copy calm and evenly spaced.
  • Avoid ornamental type choices that would dilute the scientific tone.

Related Keywords

OverviewImage DirectionColorsTypographyKeep body copy calm and evenly spacedPrimary is charcoal and powers the main CTASecondary is a pale neutral support surfaceUse one plain grotesk throughoutKeep display large and directLayoutUse one dense modern sans throughoutKeep headlines large, direct, and uncluttered

Laracon 2026

Home

2026-02-05

--- version: "alpha" name: "Monument Mono Event Poster" description: "A typographic event-poster system built from white space, black monument type, mono navigation, and sharp vermilion interrupts." colors: primary: " 0A...

Open example

Coding Bio

Home

2026-02-03

--- version: alpha name: "Clinical Modular Lattice" description: "Scientific marketing system with navy type, white space, modular geometry, and yellow signal accents." colors: primary: " 010A21" secondary: " 6D7483" ter...

  • Primary ( 010A21): Main type, lines, and structural emphasis.
  • Secondary ( 6D7483): Supporting paragraphs and secondary nav tone.
Open example

Analogue Agency

Home

2026-01-26

--- version: alpha name: Editorial Contrast Stage description: A portfolio language built on giant grotesk type, floating pill navigation, pale-to-black chapter contrast, and a subtle global cursor follower. colors: prim...

Open example

Component Rules FAQ

What should I study on this page?

Compare how teams define reusable components, state logic, emphasis levels, and naming conventions so implementation becomes less ambiguous.

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.