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 3 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

Soft Agent Workspace is a light-first system that makes advanced software feel collaborative and approachable. The first impression should be one giant italic statement over a near-white canvas, followed by a polished wh... This design language is a polished d...

Recurring System Signals

Primary ( 222222): High-intent button fill and dark utility emphasis.
Secondary ( FFFFFF): Card, button, and workspace window surface.
Tertiary ( 0072F5): Small interactive signal, link, and icon accent.
Display: Oversized, italic, tightly tracked, and highly confident.
Body: Calm, friendly, and evenly spaced.
Labels: Slightly weightier than body copy to preserve clarity on very light surfaces.

Related Keywords

OverviewImage DirectionColorsTypographyDisplay: Oversized, italic, tightly tracked, and highly confidentBody: Calm, friendly, and evenly spacedLayoutKeep imagery diagrammatic and instructional rather than aspirationalKeep body copy calm and evenly spacedPrimary is charcoal and powers the main CTASecondary is a pale neutral support surfaceUse one plain grotesk throughout

LobeHub

Home

2026-01-23

Primary ( 222222): High-intent button fill and dark utility emphasis.
Secondary ( FFFFFF): Card, button, and workspace window surface.

Open example

Featurebase

Home

2026-02-20

This design language is a polished dark SaaS stage for support, feedback, and product communication. It relies on large centered Inter headlines, black-purple atmosphere, clear CTA contrast, and real product panels direc...

Open example

Bud - Your AI Worker

Home

2026-04-23

This design language is a quiet workspace for delegating tasks to an AI assistant. The screen should feel spacious, personal, and utilitarian: a mostly white canvas, a slim persistent tool rail, one centered work object,...

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.