Feature cards — soft mode: cream, radius 24, cobalt icon
✦
Fin AI Agent
Resolves conversations instantly, in any language.
◉
Help Desk
One inbox for your whole team.
◈
AI Insights
See what customers really need.
Buttons — every variant · default / hover / disabled (buttons stay black, never blue; radius 6, h40–42, padding 12×16)
Input · default / focus (focus = cobalt border) · chips & badges
Resolved by Fin
Help Center source
Beta
New
Typography — one even light weight (400) across the whole scale; size & negative tracking do the work
Hero h1Designed for AI
80/80 · 400 · -2.4pxbrand grotesque (ui-sans-serif fallback)
Display h2A complete solution
54 · 400 · -1.6pxdisplay headline
Subhead h3AI-powered agent workflows
24 · 400 · -0.48pxsection subhead
BodyBody text at 16px / 24, weight 400, tracking 0.
16/24 · 400 · 0paragraph copy
UI / buttonNav links, button labels — 16 / 400
16 · 400 · 0interface text
CaptionCaption & meta text at 14 / 400
14 · 400 · 0captions, labels
Palette — every §2 token, grouped · warm neutrals + one loud cobalt (orange sparingly)
Text
ink#111111
text-mutedrgba(17,17,17,.6)
Surfaces + borders
sand#d3cec6
cream-100#f1eee9
cream-50#faf9f6
white#ffffff
borderrgba(17,17,17,.1)
Accent + semantic
cobalt#0007cb
orange#ff5600
black#000000
Depth & motion — flat editorial elevation; the Messenger is the one thing that floats
Radius scale (§6): controls 4–6 · editorial blocks 0 · bubbles 18–20 · soft cards 24 · avatars full
0 · editorial
4 · ctrl
6 · button
18 · bubble
20 · msgr
24 · soft card
full · avatar
Shadow / elevation recipes (§6, §8): only the floating Messenger carries a drop shadow — sections & cards stay flat
flat · no shadow
1px hairline only
Messenger float
0 20px 50px rgba(0,0,0,.18)
Motion (§7): links hover with a growing underline via background-size 0.2s ease-out; micro-transitions 150–400ms ease, restrained — Messenger bubbles sequence in to mimic live chat, almost nothing animates at rest.