Typography
Spec format: family · size / line-height · weight · tracking · Stack: DM Sans (display), Inter (body), IBM Plex Mono (code).
Good morning, Vivian
Hero / greeting
DM Sans · 36 / 42 · 500 · -0.01em
Empty-state greeting, large welcome surfaces
Refined Ask thread
Display
DM Sans · 22 / 28 · 600 · -0.01em
Page title, hero
Building blocks
Section heading
DM Sans · 14 / 20 · 600 · -0.005em
Card / section header
Quick answer
In-message heading
Inter · 13 / 18 · 500 · 0
Sub-section in AI response
Run VPN Setup playbook
Action / button
Inter · 13 · 500 · 0
Buttons, choices, chips
Workspace
Eyebrow / label
Inter · 11 · 600 · 0.06em · upper
Section labels, list groups
AI
⌘K
Micro / badge
Inter · 10 · 700 · 0.04em (badge)
IBM Plex Mono · 10 · 400 · 0 (kbd)
AI badges, kbd hints — never below 10px
vpn.stlabs.com
Inline code
IBM Plex Mono · 12 · 400 · 0
Hostnames, code, env vars
Body type
Body lg · Inter · 14.5 / 23 · 400 · 0
Most tickets deflect before a human sees them — and the ones that don't arrive with context. The assistant gathers prior activity, surfaces the right runbook, and lets the responder stay in flow.
Body · Inter · 14 / 21 · 400 · 0
Standard body text used for paragraphs, descriptions, and UI microcopy. Stays at 14px across the product surface — never smaller than 11px anywhere, and never bigger than 14.5px outside of headings.
Caption · Inter · 12 / 17 · 400 · 0
Supporting copy beneath a section title, list-item meta, or composer footer. Quieter, but still legible at 12px on retina and standard displays.
Navigation & list patterns
Section / group label · Inter · 11 · 600 · 0.06em · upper · --text-faint
Workspace
Today
Library
Nav item · Inter · 13 · 400 · 0 · --text-soft default → --brand-text active · 16px icon @ 1.8
List item · title Inter · 13 · 500 · 0 · meta Inter · 12 · 400 · 0 · active state gets --brand left-border
Connect to company VPN
Resolved2m
Reset Okta MFA token
Open22m
Icons
Lucide-style line icons · stroke scales with size so the visual density stays roughly even.
16 px · 1.8 stroke
Default — nav, thread actions, content blocks. Most icons in the app land here.
14 px · 2 stroke
Compact UI — search, plus, send arrow, list-meta dots.
11 px · 2 stroke
Inline within chips, choices, or composer scope toggles.
10 px · 3 stroke (filled)
Decorative confirmations inside status pills, checklists, tool-call indicators.
Color
All tokens map to CSS variables at the top of the file — easy to retheme.
Brand
--brand
#DC5A1C
Primary CTA, brand mark, focus ring
--brand-hover
#B84817
Primary hover · accent text
--brand-soft
rgba(220,90,28,.06–.10)
Active nav, badges, step numbers
--brand-border
rgba(220,90,28,.20)
Borders on tinted accent surfaces
Surface
--bg
#fefefe
Card / panel background
--surface
#f4f5f7
Page bg, user bubble, tabs, demo wells
--surface-2
#eeeff1
Inline code, icon chips on white
--hover
rgba(26,26,31,.05)
Hover / active over any base
Text & border
--text
#2c2f36
Primary — body, headings, active states
--text-muted
#5a5a63
Secondary — descriptions, body meta
--text-soft
#7a7f87
Tertiary — inactive nav, list-item meta
--text-faint
#9a9aa3
Eyebrows, captions, placeholders
--border
rgba(26,26,31,.10)
Dividers, card borders
Semantic
--info
#2f6fed
Information, secondary KB tag
--success
#1c8a5a
Resolved, completed states
--warn
#f59e0b
Open / pending states
--danger
#b93737
Errors, escalated, destructive