vCareer DOCS v0.1
Join waitlist
DOCS / REFERENCE / UI & THEME TOKENS

UI & theme tokens

How vCareer looks and what builds it. Modern minimal, Linear / Vercel adjacent. Single brand accent, no aviation skeuomorphism. Same tokens drive the landing, the docs, and the authed app — so the experience feels continuous across surfaces.

~3 MIN READ

Visual direction

  • Clean and neutral. Whitespace over decoration. No glass, no chrome, no cockpit gauges.
  • Mono for numbers. Every ∀Cred / XP / ICAO / coordinate is JetBrains Mono with tabular numerals — so numbers align in lists and tables.
  • Inter for prose. One sans-serif for headings, body, UI chrome.
  • One brand accent (teal-cyan primary, saturated-green accent). Used for "active" / "good" states. Destructive uses red sparingly.
  • Sharp radii. 6–10px corner radii on cards and inputs. Nothing rounded to pills except badges.

Stack

  • Component primitives — shadcn/ui (Radix + Tailwind, copy-paste into repo).
  • Styling — Tailwind v4 in the authed app; vanilla CSS w/ tokens in the landing + docs (Astro static).
  • Icons — Lucide in the app; inline SVG in the landing.
  • Charts — none yet. When charts land, it'll be plain SVG, not a chart lib.
  • Fonts — Inter + JetBrains Mono from Google Fonts, preconnect in <head>.

Theme tokens

All colors are oklch() values. Defined once on :root[data-theme="light"] and :root[data-theme="dark"]; every UI surface references the tokens, not literal values.

Core token names:

  • --background, --foreground — page surface + body text.
  • --card, --card-foreground — elevated surfaces.
  • --primary, --accent — the two brand colors.
  • --muted-foreground — secondary text.
  • --border, --border-strong — line work.
  • --success, --warning, --destructive — status colors.

The full token list lives in apps/app/src/styles/globals.css (authed app) and is mirrored into apps/landing/src/styles/landing.css.

Theme cycle

Light → Dark → System → Light. Persisted to localStorage under vcareer:theme. Same key on landing, docs, and authed app, so a signed-in pilot's preference survives the round-trip between marketing and product.

  • System: tracks prefers-color-scheme live — toggling your OS theme flips vCareer in real time.
  • No-FOUC bootstrap: an inline <script> in <head> reads localStorage and sets data-theme before first paint, so you never see a flash of the wrong theme.

Typography

  • Inter — weights 400, 500, 600, 700. cv11 + ss01 stylistic sets enabled for slightly more humanist letterforms.
  • JetBrains Mono — weights 400, 500. zero + ss02 for the slashed zero we use everywhere a number lives.
  • Sizes — body 14–14.5px; H1 38–42px; H2 22px; H3 16–18px; mono labels 10.5–11px with letter-spacing: .08em.
  • Tabular numerals — use the tnum utility class on any column of numbers; lines them up.
← PREVIOUS
Privacy & data handling
 NEXT →
Supported ICAO types