Brand kit
The design language: what things look like and why. Everything here uses the real styles from the app.
The idea
- Dark, calm, one accent. Near-black surfaces, soft grey lines, and lime only where action is.
- One typeface for the product. Geist for everything people read and click. Space Grotesk, bold and in capitals, only for big headlines. Monospace only for keyboard keys and commands to copy.
- Plain words. Short sentences, say what happens (“Save”, “Send”, “Open RADAR”), no jargon, no hype, no exclamation marks in the product.
- Motion that helps. Small rises and fades (under half a second) that show where things came from. Nothing loops or bounces.
Logo
RADAR: the finder. Used big on Find, once per page.
cutradar
The company mark: nav, footer, emails, app icon. Two radar rings make the C; the blips are lime, the rings follow the text colour. Name in lowercase.
Colour
- Night
--bgPage background - Panel
--surfaceCards, panels, the sidebar - Raised
--surface-3Hover, pressed toggles, avatars - Line
--borderCard and panel edges - Ink
--textHeadings and body text - Ink 2
--text-2Secondary text - Muted
--mutedHints, meta, small print - Lime
--accentThe one accent: primary buttons, scores, “next step”. Use it sparingly. - Amber
--warnWarnings, “Inactive”, payment failed - Coral
--dangerErrors only
The light theme swaps each token for its light version; the names and uses stay the same.
Type
Land your next client
Display · Space Grotesk 700, capitals, tight spacing. Landing and big titles only.
Page title
Heading · Geist 650, tight letter-spacing.
Body text is Geist at 15–16px. It’s what people read most, so it stays plain and roomy.
Small print and hints · Geist, muted colour.
1,800 · 23.4M subscribers · 95
Numbers · Geist with even-width digits, so columns line up.
Buttons
One primary (lime) button per area: the thing to do next. Everything else is default or ghost.
Tags
Toasts
Short, past tense, with Undo when it can be undone.