How many component rules examples are included here?

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

178 curated examples24 per pagePage 1 of 8

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

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty. Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.... Build a property-marketing shell wher...

Recurring System Signals

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.
Use copy blocks and CTAs to support the place narrative, not to overwhelm it.
Favor architecture, interiors, landscapes, and lifestyle scenes with strong cropping discipline.
Use large-format imagery or video-like hero framing before relying on UI decoration.
Motion libraries detected in capture: gsap, ScrollTrigger. Treat them as sequence scaffolding rather than decoration.

Related Keywords

OverviewImage DirectionEntry & Arrival MotionColorsTypographyLayoutDisplay: 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 salesy

Canal Club Wickside

Home

2026-06-08

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.

Open example

ALRE

Home

2026-06-08

Build a property-marketing shell where imagery, place, and atmosphere do more work than interface novelty.
Keep the framework premium and calm even when the brand uses bold introductory motion or color-coded navigation.

Open example

AutoSend

Home

2026-04-24

This design language combines an editorial white landing page with developer-grade controls. The core feeling is direct and technical without becoming cold: huge soft serif headlines, monospaced navigation, violet CTAs,...

Open example

Continue Exploring

Use these adjacent facet and workflow pages to connect component rules analysis with other structured design-system concerns across the site.

Hub

All DESIGN.md Examples

Return to the main DESIGN.md hub to scan the broader dataset and compare across multiple system concerns.

Related Hub

Design Topics

Branch into topic pages grouped by repeated visual signals when you want a broader inspiration lens beside this system-focused facet.

Adjacent Facet

Typography Systems

Examples where type scale, display choices, and reading hierarchy are described clearly enough to guide implementation.

Adjacent Facet

Color Systems

Collections focused on palette logic, semantic tokens, contrast handling, and accent usage.

Adjacent Facet

Layout Principles

Examples that describe spacing, grid, rhythm, hierarchy, and structural decision-making.

Workflow Collection

AI Design System Examples

DESIGN.md-style references, token-driven systems, and tools for AI-readable design workflows.

Workflow Collection

Figma AI References

References for Figma AI, Figma Make, MCP-assisted design workflows, and editable UI generation.

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.