Browse all DESIGN.md examples

Component Rules

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

27 curated examples24 per pagePage 2 of 2

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: Forest Play Space description: A nature-play design language with layered forest illustration, hand-drawn display type, muted blue-green scenery, cream story cards, rounded FAQ rows, and warm ora... --- version: alpha name: Gridded Por...

Recurring System Signals

    Related Keywords

    OverviewColorsTypographyLayout

    The Cozy Hollow

    Home

    2026-02-22

    --- version: alpha name: Forest Play Space description: A nature-play design language with layered forest illustration, hand-drawn display type, muted blue-green scenery, cream story cards, rounded FAQ rows, and warm ora...

    Open example

    Saugat

    Home

    2026-02-22

    --- version: alpha name: Gridded Portfolio Ledger description: A minimal designer portfolio language with white ledger grids, black pill navigation, small color filter tags, large product screenshots, paper-note details,...

    Open example

    Klack

    Home

    2026-02-22

    --- version: alpha name: Cream Tactile Utility description: A warm Mac utility design language with cream canvas, huge bold system type, dark rounded download buttons, purple highlight marks, tactile app mockups, and lar...

    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.