The hard rules
No colored borders
No amber or brand-colored outlines anywhere, ever. Carry emphasis with background tint, weight, or amber fill and text. Only neutral hairlines separate cards.
Sofia Pro only
One typeface across everything. Hierarchy comes from weight (Black for the hero, Bold for labels), never a second font.
No em dashes
Never in copy. Use a comma, a colon, a period, or parentheses. This keeps the voice human, not machine.
Palette
Hairline separator: rgba(7,10,97,.10) (low-opacity indigo). The only kind of border allowed.
Typeface: Sofia Pro
One family, no exceptions. Display impact comes from Black (900), not from a second typeface.
Wordmark
Sofia Black, letter-spaced. The dot and the period are always amber. Never add an outline or a drop shadow.
Components
Stat card
Founding progress
Ranked list with amber pill
Weekly sparkline
Buttons
Language switcher
Confide callout
Do and don't
Do
- Separate cards with neutral hairlines.
- Make one number the hero per block.
- Use one amber accent per view.
- Let labels wrap; design to the longest line.
Don't
- Add an amber or colored border or accent rule.
- Introduce a second typeface.
- Use an em dash in copy.
- Machine-translate the food data; only the chrome is localized.