Feature
Generated families, real engineering
Every family ships as manifest data. The server render resolves the same typography, composition, and palette tokens the product uses.
ManifestTokens
the active family
Active
Performance energy translated into typography and surface.
Active is the design language of velocity. Space Grotesk at its heaviest weight carries the display voice; JetBrains Mono handles every meta label; a palette-tinted canvas keeps the whole surface humming with quiet electricity. The chrome is flat with crisp two-pixel edges — zero shadows, zero glow, zero blur — so the energy reads as engineered, not decorated.
Use Active when performance, precision, or speed is the actual product. Strava marketing, a Garmin watch launch, a half-marathon registration flow, a race-series sponsor page — anything where the audience cares whether the page itself feels quick. Motion is short (150–250ms) and intentional; type is uppercase and tightly tracked at display sizes; CTAs are pill-shaped and accent-filled.
Dark mode is first-class — night-run aesthetics are as canonical as the daytime version. Active is confident without being institutional, energetic without being playful, and serious about its motion vocabulary without ever bouncing.
Default palette · Green · 6 recommended palettes below
Best for
- Fitness and performance apps
- Race registration and event pages
- Performance-leaning developer tools
- Consumer athletic hardware launches
- Mobility and navigation products
Character
- confident
- energetic
- geometric
- engineered
- athletic
TypeSpace Grotesk · Space Grotesk · JetBrains Mono
How it differs
Active reads cooler and more engineered than Kinetic, which goes hard-shadow and slab; and warmer than Authority, which uses serif restraint instead of athletic geometry.
06 · Recommended palettes
Try a different chord.
Each palette below pairs with this family. The cards link straight to a fresh render of this page in that palette — share the URL, it's crawlable.
06 · Compositions
A few of the section topologies.
Compositions are family-agnostic — every family can render every topology. Combined with card layouts and collection layouts, the engine produces dozens of section presentations per section type. Diagrams show the shape; the family supplies the skin.
banner
Banner
Content stacks above a wide image rail.
sidebar
Sidebar
Text column paired with a media column.
bands
Bands
Alternating horizontal bands of copy and media.
breakout
Breakout
A featured module breaks the grid edge.
07 · See it live
See a full page.
A complete site rendered in Active. Open the example to walk through every section in the family's voice.