bntoMotorway
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
Dormant Surfaces
Surfaces start flush with the ground plane and spring to life. Use dormant on Cards for skeleton loading states or scroll-triggered reveals.
elevation
elevation-md — dormant
dormant
dormant
dormant
Scroll down — cards spring up from dormancy when they enter the viewport.
Card 1
Sprung up when scrolled into view.
dormant
Card 2
Sprung up when scrolled into view.
dormant
Card 3
Sprung up when scrolled into view.
dormant