natuleadan Design Foundations
Foundational design decisions: color, tokens, and the register (brand vs product) that determines how design rules apply. Use this before making any color or theming choice.
References
| Topic | File |
|---|---|
| Color strategies: Restrained, Committed, Full palette, Drenched | references/color-strategies.md |
| Design token hierarchy: Brand → Semantic → Component | references/token-hierarchy.md |
| Brand vs Product register differences, slop tests, shared laws | references/brand-product-register.md |
Core Rules
- Scene Sentence: Write one sentence of physical context (who, where, ambient light, mood) to decide dark vs light. If the sentence doesn't force the answer, it's not concrete enough.
- Color strategy: Pick from Restrained (≤10% accent), Committed (30-60% saturated), Full palette (3-4 roles), Drenched (surface IS the color).
- OKLCH: Use OKLCH, reduce chroma at lightness extremes, never
#000or#fff, tint neutrals toward brand hue (chroma 0.005-0.01). - Absolute bans: No gradient text, side-stripe borders, glassmorphism as default, hero-metric template, identical card grids, modal as first thought, nested cards.
- Slop test (two altitudes): First-order — would someone guess theme from category alone? Second-order — would someone guess aesthetic from category-plus-anti-references? If yes, rework.
When to Use
- Choosing color scheme for a new project
- Defining design tokens and CSS variables
- Deciding dark vs light mode
- Designing marketing/brand surfaces vs product UI
- Reviewing UI for "AI-generated" look