Notion
Home
--- version: "alpha" name: "Midnight Assistant Canvas" description: "A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards." colors: pri...
Open exampleComponent Rules
Browse DESIGN.md examples that make component rules explicit through buttons, navigation, cards, variants, and state definitions.
151 curated examples24 per pagePage 6 of 7
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: "Midnight Assistant Canvas" description: "A productivity marketing system that pairs a deep midnight hero with bright product canvases, periwinkle actions, and white modular cards." colors: pri... --- version: alpha name: Sticker Ral...
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-04-30
Slush
Home
--- version: alpha name: Sticker Rally Pop description: Kinetic poster-led consumer-finance system with giant condensed display type, sticker objects, and high-contrast chaptered color stages. colors: primary: " 050505"...
- Primary ( 050505): heavy type and dark stage.
- Secondary ( BFD9F6): airy sky-blue stage.
GTE
Home
--- version: alpha name: Speculative Market Ledger description: High-stakes trading-platform system with black theater stages, serif headlines, orange signal controls, and technical diagram chapters. colors: primary: " 0...
- Primary ( 07080B): the main black theater field.
- Secondary ( F7F7F5): text and light-surface counterpart.
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.