Campfire brand kit

The Campfire brand kit

Everything a machine — or a human — needs to build on-brand: logos, colors, fonts, backgrounds, illustration, motion, and voice.

This page is the single source of truth scraped by arcade.software to auto-generate product walkthroughs. Every value below is real, rendered HTML — no screenshots, no PDF. The declared brand background is #1C1334.

Download tokens Brand kit JSON

Logos

One mark, three lockups

Pick the variant by scene background. Light surfaces get the primary dark mark; dark surfaces get the reversed white mark. The full-color lockup keeps the flame orange #F59E2C.

primary dark mark

Default. Place on #FFFFFF or #F8F5FC.

Use on light surfaces (#FFFFFF, #F8F5FC) · SVG

Download

reversed

Place on #1C1334 or #262F56. Use for all dark video scenes.

Use on dark surfaces (#1C1334, #262F56) · PNG

Download

full color

Full-colour lockup incl. flame orange #F59E2C.

Use on light surfaces (#FFFFFF, #F8F5FC) · PNG

Download

Clearspace & minimum size

· Minimum clearspace on all sides = height of the flame mark.
· Minimum width 120px digital / 1in print.

Never

✕ Do not recolor the mark
✕ Do not add shadow, glow, or outline
✕ Do not place over busy photography or the topo pattern without a solid scrim
✕ Do not stretch, rotate, or rebuild the lockup

Colors

The video palette

Tight and roled. #1C1334 is the default scene background; #F8F5FC is the light alternate. Each swatch carries its role so color and type stay paired.

Campfire Purple

#6E3FCC

--c-purple-600

Primary brand, interactive, headline emphasis

Purple Press

#5B34AB

--c-purple-700

Hover and pressed states

Lavender

#9D88ED

--c-purple-300

Headline highlight fragment on dark

Hot Pink

#E055CB

--c-pink-400

Loud CTA only — one per scene

Pink Accent

#EE80DD

--c-pink-300

Accent ribbon, gradient stop

Midnight

#1C1334

--c-indigo-1100

Primary dark background — default video scene background

Deep Navy

#262F56

--c-indigo-900

Footer, secondary dark surface

Body Navy

#1E2A4A

--c-indigo-700

Headlines on light backgrounds

Lavender Mist

#F8F5FC

--c-purple-050

Primary light background

Card Gray

#F7F6F7

--c-card

Card surface

Slate

#636B7C

--c-gray-500

Body copy on light

Warm Sand

#FFC28A

--c-warm-300

Warm sub-headline accent on dark

White

#FFFFFF

—

Page background; all text on dark

Color × type pairings

Real work, real change

A warm sub-headline

Body copy sits at rgba(255,255,255,0.8) on #1C1334.

#1C1334 · League Spartan

Real work, real change

Body copy sits at #636B7C on #FFFFFF.

#FFFFFF · League Spartan

Real work, real change

Body copy sits at #636B7C on #F8F5FC.

#F8F5FC · League Spartan

Gradients

Purple → Periwinkle

linear-gradient(to right, #6A3DC5, #896DF0)

Hot Pink

linear-gradient(to right, #EE80DD, #DD66E5)

Cool Pink

linear-gradient(to right, #BE53EA, #A04CE9)

Not for video — decks & charts only

The Matchbox extended palette (Ladybug, Carrot, Canary, Meadow, River, Rose, Dusk, and the earth tones Moss/Doe/Camel/Clay/Elk) exists for decks and charts ONLY. Never pull it into video or marketing surfaces. The coaching-tools rose palette (#BF4C74 family) belongs to tools.getcampfire.com, not to brand video.

Type

League Spartan, everywhere

League Spartan → headlines + body + buttons. Loaded from Google Fonts, weights 300–900.

Spartan MB → the licensed production cut of the same design, self-hosted (100–900).

DM Serif Display → occasional editorial accent only. Never body or UI.

Hero · 72 / 700 / -0.02em · League Spartan

Built to fit the rhythm of real work

H1 · 40 / 700

Leadership that fits

H2 · 32 / 700

Designed for modern teams

H3 · 24 / 700

Every session ends with action

Body · 18 / 400

Leaders communicate more clearly, coach more consistently, and turn ideas into action — inside the flow of real work.

Button · 14 / 600 / 0.08em

Explore solutions

Eyebrow · 12 / 700 / 0.18em

Results you can trust

Aa Gg

League Spartan

Google Fonts · 300–900

Aa Gg

Spartan MB

Self-hosted · 100–900

Aa Gg

DM Serif Display

Google Fonts · accent only

Backgrounds

The topographic pattern is the brand

Hand-drawn, low-opacity contour lines — white over purple/navy — layered on a gradient. Any dark or saturated surface gets a topo overlay. White lines on dark, dark lines on light. No full-bleed photographic section backgrounds.

Campfire background — Signature topographic texture over purple — hero and CTA surfaces — `purple-topo.webp`
Signature topographic texture over purple — hero and CTA surfaces

Campfire background — Tall crop of the same, for full-height scenes — `purple-topo-tall.webp`
Tall crop of the same, for full-height scenes

Campfire background — Pink variant — use sparingly — `pink-topo-bg.webp`
Pink variant — use sparingly

Campfire background — Transparent topo overlay — layer over any dark or saturated fill — `clear-topo.webp`
Transparent topo overlay — layer over any dark or saturated fill

Campfire background — Marketing hero background — `hero-bg.webp`
Marketing hero background

Illustration

Hand-drawn hero illustrations

Single hand-drawn object. Warm earthy brown outline (~#876F4D), one or two flat fills in purple, pink, or warm yellow. Loose and sketched — deliberately not geometric. 80px in cards.

Campfire hero illustration — kite — kite

Campfire hero illustration — phoenix — phoenix

Campfire hero illustration — plant — plant

Campfire hero illustration — carry-load — carry-load

Campfire hero illustration — binoculars — binoculars

Campfire hero illustration — bike — bike

For Arcade — a fixed set

FIXED SET. Do not generate new illustrations in this style. Use only these files; if none fits, use a Material Symbol or nothing.

Icons

Material Symbols for utility

Google Material Symbols, Filled / Rounded. 24px default, 36px as a card accent. Filled and rounded. No emoji, ever.

groups

forum

timer

event

check_circle

lightbulb

trending_up

flag

bolt

rocket_launch

local_florist

fitness_center

As shipped (36px webp, gray-700):

Photography

Warm, natural, real people

Warm-lit, natural, real people, often outdoor. Never cool/blue/clinical, never black-and-white, no saturated brand-colour overlays. Slight grain acceptable.

✓ On brand

Real Campfire event — speaker on stage in warm venue light — ✓ On brand

✕ Never — black & white

Motion & shape

Flat, calm, conservative

Radii

Button
8px

Small card
12px

Large card
16px

XL card
24px

Pill / avatar
999px

Flat system

flat — 1px #F3F4F6 border, no shadow. Shadow only on floating overlays.

Transitions

160ms ease. Fade-in = 0.5s ease-out, 8px translateY. Ambient: topo layers drift 12–20s infinite ease-in-out.

Banned motion

No bounce, no spring, no parallax, no scale on press, no shadow elevation on hover.

Voice & tone

Direct, warm, plain-spoken

Campfire sells leadership development that fits inside real work — “Build Better Leaders — Your Way.” Confident, warm, plain-spoken. Direct not loud. Confident not boastful — numbers do the bragging. Human not corporate.

Second person for the reader ('your teams', 'your reality'). First-person plural for Campfire ('we handle the logistics'). Never 'I'. Avoid 'the leader' / 'the organization'.

Casing. Sentence case for headlines and card titles. UPPERCASE tracked 0.08–0.16em for buttons and eyebrows.

Punctuation. Spaced em-dashes ( — ) for cadence. Curly quotes. Contractions encouraged. No exclamation points. No emoji.

The signature device. Two-tone: most of the line in #1E2A4A with one fragment in #6E3FCC. On dark, white with a #9D88ED fragment.

On light

Leadership development must fit your reality

On dark

Built to fit the rhythm of real work