Resources / Brand

Brand & design system

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

Browse the kit

Wordmark

Mark + name lockups

Mark paired with Surface Studio in Space Grotesk Bold. 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

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

Voice

How we sound

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

Primary

“We surface what AI says about your brand.”

Long-form

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

Punchline

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

Boilerplate

Surface Studio 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'"
}