a mature, editorial palette built for a hiring consultancy. reuse these tokens, components, and spacing rules on every new page — no one-off colors, no rogue fonts.
semantic tokens defined in src/styles.css. use the tailwind class, never a hex.
var(--ink)
bg-ink · text-ink
primary text · headers · dark surfaces
var(--cream)
bg-cream · text-cream
page background · cards
var(--electric)
bg-electric · text-electric
primary action · links · focus
var(--highlight)
bg-highlight · text-highlight
brass accent · marks · chips
var(--lime)
bg-lime · text-lime
sage · success · soft surfaces
var(--coral)
bg-coral · text-coral
terracotta · warm accent · alerts
Fraunces (display, serif) pairs with Inter Tight (body). JetBrains Mono for meta + chips.
display · font-display
Aa
Fraunces — editorial serif
weights 400 / 600 / 800 / 900 · use for h1-h3, statements
body · font-sans
Aa
Inter Tight — UI & body
weights 400 / 500 / 700 · paragraphs, forms, nav
h1 · the headline that sells.
h2 · supporting section title
h3 · card heading
body — quiet workhorse copy for paragraphs, descriptions, and form helpers.
meta · mono uppercase · 11px
three intents: primary (ink), accent (electric), and ghost (outlined). always rounded-full, font-display, bold.
card-pop is the signature surface: ivory card, 1px ink border, 4px offset shadow.
default
use for content cards, forms, and floating UI like the chat hero.
tinted
override background for CTAs and feature highlights.
stat
92%
offer accept rate
4px base unit. stick to the scale below — don't invent new gaps.
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
2xl
64px
section — py-20 sm:py-28 · px-4 sm:px-6
container — mx-auto max-w-6xl
card — p-5 / p-6 / p-8 (compact / default / spacious)
stack — gap-3 (tight) · gap-5 (default) · gap-10 (loose)
three link patterns: inline underline, ghost nav, and accent CTA.
this is an inline link inside a sentence — used in body copy and footer.
accent link with arrow — for cross-section navigation.
ghost nav link — used in the top navigation pills.
rounded-xl, 2px ink/15 border, cream background. focus border turns electric.
bullet pattern — paired with check chip