Sign in Start building
Brand kit

Make it look Sparkden.

Logos, colors, and typefaces — everything you need to put the spark on a poster, a slide, or your own project. Download what you need; click any color to copy its hex.

2 logos · SVG + PNG 18 named colors 3 typefaces
01

Logos

Two bolts, one wordmark. Every file has a transparent background and comes as both SVG (scales to any size — use this when you can) and PNG. Drop them on paper, ink, or anything warm, and give them a little breathing room.

Full logo preview
Full logo on dark

Full logo

Marks + wordmark, the lockup we use everywhere — headers, footers, posters, slides. Grab the SVG when you can; it scales forever.

PNG 1367×317 · SVG vector · transparent
SVG PNG
Spark mark preview
Spark mark on dark

Spark mark

The double-bolt on its own. Avatars, favicons, stickers, and anywhere there’s no room for the wordmark.

PNG 400×400 · SVG vector · transparent
SVG PNG
Please don't recolor, stretch, outline, or re-set the wordmark in another font. If the orange doesn't work on your background, use the mark on a Paper or Ink panel instead.
02

Colors

Warm paper, warm ink, and a family of oranges — no cool grays, ever. Click any swatch to copy its hex.

The spark family

Paper & ink

Semantic (warmed to sit on paper)

Full app ramps

The product UI uses ten-step ramps of the orange and the warm neutral. Click a chip to copy.

Orange
Warm neutral
03

Typography

Three open-source faces from Google Fonts — free to download and use anywhere. Headings are tight-tracked Space Grotesk; an Instrument Serif italic carries the warm, human moment inside them.

Space Grotesk

Display — headings, numbers, the big stuff

Weights we use: 400 · 500 · 600 · 700

Download .zip Google Fonts ↗
A community of teenagers who build.

Inter

Body — paragraphs, UI, everything readable

Weights we use: 400 · 500 · 600 · 700 · 800

Download .zip Google Fonts ↗
Real infrastructure and real encouragement for students who want to build, host, and run the things they create.

System mono

Code, eyebrows, table headers, fine print

No download needed — it's whatever mono your computer already has.

ui-monospace, 'SF Mono', 'Fira Code', monospace
Embedding on the web? One line gets you all three:
https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap
04

Quick rules

Do

  • Set it on warm paper (#FFFDF9) or ink (#17120E).
  • Use Spark Orange for the one thing you want people to look at.
  • Let the bolts breathe — clear space roughly the height of one bolt.
  • Write like a person. Lowercase energy, real sentences.

Don't

  • Recolor the logo, add gradients, or put it on busy photos.
  • Mix in cool grays or pure black — our neutrals are warm.
  • Use more than one orange accent in the same view.
  • Re-set the wordmark in Space Grotesk and call it the logo.

Questions, or need a format we don't have here? Ask in the community chat — someone will sort you out.