How many component rules 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

Component Rules

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

151 curated examples24 per pagePage 7 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: "Electric Noir Salon" description: "A noir event microsite built from black stage space, luminous cobalt ticket pills, giant serif statements, and tiny all-caps metadata." colors: primary: " 31... --- version: "alpha" name: "Soft Mas...

Recurring System Signals

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.
Keep the personality soft rather than hyper-illustrated.
Use soft mascot blobs, cropped portfolio proof, and very simple collage strips.
Treat imagery as punctuation around the sales story, not as a separate art direction.
Keep the shell pale gray rather than stark white.

Related Keywords

OverviewImage DirectionColorsTypographyKeep the personality soft rather than hyper-illustratedLayoutKeep proof object-based and reflective rather than productizedKeep the page mostly off-white and slate

Reflection

Home

2026-02-01

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

Integrated Biosciences

Home

2026-01-13

--- version: "alpha" name: "Biologic Aurora Field" description: "An atmospheric biotechnology marketing system with biomorphic aurora backdrops, pale lab canvases, charcoal utility bars, and chartreuse CTA sparks." color...

Build the first impression around one immersive rounded hero frame with biomorphic color motion frozen in a settled state.
Let the rest of the system oscillate between pale laboratory calm and dark utility concentration.

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.