• Playground
Components
  • Custom
Surfaces
    • Typography
    • Colors
    • Spacing
    • Radius
    • Elevation
    • Motion
  • SEO
  1. Playground
  2. Design

Design

Visual-language foundations covering typography, colors, spacing, radius, elevation, and motion.

Typography

The system of typefaces, sizes, and weights that establishes hierarchy and tone across all text.

palette-swatch-variant
Colors

The palette of color tokens and contrast pairs that gives the interface visual identity across light and dark themes.

Spacing

The shared scale of gaps, padding, and margins that defines layout rhythm and keeps density predictable across components.

Radius

The corner-radius scale derived from one base token, shaping every surface from badges to modals.

Elevation

The set of surface shades that signals depth by stepping lightness from background to card to overlay, not with shadows.

Motion

The easing curves and durations that govern how the interface moves while respecting reduced-motion preferences.