Browse the system
Design system

From spark to structure.

Everything that makes Spark Hive look, sound, and feel like Spark Hive. One palette. One voice. One hand-drawn system. Analog soul in a digital world.

Browse the library Open the deck →
Hand-drawn notebook with a spark rising from the page
Every surface passes through human hands.
Foundations

The essentials, on one page

Six colors and four faces carry the whole brand. Tokens live in colors_and_type.css — link styles.css and you have all of it.

Palette

Correct the deprecated #6B46C1 and #FFB800 on sight.

Cosmic Purple#471C78
Radiant Gold#F6A900
Spark Teal#00CFC1
Orbit Silver#BFBFBF
Midnight#1A1A1A
White#FFFFFF
60% brand30% neutrals10% accent

Typography

Nunito does the work. The others are seasoning.

Headings & UI

Nunito BlackBold → Black, purple by default

Editorial

Lora italicPull quotes and long-form reading

Annotation

Shadows Into LightMargin notes and sticky labels — never body

Accent

Raleway DotsALL-CAPS, one per composition. Spice only.

The wordmark

Two words, one deliberate split

The name is spark hive — always lowercase, always two words, always rendered with a deliberate weight and color split.

Bold meets light. Purple meets gold.
Elementspark
TreatmentNunito Bold · Cosmic Purple #471C78
Elementhive
TreatmentNunito Light · Radiant Gold #F6A900
SpacingOne space between words. Tighten tracking by −20 to −30 units to keep the pair visually close.
CasingLowercase. Always. No exceptions.
Primary · on white

The default on white and paper grounds. Purple "spark", gold "hive".

Reversed · on purple

Cosmic Purple surfaces only. Both words white — the Bold / Light split carries the contrast.

✦ Always
spark hive
Never
Spark HiveSPARK HIVEsparkhiveSparkHivespark-hive
Voice

Tatiana, talking to one person over coffee

Warm, precise, a little playful. Never corporate. Every quality has a shadow it must stay clear of.

Precise
but never rigid
Hand-crafted
but never messy
Warm
but never soft
Structured
but never corporate
Playful
but never cluttered
Clean
but never sterile
Human
but never sloppy

“From spark to structure. One notebook. One system. One week.”

Short declarative sentences. Second person. Sentence case. Named phrases reused verbatim.

Iconography

The loudest instrument we own

Hand-drawn PNGs with visible crayon grain. Each one is a metaphor, not a UI glyph. Give them 32–96px of breathing room and never redraw them.

Queen's MoveStrategy, decisions
North Star CompassVision, clarity
Builder's BoxImplementation
Spark BrainThe spark moment
The BeeHive and team
Library

Every card in the system

Each reference card opens on its own. Filter by group to find what you need.

Starting points

Don't start from a blank page

Ready-made templates that already follow every rule. Copy, fill, ship.

Slide deck

Title, section, quote, framework, comparison and CTA layouts at 16:9 — keyboard-navigable and auto-scaling.

Open the deck

Video overlay kit

Nine overlays for the talking-head series at true 1920×1080. The centre 46% of frame always belongs to the speaker.

Open the overlays

Canva templates

Six required template wireframes and four starting grids for social content that stays on-system.

See the templates
Before you ship

Inside the lines, outside the electric fence

Run every asset past both lists. If it fails one, it isn't done.

Always

Required on every asset.

  • Logo top-left — never centered, never rotated.
  • Paper grounds only: dot grid, graph paper, or plain white.
  • Gold CTAs on purple, purple CTAs on white.
  • The wordmark is two words, all lowercase: spark hive.
  • Text layered in post, never baked into images.

Never

Hard no's that break the brand.

  • Corporate Memphis, stock handshakes, suited office scenes.
  • Cream, beige, or off-yellow paper. Coffee rings and distress.
  • 3D clay renders — the pre-made 3D icons are the only exception.
  • Emoji. Use the gold spark ✦ instead.
  • Glassy blur, neumorphism, bouncy springs.

Take the final design test Read the full guide →