Mentra
Design System Style Guide
Brand colors, typography, components, and spacing tokens for the Mentra AI career confidence platform. Light mode only.
Logo
Two approved full icon+wordmark image assets (public/brand/mentra-logo.png and mentra-logo-dark.png), swapped by the `background` prop for legibility on light and dark surfaces.
Warm Ivory
Midnight Navy
Colors
Core brand palette. Champagne Gold is reserved for premium features and milestones — never Free tier UI.
Midnight Navy
#0F172A
Confidence Blue
#3B82F6
Forest Green
#166534
Champagne Gold
#C9A227
Warm Ivory
#FAF7F0
Typography
Inter, with a heavier weight on headings than body text.
H1 / 48px / Bold
Building career confidence, one step at a time.
H2 / 36px / Bold
Building career confidence, one step at a time.
H3 / 30px / Semibold
Building career confidence, one step at a time.
H4 / 24px / Semibold
Building career confidence, one step at a time.
H5 / 20px / Semibold
Building career confidence, one step at a time.
H6 / 18px / Semibold
Building career confidence, one step at a time.
Body / 16px / Regular
Building career confidence, one step at a time.
Small / Caption / 14px / Regular
Building career confidence, one step at a time.
Buttons
shadcn/ui Button, restyled with Confidence Blue as the primary color.
Icons
lucide-react, consistent size and stroke weight.
Sparkles
Target
TrendingUp
MessageCircle
Calendar
Award
Compass
BarChart3
CheckCircle2
Mic
Spacing
Base spacing scale used for padding, gaps, and margins.
xs
0.5rem / 8px
sm
0.75rem / 12px
md
1rem / 16px
lg
1.5rem / 24px
xl
2rem / 32px
2xl
3rem / 48px
3xl
4rem / 64px
Radius
Corner radius scale, derived from a single --radius token.
sm
radius-sm
md
radius-md
lg
radius-lg
xl
radius-xl
Shadows
Subtle elevation for cards vs. stronger elevation for modals and dropdowns.
Card
shadow-card
Elevated
shadow-elevated