HiFi brand kit
Design tokens, components, and usage guidance for the HiFi product surface. Built on Midnight + Lagoon, themable for light and dark mode. Use the toggle in the header to see every component flip.
Logo
On light surface
On dark surface
On accent surface
Mark only
- Minimum icon size: 24px. Favicon: 32px. Lockup minimum: 28px height.
- Clear space: at least 1× icon height on all sides.
- Don't recolor the mark. Don't outline it. Don't apply effects.
- Don't place the lockup on patterned imagery without a contrast scrim.
Color · Midnight
Primary brand scale. Midnight 400 is the brand body color; 700 is the deepest stop used in gradients and dark hero surfaces.
midnight 50
#eef0f4
midnight 100
#d2d6e0
midnight 200
#a6afc2
midnight 300
#7a89a4
midnight 400
#1E2438
Primary
midnight 500
#181c2d
midnight 600
#131724
midnight 700
#0F1426
Deep
midnight 800
#0a0e1a
midnight 900
#050710
Color · Lagoon
Accent scale. Lagoon 400 is the brand accent (buttons, badges, highlights). Lagoon 900 is the dark text used on top of Lagoon 400 surfaces — pairs cleanly at ~6:1 contrast.
lagoon 50
#e8f4f2
lagoon 100
#c5e5e0
lagoon 200
#92cdc5
lagoon 300
#65b7ac
lagoon 400
#3CA89E
Accent
lagoon 500
#2d8e84
lagoon 600
#1f6b62
lagoon 700
#144a44
lagoon 800
#0c2f2c
lagoon 900
#061814
Accent text
Color · Semantic neutrals
Themable tokens that flip between light and dark mode via CSS variables. Always prefer these over hardcoded greys.
snow (page bg)
var(--page) · light #FFFFFF · dark #0A0E1A
paper (cards)
var(--paper) · light #FFFFFF · dark #131724
mist (subtle wash)
var(--muted) · light #F1F2F5 · dark #1A2034
line (borders)
var(--line) · light #DDE0E8 · dark #2A3045
ink (primary text)
var(--ink) · light #0A0F1C · dark #F1F2F5
stone (muted text)
var(--stone) · light #525868 · dark #8A92A3
fog (faint text)
var(--fog) · light #8A92A3 · dark #5A6477
Color · Status
success
#3F8E5A
warning
#D97706
error
#DC2626
info
#2563EB
Gradients
midnight-gradient
linear-gradient(135deg, #0F1426 → #1E2438 → #2F3852)
Hero, login background, dark surfaces.
lagoon-glow
radial-gradient(60% 60% at 50% 0%, rgba(60,168,158,0.4), transparent)
Soft accent halo over dark surfaces.
Typography
Family: Inter with system-font fallbacks. Brand pattern: bold/light weight contrast (700 paired with 300 in the wordmark and headings).
- Display700 · 48px · letter-spacing -0.025em
- H1700 · 36px · letter-spacing -0.02em
- H2600 · 28px · letter-spacing -0.015em
- H3600 · 22px · letter-spacing -0.01em
- H4600 · 18px · letter-spacing 0em
- H5500 · 16px · letter-spacing 0.01em
- H6500 · 14px · letter-spacing 0.05em (uppercase)
- Body400 · 16px · letter-spacing 0em
- Caption400 · 13px · letter-spacing 0.01em
- Small400 · 12px · letter-spacing 0.015em
Spacing
4px base unit. Use Tailwind tokens space-1 through space-24.
- 4px
- 8px
- 12px
- 16px
- 20px
- 24px
- 32px
- 40px
- 48px
- 64px
- 80px
- 96px
Radius
sm
6px
Tags, badges
md
8px
Inputs, search bars
lg
12px
Cards, panels
xl
16px
Featured cards
pill
9999px
Buttons, badges
Pills + badges
Cards
Default card
$310,390
Net worth · Apr 2026
Chat preview
Inputs
Voice + tone
- Calm, not vigilant. HiFi makes future expenses feel handled. Avoid scarcity language ("only," "just," "warning"). Prefer "ready," "covered," "on pace."
- Plain, not coached. Say what happened in normal English. "Logged $30 to Shopping" — not "Successfully recorded transaction." No exclamation marks.
- Confident, not lecture-y. The user already won the basic-budgeting game. No tips about lattes. Treat them as the expert.
- Specific over generic. "Travel SF is 32% to goal" beats "Sinking fund is on track."
Iconography
lucide-react is the icon set. Use 14px (h-3.5 w-3.5) inline with text, 16px (h-4 w-4) for buttons, and 20px (h-5 w-5) for feature blocks. Stroke width stays at the lucide default.