Motorway
The bnto design system. Warm, organized, satisfying, like a well-packed bento box on a Mini Motorways map. 3D surfaces, springy motion, three themed palettes.
Colors
Semantic color tokens across all variants. Each swatch renders with its matching surface tint.
Surface & Elevation
Cards cast directional shadows that follow the light source. Four elevation tiers from flush to floating.
sm
Border
Three border modes for surfaces. Solid is the default, dashed for placeholder slots, none for borderless rows like list items.
solid (default)
dashed
none
Springable Surfaces
Configure spring mode and elevation independently. The spring foundation shared by all animated surfaces — pressable buttons and loading cards alike.
elevation
spring
elevation-md + spring-bounciest (550ms rubber band) — grounded
grounded
grounded
grounded