How many component rules examples are included here?

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

140 curated examples24 per pagePage 1 of 6

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: Editorial Agent Mail description: A white email-infrastructure language with oversized Cooper-style serif headlines, monospaced controls, violet CTAs, measurement-like pricing controls, and quiet... --- version: alpha name: Precision N...

Recurring System Signals

Primary ( 10183A): the single anchor color for major type and primary actions.
Secondary ( FADC4B): butter-yellow utility chips and friendly support accents.
Tertiary ( FF5E79): coral-pink emphasis block for one hero panel or loud punctuation.
Display: rounded, friendly, and tightly tracked.
Body: concise and direct, without startup-corporate stiffness.
Labels: slightly stronger weight, but keep them in the same family to preserve warmth.

Related Keywords

OverviewColorsTypographyLayoutImage DirectionDisplay: rounded, friendly, and tightly trackedBody: concise and direct, without startup-corporate stiffnessPrimary ( 002B31): the main authority-setting stageSecondary ( F6F7F4): light surface and high-legibility textDisplay: very large, low-drama weight, and tightly trackedBody: precise and calm, never salesyLabels: compact and neutral, supporting navigation and metadata

AutoSend

Home

2026-04-24

Open example

Hex

Home

2026-01-26

--- version: alpha name: Precision Notebook Grid description: Paper-toned analytics marketing with editorial display type, square CTAs, and layered product-window storytelling. colors: primary: " 8F7AE6" secondary: " E5C...

Open example

UserJot

Home

2026-03-31

--- version: alpha name: Transparent Product Feedback description: A calm SaaS product language with warm off-white spacing, black pill actions, orange editorial signals, and large framed product-window previews. colors:...

Open example

AutoSend - Home

Hex - Home

UserJot - Home

Zeabur - Home

DropInBlog - Home

Samara - Home

Base - Home

Astro - Home

Design Gal Studio - Home

AngelList - Home

That Thing - Home

Framer - Home

Visitors - Home

Profound - Home

LlamaIndex - Home

Titan - Home

Swap Commerce - Home

Shuttle - About

Steps - Home

Div Block Studio - Home

Jeton - Home

Affinity - Home

Alma - Home

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