Smoke
Montserrat over Inter
radius 40% · density 100% · motion 100% · flat elevation
Themes
13 examples of how far the tokens can move
These themes are demonstrations, not a menu: each one is the whole system restyled through its tokens alone, to show the range one set of primitives covers. A look means both colour modes, a typeface or a heading and body pairing, with self-hosted fonts, type weight and tracking, the colour of the logo and of each type tier, icon weight, radius, density, motion, elevation, the ambient background, and the chart palette. Apply one and this page rethemes around you, which is the honest preview. Your own brand takes the same path: the playground builds it live and copies out paste-ready CSS.
Getaway
Poppins over DM Sans
radius 100% · density 100% · motion 100% · soft elevation
Ember
Lora over Source Sans 3
radius 100% · density 100% · motion 100% · default elevation
Signal
Bricolage Grotesque over Figtree
radius 30% · density 100% · motion 100% · flat elevation
Volt
Space Grotesk over Manrope
radius 30% · density 95% · motion 110% · default elevation
Marquee
Anton over Work Sans
radius 20% · density 100% · motion 110% · flat elevation
Zest
Inter Tight over Inter
radius 140% · density 100% · motion 100% · soft elevation
Forest
Montserrat over DM Sans
radius 100% · density 100% · motion 100% · soft elevation
Terminal
IBM Plex Mono
radius 0% · density 100% · motion 120% · flat elevation
Tide
Nunito Sans
the raw token files, exactly as shipped
Blueprint
IBM Plex Sans
radius 70% · density 100% · motion 100% · default elevation
Velvet
Playfair Display over Plus Jakarta Sans
radius 140% · density 105% · motion 100% · soft elevation
Bubblegum
Fredoka over Nunito
radius 120% · density 105% · motion 110% · soft elevation
Create your own
Any colour, pairing, and shape over the same tokens
every lever live, copied out as paste-ready CSS
// Every shipped theme, one generated stylesheet each, plus this aggregate.
import 'rift-ds/tokens/presets/presets.css';
<html data-brand="terminal">