Brand & product
Design guidelines
The system behind Setups Works Lab — logo, typography, color, illustration and motion. Use it to keep everything we ship looking and moving like one product.
Logo
The wordmark adapts to its surface; the icon stands alone at small sizes.
Keep clear space around the mark equal to the icon's height ÷ 2.
Don't recolor, stretch, add effects, or place the mark on low-contrast imagery.
Typography
Three faces, three jobs: Space Grotesk for marketing display, Geist Sans for the interface, Geist Mono for code. Tight tracking on display sizes.
Ag
Space Grotesk
font-display · marketing headlines
Ag
Geist Sans
font-sans · interface & body
Ag
Geist Mono
font-mono · code & metadata
const solve = (input: string) => output;font-mono · text-[13px]Numbers in stats and prices use tabular-nums so they never jitter.
Never letter-space body text; tight tracking is for display sizes only.
Color
Near-black primary actions, one decisive blue accent, honest semantic colors. Click any swatch to copy its hex.
Brand blue
Neutrals · light
Neutrals · dark
Semantic
Charts
Blue #006bff is an accent: focus rings, links, active states, key stats — not large fills.
Difficulty is always Easy green · Medium amber · Hard red, in both themes.
Illustration
We don't use stock art. Atmosphere comes from light, glass and data — rendered, never pasted.
Radial glow — hero atmosphere
radial-gradient · blue at 14–22% alpha
Glass surface — floating chrome
Data as decoration — activity heatmap
--heat-0 → --heat-4 · real data, never fake
Iconography — one set, filled
Font Awesome solid · 16/20px · currentColor
Mock UI, terminals and editors are drawn with real components — screenshots of ourselves, not clipart.
No stock photos, 3D blobs, or emoji as UI. One accent color per illustration.
Motion
Fast, purposeful, transform/opacity only. UI feedback ≤ 200ms; entrances 600–800ms; ambient loops are subtle and infinite.
Entrance — rise & fade (0.6s ease-out)
Feedback — hover, press, focus (≤200ms)
Live state — pulse (1.8s loop)
Ambient — gentle float (5s infinite)
Animate transform and opacity only — never width, height or top/left.
Entrances rise 30–60px and fade in once; scroll-stacking uses CSS position: sticky, no JS.
Nothing bounces for attention. Motion explains hierarchy; it never begs for it.
Components
Live from the product's UI kit — these are the real components, not pictures.
Buttons
Badges & difficulty
Inputs
Card
Radius: 6px controls, 12px cards, 24px marketing surfaces (rounded-3xl).
One primary action per view. Everything else is outline or ghost.
Voice
How Setups Works Lab talks, everywhere from buttons to billing emails.
Plain and direct: “Run code”, “Start free trial”, “Cancel anytime”.
Honest about money and terms — the first-charge date is always shown before payment.
No hype words (“revolutionary”), no guilt-tripping cancel flows, no dark patterns.
Never spoil a solution — hints guide, they don't solve.
Brand assets
Official marks, ready to use. Grab individual files or the whole kit with usage notes and colors.
Wordmark · light
PNG · 956×223
Wordmark · dark
PNG · 956×223
App icon · vector
SVG
App icon · 512
PNG · 512×512
The whole system, one poster
PNG · 3200×2000 · bento
Everything in one kit
Wordmarks, icons (SVG + PNG), maskable icon, the bento poster, plus a README with clear-space rules and the color palette.
Download brand kit (.zip)