Resources / Brand

Brand & design system

Everything you need to mention or co-brand with Surfaceable — logo, color, type, voice, and tokens. Download the kit as a single zip.

Browse the kit

Wordmark

Mark + name lockups

Mark paired with Surfaceable in Space Grotesk Bold — name in foreground, .ai in accent. Horizontal by default; stacked for square placements.

Horizontal — Dark

horizontal layout, dark treatment

Horizontal — Light

horizontal layout, light treatment

Horizontal — Mono

horizontal layout, mono treatment

Stacked — Dark

stacked layout, dark treatment

Stacked — Light

stacked layout, light treatment

Stacked — Mono

stacked layout, mono treatment

Color

Color system

Duochromatic — blue and yellow accents over near-black neutrals. Click any swatch to copy its hex.

Brand accents

Primary

--primary

Brand blue. Default accent. Used for CTAs, focus states, primary data emphasis.

Primary Light

--primary-light

Hover state and gradient terminus for primary accent.

Secondary

--secondary

Brand yellow. Used in `.theme-secondary` sections.

Secondary Light

--secondary-light

Hover state and gradient terminus for secondary accent.

Live preview · theme-primary

Primary buttonOutline buttonGradient text

Neutrals

Background

--background

Page background. Near-black, never pure black.

Foreground

--foreground

Primary text. Off-white for reduced glare.

Surface

--surface

Card background, slightly elevated from `--background`.

Surface Light

--surface-light

Higher elevation surfaces, hover states for cards.

Muted

--muted

Secondary text, captions, mono labels.

Typography

Three voices

A geometric display face for headlines, a humanist sans for body, and a precise mono for labels and small caps. All three ship via next/font/google and fall back to system fonts.

font-display

Space Grotesk

Section headlines, hero, large display copy.

Google ↗

Aa Bb 01

400Regular500Medium600Semibold700Bold
CSS --font-displayTailwind font-display

font-sans (default body)

Plus Jakarta Sans

Body copy, UI, paragraph text.

Google ↗

Aa Bb 01

400Regular500Medium600Semibold700Bold
CSS --font-jakartaTailwind font-sans (default body)

font-mono

DM Mono

Section eyebrows, labels, small caps, code.

Google ↗

Aa Bb 01

400Regular500Medium
CSS --font-monoTailwind font-mono

Type scale

Tailwind defaults · shared across all fonts

Surfaceabletext-xs · 12px
Surfaceabletext-sm · 14px
Surfaceabletext-base · 16px
Surfaceabletext-lg · 18px
Surfaceabletext-xl · 20px
Surfaceabletext-2xl · 24px
Surfaceabletext-3xl · 30px
Surfaceabletext-4xl · 36px
Surfaceabletext-5xl · 48px
Surfaceabletext-6xl · 60px
Surfaceabletext-7xl · 72px
Surfaceabletext-8xl · 96px

Voice

How we sound

Direct, technical, executive-grade. Lead with evidence.

Primary

“Make your brand surfaceable to AI.”

Long-form

“AI visibility audits across ChatGPT, Claude, and Gemini. Built for market leaders.”

Punchline

“Search just changed. Your strategy hasn't.”

Boilerplate

Surfaceable runs AI visibility audits for market leaders. We test how every major AI assistant — ChatGPT, Claude, Gemini — talks about your brand across realistic multi-turn buyer conversations, then map the exact moments your story stops being told.

Tokens

Design tokens

JSON, CSS, or Tailwind v4 @theme — pick the format your toolchain reads.

tokens.jsonjson

Flat key/value of every CSS variable. Drop into Style Dictionary, Figma Tokens, or your own design-token pipeline.

{
  "--primary": "#60a5fa",
  "--primary-light": "#93c5fd",
  "--secondary": "#fde047",
  "--secondary-light": "#fef08a",
  "--background": "#0a0a0a",
  "--foreground": "#ededed",
  "--surface": "#141414",
  "--surface-light": "#1e1e1e",
  "--muted": "#a1a1aa",
  "--font-display": "'Space Grotesk'",
  "--font-jakarta": "'Plus Jakarta Sans'",
  "--font-mono": "'DM Mono'"
}