Brand
One spark, used sparingly
SuperGuide is about the moment a fact lights up and stays lit. That is the whole brand: a shield for the things worth keeping, a spark for the instant you get one right. The system around it is chunky and tactile, built from near-monochrome green with a single saturated accent that only appears when something is true right now. This page is the reference. Every colour, size and duration on it is read straight from our design tokens, so what you see here is what ships.
Logo
The shield and the spark
A shield for protection and guidance, a four-point spark for the thing you just understood. The mark is drawn as vector: an emerald gradient field, a dark teal keyline that holds it together on any ground, and the spark with its four small rays.
full colour
mono, one ink, any ground
Drawn, not typeset: Unbounded 700 outlines beside the shield at 1.7x the cap height (chosen from the ratio ladder), overshoot split evenly, gap fixed at 0.35 shield widths. One mark, never icon-plus-caption.
Clear space
Leave space equal to a quarter of the mark's height on every side. Nothing sits inside it: no type, no rule, no other logo. In the lockup, the gap between the shield and the wordmark is fixed. Do not close it.
Minimum size
The full mark holds down to 24px tall. Below that the four rays turn to mush, so use the simplified mark instead: the same shield and spark with the rays dropped, which is what the favicon uses. The horizontal lockup needs 120px of width.
Do
- Use the SVG. It stays sharp at every size and weighs about 2KB.
- Keep the shield's proportions. Scale it, never stretch it.
- Give it clear space: a quarter of the mark's height on every side.
- Set it on a plain ground: mist, void, or deep green.
Do not
- Recolour the shield, the keyline or the spark.
- Stretch, squash, rotate or round off the silhouette.
- Add a shadow, an outline, a bevel or a gradient of your own.
- Place it on a photograph, a pattern, or a colour that fights the emerald.
App icon: Deep Field
The shield and spark on the deep field, drawn from the same geometry as the mark above. iOS, the Android adaptive set and the web favicon all come out of one script, so none of them is hand-traced.
Splash: two stages, no flash
The operating system can only centre a logo on a flat colour, so that is all stage one does: the stacked lockup on the deep field. Stage two is ours: Zylo full-bleed on the cosmic aurora, with the wordmark and "Remember it for good." set live in Unbounded, never baked into the image. It holds for a moment, then fades into the app. The hand-off has no flash because both stages sit on the same ground.
Logo at size
Three tiers of detail
The mark simplifies as it shrinks. Full keeps the gradient, keyline and rays from 32 pixels up. Flat drops the gradients and rays between 20 and 32. Glyph is the favicon tier: silhouette and knocked-out spark, nothing a 16 pixel grid cannot hold.
full ≥ 32px
flat 20 to 32px
glyph ≤ 16px
favicon.ico
Colour
Mist, ink, deep green, one spark
Light is cool mist with near-black green ink. Dark is a green void, where the deep green lifts so it separates from the ground and the spark brightens. Gold and coral are functional only: gold for a streak, coral for a miss, never red. Every slot below is a CSS variable, --color-<name>. Click a swatch to copy its value.
Mist
lightThe default. Cool ground, hairline structure, deep green for actions.
Void
darkDeep lifts on buttons so it separates from the ground, and the spark brightens.
Both palettes define the same slots, so any component can be written once and rendered in either. The twoglow slots are rgba on purpose: they are light cast over whatever is underneath, not a fill.
Typography
Unbounded scores, Instrument Sans reads
Three faces, each with one job. Nothing else is used anywhere in the product.
Unbounded
display
Hero, title, heading, score and buttons. 700 and 800, usually uppercase. Wide and geometric: it makes a score look like a scoreboard.
Instrument Sans
text
Questions, body copy, answer options. A compact editorial grotesk that holds up at 22px on a phone.
IBM Plex Mono
mono
Labels, timers, counters and anything numeric that has to line up. Uppercase with 1px of tracking.
hero
40 / 44 · 800 · -1.2
Unbounded
Paste it. Play it. Keep it.
title
28 / 32 · 700 · -0.6
Unbounded
The French Revolution
heading
20 / 26 · 700 · -0.3
Unbounded
Due today
question
22 / 30 · 600 · 0
Instrument Sans
In which year did the Bastille fall to the Paris crowd?
body
17 / 24 · 400 · 0
Instrument Sans
Reading feels like learning, but being asked is learning. SuperGuide reads your paste, pulls out the testable facts and starts asking.
small
14 / 20 · 400 · 0
Instrument Sans
Zylo will nudge you before these fade. You can turn nudges off in Settings.
label
12 / 16 · 600 · +1
IBM Plex Mono
Question 03 / 15 · 00:42
button
15 / 22 · 700 · +0.2
Unbounded
Start the session
score
56 / 60 · 800 · -2
Unbounded
12
Sizes are in points on mobile and pixels on the web, and they are the same numbers. Every specimen above is rendered from the token, not typed in.
Motion
Three moves, nothing else
One move for arriving, one for a right answer, one for a wrong one. Hover a stage to replay it, or use the button.
Spring in
420msElements arrive from 20px below at 94% scale. It should feel like a shutter, not like jelly.
cubic-bezier(0.3, 1.4, 0.5, 1)
Glow pulse
900msA right answer inverts to ink and the spark ring blooms, then holds. Light moves; layout never does.
ease-out
Shake
380msFour hits, minus 8, plus 8, minus 5, plus 5, with a coral tint and no glow. Pairs with a light haptic.
ease-in-out
Under prefers-reduced-motion all three collapse to a single frame across the site and the app. Motion carries feedback here, never meaning: if every animation were removed, nothing on screen would become ambiguous.
One move lives outside the three, in one place: the beam. On the finish screen the checker's rating stays sealed until the visitor asks; the button charges and implodes, and Zylo lights the stars with a beam across his own sky. It is feedback on the deck, it runs once, and nothing else on the site may borrow it.
Iconography and shapes
The spark is the atom
Every glyph descends from two motifs: the four-point spark, and the widening-dot line, which is spaced repetition drawn literally: the gaps grow as the memory holds. Icons are 2 pixel mono-line on a 24 grid. Gold is the third rule: emerald is the system, the content brings the spectrum, and gold appears only when something is EARNED: a streak, a mastered deck, Zylo's shield.
spark
spark-burst
spark-tilt
spark-trail
deck
play
bell
trophy
hook
order
timer
share
account
shield
dots-widening
check
spark field
widening dots
halftone
Covers
The content brings the colour
The interface stays emerald so the decks can be loud. Every deck gets a procedural cover at zero milliseconds, seeded from its own hash: full-spectrum hue, one pattern, one composition. Generated art (flux-2-pro, hex-pinned to the same hue) replaces it asynchronously; this layer is the permanent fallback.
Covers v2: the subject lands on the ground
The next cover system, decided. The procedural cover above stays the ground, exactly as it ships today. On top of it lands one flat paper-cut subject in two greens and gold, generated from the deck's title by GPT Image 2 at medium quality: under five cents a deck, delivered with a transparent background, no cutout pass. Ground colours come from the brand palette, not the full spectrum. The title is set live, as in the app.
One deck, three flat treatments
The eight grounds
The greens the system owns, their cool and warm neighbours, gold and coral. A deck's hash picks one; the shapes and pattern still follow the seed.
For the record: the nebula study Nano Banana Pro, 2K, $0.15 per subject
The first pass generated both layers: a nebula ground in the deck's hue from the hero splash, and a matte object in Zylo's material with two library objects as references, cut out. Beautiful and too much; the flat system above replaced it.
Voice
Friendly, quick, a little cheeky
We are a guide, not a gatekeeper. The reader is the one doing the hard part, and the writing should feel like someone sitting next to them rather than presenting at them.
- 01Write from the reader's side of the screen. Buttons say what happens next.
- 02Playful, and it teases a little. Never smug about a miss, never condescending.
- 03Lead with the impact, not the definition. The definition can come second.
- 04Short sentences, one idea each. It has to land on a phone, in a queue.
- 05Celebrate the win, then get out of the way. One exclamation mark is plenty.
- 06No jargon anyone has to decode, and no praise the reader has not earned.
Do
"Nice. That one is yours now."
Short, warm, and it hands the win to the reader.
Do not
"Correct! You have successfully answered the question!"
Twice the words, none of the warmth, and it sounds like a receipt.
The story
Where Zylo comes from
SuperGuide started with an annoyance: you read something great, and a week later it is gone.
Zylo comes from a deep green field where nothing is ever forgotten, where every fact anyone learned still burns as a spark. He landed here, found a species that forgets almost everything, and stayed to play.
The shield on his chest is gold because he earned it by remembering. Yours is emerald until you do.
His kit is the serum that extracts, the brain that keeps, the ray-gun that checks, and the ship that brought him.
That is the canon, and it draws the line for everything visual. The interface stays mist and emerald, flat and tactile. His world is where depth and glow are allowed: the deep field, the aurora, the gold sparks, the matte green-and-gold objects. The two never mix on one surface.
Zylo
Player two
Zylo is the small green alien in the cape who plays alongside you. He is the second player, not the product's mascot: he shows up to react when something lands, and he is off screen the rest of the time.
- Use him for reactions and celebrations, in a bubble or on a finish screen.
- He never explains the interface or introduces a feature.
- He never covers, blocks or delays the content you came for.
The character sheet
Ten poses, one law: Zylo always wears the GOLD shield, because Zylo earned his. The product wears emerald; gold is the earned accent. And he is never not a little smug.
The kit: the object library
Five matte objects from his world, one law: deep green bodies, gold rims, a cyan glow where something is live. Each exists on the aurora and as a transparent cutout for any ground. Generated against the character sheet, then cut out; the full-size masters live in the repo under docs/design/brand/library.
Extracts. A paste goes in, facts come out.
Keeps. Memory, and the spaced review behind it.
Checks. The beam that reveals a rating.
Brought him. Fast: paste to first question.
His other ride. Hovers where something is about to land.
The cutouts, on a checker: they go on any ground
Downloads
Take the files
Everything below is cleared for press, partners and anyone building something with us. If you need a variant that is not here, ask before you make one.
Logomark
The shield and spark, on its own.
SVG · vector · 2KB
Horizontal lockup
The mark with the wordmark, for a wide slot.
PNG · 840 x 167 · 49KB
Zylo, standing
Player two, in his default pose.
WebP · 438 x 746 · 49KB
Zylo in the field
The hero splash: Zylo on the aurora, no type baked in.
WebP · 800 x 1433 · 47KB
Zylo, cut out
The matte Zylo with alpha, for any ground.
WebP · 480 x 480 · 44KB
App icon
Deep Field, as it ships on the store.
WebP · 256 x 256 · 3KB
Questions about using the brand: superguide.ai.