Tokens first. Then everything else.
Colour, spacing, radius, density, shadow, motion and layout are Figma variables, and every part in the kit is bound to them. Switch a mode on a frame and the whole screen follows, shadows and focus rings included. The same values ship as CSS for your code.
Four switches on every frame.
Modes combine freely: a dark, dense, teal phone screen is one click per collection, not a separate file.
Colour
- Lightdefault
- Darkevery token
Surfaces, text, borders, status, charts, maps and shadows all have a dark value.
Brand
- Signal#C8450E · 6/10/4
- Teal#0E7F75 · 8/12/pill
- Yoursgenerator below
Seven colour variables plus control, card and chip radius.
Density
- Compactrow 40 · control 32
- Comfortablerow 52 · control 40
- Denserow 32 · control 28
Cell padding and stack gaps move with it.
Layout
- Desktop1440 · 12 col
- Laptop1024 · 12 col
- Tablet768 · 8 col
- Phone390 · 4 col
Margins, gutters, sidebar, app bar and touch target per width.
Your brand colour, in one click.
Pick a colour and Propel works out the seven brand variables behind it: the accent, its hover and dark-mode versions, selection tints and focus. Contrast is checked as you go, and this whole site follows, in light and dark.
The kit ships with Signal and Teal. To add yours, paste these values into a new mode of the Brand collection in Figma, or the CSS into tokens.css.
Semantic colour, light and dark.
Name the job, not the hue. Each swatch shows the light value on the left and the dark value on the right.
Background
Text
Border & icon
Status
Two families, sixteen styles.
Instrument Sans for the interface. IBM Plex Mono for every number, ID and timestamp, so columns of figures line up.
A 2 px base, ten steps.
Spacing variables from 2 to 64. Radius lives in the Brand collection, so a brand can be sharp or soft without touching a component.
| Token | Signal | Teal |
|---|---|---|
radius/control | 6 | 8 |
radius/card | 10 | 12 |
radius/chip | 4 | 999 |
Shadows that work in the dark.
Shadow colours are variables too, so elevation stays visible on dark surfaces. The focus ring is its own effect style: a 2 px surface gap and a 2 px ring in the focus colour, at least 3:1 against every surface.
Five durations and a stagger.
Every component lists its motion: what animates, how long, which easing. Reduced-motion users get instant state changes.
Data colours with their own rules.
Six categorical series with tints, plus grid, axis, label and highlight tokens. Maps get land, water, park, roads and labels for both themes.
Chart series
Map
113 icons, one stroke.
A 24 px grid with a 1.8 px stroke, set up for instance swap in every component that takes an icon. The skill pack lists each icon's node id.
Show all 113 icon names
alert · arrow-down · arrow-left · arrow-right · arrow-up · arrow-up2 · at · bell · bolt · branch · briefcase · building · bulb · calendar · cap · check · check-circle · chevron-down · chevron-left · chevron-right · chevron-up · clock · close · cloud-off · code · columns · comment · commit · copy · cursor · database · dot · download · external · eye · eye-off · file · filter · fit · flag · folder · globe · grid · grip · hand · hash · heart · history · home · image · inbox · info · kanban · key · laptop · life-buoy · link · list · loader · lock · logout · mail · menu · mic · minus · minus2 · moon · more · new-chat · paperclip · pause · pencil · phone · play · play-circle · plug · plus · receipt · refresh · rocket · search · settings · sheet · shield · sidebar · skip-back · skip-forward · sliders · sort · sparkle · sparkle-ai · square · star · star-fill · stop · sun · table · tag · target · template · thumb-down · thumb-up · trash · trend-down · trend-up · type · upload · user · wallet · x-circle