Color Usage
The 80/15/5 rule: 80% neutral, 15% primary blue, 5% gold accent. This ratio keeps the interface clean while maintaining spiritual identity.
The Rule
- Neutral (80%) — backgrounds, borders, text. This is the canvas.
- Primary Blue (15%) — buttons, links, active states, focus rings. Guides the user.
- Gold (5%) — brand accent only. Logo, special highlights, occasional badge. Never for CTAs.
Primary Blue
Use primary blue for interactive elements: buttons, links, active nav items.
Este texto nao deveria ser azul
Don't use blue for static informational text or decorative elements.
Gold Accent
Use gold sparingly for brand identity — logo, special highlights, rare accents.
Don't use gold as the primary CTA color or for frequent UI elements.
Semantic Colors
Semantic colors (success, error, warning, info) are reserved for feedback states. Never use them decoratively.
Use semantic colors to communicate status.
Don't use red/green for branding or decoration — reserve for UX feedback.
Backgrounds
Keep backgrounds light and neutral:
#FFFFFF— content areas, cards#F7F8FA— page background, sections#EEF1F5— subtle dividers, skeleton loading
Avoid dark backgrounds. The design system is built for light mode. Dark backgrounds break the 80% neutral rule and the overall visual identity.