Effect
Home
Design developer-tool pages that feel credible on both the marketing and documentation sides. The dark hero should feel polished and ambitious, while the docs shell should flip into a highly usable light product without...
Open exampleComponent Rules
Browse DESIGN.md examples that make component rules explicit through buttons, navigation, cards, variants, and state definitions.
178 curated examples24 per pagePage 7 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
Design developer-tool pages that feel credible on both the marketing and documentation sides. The dark hero should feel polished and ambitious, while the docs shell should flip into a highly usable light product without... Build a system that feels clear, modu...
Recurring System Signals
- Primary ( 050505): heavy type and dark stage.
- Secondary ( BFD9F6): airy sky-blue stage.
- Tertiary ( FF5A1F): hot poster orange.
- Display: huge, black, compressed, and impossible to ignore.
- Body: short, practical, and clearly secondary.
- Labels: compact and utilitarian.
Related Keywords
OverviewImage DirectionColorsTypographyPrimary ( 050505): heavy type and dark stageSecondary ( BFD9F6): airy sky-blue stageTertiary ( FF5A1F): hot poster orangeDisplay: huge, black, compressed, and impossible to ignoreBody: short, practical, and clearly secondaryLabels: compact and utilitarianPrimary ( 07080B): the main black theater fieldSecondary ( F7F7F5): text and light-surface counterpart
2026-02-05
Notion
Home
Build a system that feels clear, modular, and confidently helpful. A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards.
Open exampleSlush
Home
Sticker Rally Pop is a loud chaptered marketing system built for youth-coded financial products. Giant condensed headlines, sticker objects, and abrupt poster-color changes create the identity, while utility controls sta...
- Primary ( 050505): heavy type and dark stage.
- Secondary ( BFD9F6): airy sky-blue stage.
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.