How many component rules examples are included here?

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

161 curated examples24 per pagePage 2 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

Creative Monolith Stage is an art-led software system that treats the page like a black gallery wall. It should feel oversized, theatrical, and unmistakably visual: massive serif display type, vivid artwork intrusions, a... Warm Nutrition Companion is a friend...

Recurring System Signals

Primary is an acid green reserved for the main action.
Secondary is a warm stone support surface for secondary action.
Tertiary is a showcase accent that can appear in creative proof blocks.
Use a dramatic high-contrast serif for the largest statements.
Use a simple UI sans for everything operational.
Keep the display type huge enough to compete with the artwork.

Related Keywords

OverviewImage DirectionColorsTypographyUse a simple UI sans for everything operationalSecondary ( FFFDFC): Card and note surfaceTertiary ( A7C93D): Score and success accentLabels: Slightly firmer grotesk for compact UI clarityBlend operational clarity with a calm cultural atmosphereKeep the shell predominantly whiteLayoutAvoid mixing in extra decorative type families

Affinity

Home

2026-01-23

Primary is an acid green reserved for the main action.
Secondary is a warm stone support surface for secondary action.

Open example

Alma

Home

2026-01-21

Warm Nutrition Companion is a friendly wellness system that pairs editorial warmth with app-like clarity. The first fold should feel like a helpful coach rather than a hard-selling product page: cream shell, chocolate di...

Primary ( 3C5627): Main action fill and high-intent coaching signal.
Secondary ( FFFDFC): Card and note surface.

Open example

Muse

Home

2026-01-20

Blend operational clarity with a calm cultural atmosphere. Use giant sans word stacks and soft serif body support. Let architecture and artifact imagery provide warmth without cluttering the UI. Favor facades, galleries,...

Blend operational clarity with a calm cultural atmosphere.
Use giant sans word stacks and soft serif body support.

Open example

Affinity - Home

Alma - Home

Muse - Home

Attio - Home

Studio Nika - Home

Wist - Home

Dot - Home

unlock - Home

Gleap - Home

Zerohash - Home

Holo - Home

LookAway - Home

OneTech - Home

Wimp Decaf - Home

Vooma - Home

Resonance Studio - Home

Krea - Home

Sunday - Home

Superhuman - Home

Legora - Home

LobeHub - Home

Featurebase - Home

Bud - Your AI Worker - Home

Mosey - Home

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.