- type
- concept
- created
- Mon Apr 06 2026 02:00:00 GMT+0200 (Central European Summer Time)
- updated
- Mon Apr 06 2026 02:00:00 GMT+0200 (Central European Summer Time)
- sources
- raw/notes/productContext, raw/notes/systemPatterns, raw/notes/feedback_card_image_style
- tags
- design branding ui
Navy + Gold Branding
abstract
UnitCycle's design system: navy (#0F172A) + gold (#EAB308). Gold = ALL positive indicators. Red = danger only. NO semantic green. Zero hardcoded hex — everything via CSS custom properties.Rules
- 208 CSS custom properties in
theme-tokens.css - 7 preset themes — UnitCycle Light/Dark, Slate, Ocean, Emerald, Sunset, Purple
- ZERO hardcoded hex — always
rgb(var(--color-accent)),rgb(var(--color-surface)), etc. - Fonts: Manrope (headings), Inter (body)
- Gold for ALL positive — progress, success, growth, good scores
- Red for danger only — never green/teal for positive
- Property cards: Zillow-style, text below image, photo 100% clean, opaque badge pills only. NEVER dark gradient overlays.
Sources
- raw/notes/productContext — branding overview
- raw/notes/systemPatterns — CSS variable system
- raw/notes/feedback_card_image_style — card image rules
Related
- wiki/entities/unitcycle — the product
- wiki/concepts/research-before-ui — how design decisions are made