Style Guide · v2

The Kumu visual system.

Logo, typography, color, spacing, motion, and the small rules that keep every Kumu surface unmistakably ours.

01b — Wordmarks

Transparent wordmarks.

Dark, light, and monochrome on transparency

One wordmark, three treatments.

The approved wordmark on a transparent background. Use the dark version on light grounds, the white version on dark grounds, and the monochrome versions for single-colour print.

01b — Identity

Brand and Signal lockup

The mark is Brand and Signal — the trademark attaches to the two words, never to the longer descriptor. Words are set in Nimbus Sans Bold; the ampersand is an italic editorial serif in Nordic Signal Red.

BRAND and SIGNAL

Brand and Signal

Correct

  • Hero headlines, eyebrows and section headings.
  • Logo-style display use at large sizes.
  • Full name on first reference in copy: Kumu Brand & Signal AI Findability Benchmark™.

Incorrect

  • Body copy, nav labels, buttons, form labels.
  • Page titles, meta descriptions, structured data, plain-text files.
  • Attaching the ™ to “Benchmark” when the lockup is used on its own.

02 — Voice

Typography

Display — H1 → H4

Nimbus Sans Bold

CSS variable
--font-display
Stack
"Nimbus Sans", "Archivo", Helvetica, Arial, sans-serif
Weights
700 (bold)

All headlines (h1–h4), hero typography, large editorial moments, and pull quotes. The Kumu wordmark is separate, fixed outlined artwork and is never recreated from a font.

Work we're proud of, made with brands we believe in.

Body / UI — everything else

Instrument Sans

CSS variable
--font-sans
Stack
"Instrument Sans", "Inter", system-ui, sans-serif
Weights
400 · 500 · 600 · 700

Paragraphs, navigation, buttons, captions, form labels, eyebrows, tabular numerals, and all interface text. Default body font — a contemporary grotesque with subtle character.

Kumu is an independent digital strategy, design, and technology agency helping forward-thinking brands connect better with their customers.

03 — Hierarchy

Type scale

Display XL

Hero headlines · 1 per page

The quick brown fox

Display L

Section openers

The quick brown fox

Display M

Sub-section headlines

The quick brown fox

Display S

Card titles, modals

The quick brown fox

Body L

Lead paragraphs, intros

The quick brown fox

Body M

Default paragraphs

The quick brown fox

Body S

Captions, meta, fine print

The quick brown fox

Eyebrow

Section labels above H1/H2

The quick brown fox

04 — Surface

Color tokens

Defined as oklch values in src/styles.css. Always reference via the semantic Tailwind class — never the raw hex or oklch.

Aa

Background

--background

Aa

Foreground

--foreground

Aa

Primary

--primary

Kumu Blue

Aa

Accent

--accent

Coral

Aa

Muted

--muted

Aa

Card

--card

Border

--border

Aa

Destructive

--destructive

04b — Mood

Palettes

Spectrum is the primary Kumu palette — reach for it first. Steel and Graphite are alternates for projects that need a more executive or industrial register. Each palette pairs a deep base, a structural mid-tone, a quiet ground, and a single accent — never more.

Primary · signature · Kumu Capabilities

Spectrum

The lead Kumu palette. A deep navy base carried by cobalt and sky, grounded on cloud white, with a single sun-yellow accent. Use for capabilities decks, hero moments, investor-facing work, and anywhere Kumu should feel unmistakably itself.

Pairing
Midnight on Cloud · Sun-yellow for accents only
Aa

Midnight

--spectrum-midnight

Aa

Cobalt

--spectrum-cobalt

Aa

Sky

--spectrum-sky

Aa

Cloud

--spectrum-cloud

Aa

Sun

--spectrum-sun

Spectrum · Hero

Built with weight. Designed with restraint.

Spectrum · Surface

Quiet ground, strong voice.

Use the deepest tone for type, the mid for supporting copy.

Industrial · cinematic · grounded

Graphite

A near-black foundation with gunmetal mids and a single ember accent. Built for editorial heroes, case study covers, and any moment that needs to feel weighty without going loud.

Pairing
Obsidian on Fog · Ember as the only warm note
Aa

Obsidian

--graphite-obsidian

Aa

Gunmetal

--graphite-gunmetal

Aa

Slate

--graphite-slate

Aa

Fog

--graphite-fog

Aa

Ember

--graphite-ember

Graphite · Hero

Built with weight. Designed with restraint.

Graphite · Surface

Quiet ground, strong voice.

Use the deepest tone for type, the mid for supporting copy.

Executive · classic · confident

Steel

A deep-navy spine with a steel-blue mid and a single brass accent. Reads as senior, considered, and dependable — ideal for finance, B2B, and brands selling expertise.

Pairing
Midnight on Mist · Brass and Signal red for emphasis only, never as a ground
Aa

Midnight

--steel-midnight

Aa

Navy

--steel-navy

Aa

Steel Blue

--steel-blue

Aa

Mist

--steel-mist

Aa

Brass

--steel-brass

Aa

Signal

--steel-signal

Steel · Hero

Built with weight. Designed with restraint.

Steel · Surface

Quiet ground, strong voice.

Use the deepest tone for type, the mid for supporting copy.

Bright · minimalist · Swedish

Nordic

A quiet, paper-white register: snow and paper grounds, stone as the only mid-tone, charcoal for type, and a single signal-red accent. Think Acne, Byredo, Kinfolk — restraint as luxury. Use for editorial, wellness, hospitality, and any brand that earns attention by using less.

Pairing
Charcoal on Snow · Signal red for accents only
Aa

Snow

--nordic-snow

Aa

Paper

--nordic-paper

Aa

Stone

--nordic-stone

Aa

Charcoal

--nordic-charcoal

Aa

Signal

--nordic-signal

Nordic · Hero

Built with weight. Designed with restraint.

Nordic · Surface

Quiet ground, strong voice.

Use the deepest tone for type, the mid for supporting copy.

05 — Rhythm

Spacing scale

A 4 px base unit, multiplied through Tailwind's scale. Sections breathe at py-20 md:py-32.

0.5

2px

1

4px

2

8px

4

16px

6

24px

8

32px

12

48px

16

64px

06 — Form

Radii & elevation

Radii

sm

md

lg

xl

2xl

3xl

full

Shadows

sm

md

lg

xl

2xl

07 — Atoms

Core components

Buttons

Badges & tags

NewFeaturedBrand Strategy2026Eyebrow

Form controls

Card surface

Case Study

A three-pillar platform for the energy transition.

Energy. Carbon. Climate Resilience — one product story.

Read case study

CTA Block

Ready to start? We'd love to hear about your challenge.

08 — Behaviour

Motion

Reveal

0.9s · cubic-bezier(0.2, 0.8, 0.2, 1) · y +24px

Hover lift

200ms · -translate-y-0.5 + shadow

Cinematic ease

320ms · cubic-bezier(0.22, 1, 0.36, 1)

09 — Discipline

Rules of thumb

  1. 01Headlines (h1–h4) use Nimbus Sans Bold, self-hosted via --font-display. Tight tracking (-0.02em).
  2. 02Body, navigation, buttons, and all UI use Instrument Sans via --font-sans.
  3. 03The Kumu logo is fixed outlined artwork with a red square period. Never type, redraw, embolden, or regenerate it from a font.
  4. 04Always reach for semantic color tokens (bg-primary, text-foreground). Never raw hex.
  5. 05Borders are 1px, in oklch(0.92 ...) light / 12% white dark — never thicker.
  6. 06Default radius is rounded-3xl for surfaces, rounded-full for pills/CTAs, rounded-2xl for inputs/cards.
  7. 07Motion: cubic-bezier(0.22, 1, 0.36, 1) for everything cinematic; 0.9s for reveals, 320ms for hovers.
  8. 08Page sections breathe: py-20 md:py-32 standard; never less than py-16 on mobile.
  9. 09Capitalization: sentence case for all headlines, eyebrows, stat labels and CTA button copy — only the first word and proper nouns capitalized. Title Case is reserved for (a) primary navigation items, and (b) the Method's locked terms (the Kumu Brand & Signal AI Findability Benchmark, Kumu Brand & Signal Benchmark, Brand Integrity, Signal Architecture Review, Brand Integrity Index, Signal Strength Index, Signal Gap, Evidence Standard, Transformation Roadmap) wherever they appear as a named thing rather than a description.
  10. 10Hero patterns: exactly two exist. Impression Hero (full Midnight panel — eyebrow, large headline, subcopy) on every page; Photo Hero (real project photography behind eyebrow + headline, dark scrim for legibility) on individual case study pages only. Never ship a bare hero and never invent a third pattern.
  11. 11Navigation and footer are rendered once from src/components/site/Header.tsx and Footer.tsx, both reading src/lib/nav.ts. Never hand-roll nav or footer links in a route. There is no Benchmarks page and no Client portal link — benchmarks live inside Offerings.
  12. 12Imagery is real: studio, team, and client work. No stock skylines, Earth-from-orbit renders, particle fields or network graphs. If Signal needs a metaphor, use an analog one — a beacon, a tuning dial, a compass, or the source-point glyph.
  13. 13Editorial register: Journal pull-quotes use --font-editorial on --nordic-paper with generous white space. Everywhere else stays Midnight/Cobalt precision — no serif in headlines or UI.