PVO Design System
The visual language of Professional Vietnamese Overseas. All tokens map directly to Tailwind utility classes — use bg-pvo-*, text-pvo-*, and border-pvo-* throughout the codebase. JS equivalents live in src/constants/theme.ts.
Colours
Every colour is a CSS custom property in globals.css @theme inline and a Tailwind utility class.
Split swatches carry both schemes — light on the left, dark on the right (#1145). Light is the reference: those values have not changed. A solid swatch is one colour in both.
Core Palette
App Background
#F8FAFC · #0B1320
bg-pvo-bg
Card / Surface
#FFFFFF · #162233
bg-pvo-surface
Oxford Navy
#1E3A8A · #3B5BDB
bg-pvo-primary
Navy Hover
#172D6B · #4E6CE8
bg-pvo-primary-hover
Accent Magenta
#BE185D · #CE2168
bg-pvo-accent
Magenta Hover
#9D174D · #D6246E
bg-pvo-accent-hover
Body Text
#0F172A · #E6EBF2
bg-pvo-text
Muted Text
#64748B · #A0ADC0
bg-pvo-muted
Border
#E2E8F0 · #25334A
bg-pvo-border
Placeholder / Ghost
#94A3B8 · #7A889E
bg-pvo-slate
Brand colours as TEXT
Navy as TEXT
#1E3A8A · #93AAF5
text-pvo-primary
Navy text hover
#172D6B · #B3C4F8
hover:text-pvo-primary-hover
Magenta as TEXT
#BE185D · #F492BE
text-pvo-accent
Magenta text hover
#9D174D · #F9B6D4
hover:text-pvo-accent-hover
Nothing to write: text-pvo-primary and text-pvo-accent already resolve to these. They exist because white text needs a deep fill and a link needs a light one, and in dark those are not the same colour.
Semantic / Extended
Growth Emerald
#00AA55 · #22C55E
bg-pvo-success
Emerald Hover
#009948 · #34D677
bg-pvo-success-hover
Warning Amber
#F59E0B · #FBBF24
bg-pvo-warning
Error Red
#EF4444 · #F87171
bg-pvo-error
Terracotta
#D46A4D · #E8907A
bg-pvo-terracotta
Indigo Tint
#EEF2FF · #1D2C51
bg-pvo-indigo-tint
Accent Tint
#FDF2F8 · #37223D
bg-pvo-accent-tint
Hairline Grid
#F1F5F9 · #111C2E
bg-pvo-grid
Inverted Panel
#0F172A · #1B2839
bg-pvo-ink
Body Prose
#455568 · #C7D1E0
text-pvo-prose
Switch Track
#CAD5E2 · #3A4A63
bg-pvo-track
Error Text
#E72D0B · #FCA5A5
text-pvo-error-strong
Error Fill
#FEF2F2 · #3B1D22
bg-pvo-error-tint
Error Border
#FFC9C9 · #5A2A30
border-pvo-error-edge
Admin / Dark Theme
Deep Space Navy
#0B1320
bg-pvo-admin-bg
Slate Obsidian
#162233
bg-pvo-admin-surface
Admin Input
#0D1B2A
bg-pvo-admin-input
Admin tokens are only used within /manage/** routes.
Typography
Three typefaces: Inter (sans), Space Grotesk (mono), Instrument Serif (serif).
Display — font-serif text-5xl
Elevate your circle.
Heading 1 — font-serif text-3xl
Your global network for every step of your journey.
Heading 2 — font-serif text-xl
For every step of your journey
Body — text-sm text-pvo-muted leading-relaxed
Share experiences, challenges, and insights across work, study, and life to help others grow.
Mono label — font-mono text-xs tracking-widest uppercase
Invite Only Network
Components
Reusable UI primitives built on design tokens.
Badges
Buttons
Avatar Rings
Spacing
8px base unit — all spacing should be multiples of this.
Motion
Three timing categories — keep animations purposeful and brief.
Page entry animations may use opacity: 0 and animationFillMode: 'forwards' inline styles — these are intentional and exempt from the no-inline-styles rule.