Styles
STYLES

Styles

Shape your own Material: tune material's tokens, watch real components follow in the preview, and export one theme.

Your theme

Based on Baseline, light. Pick another base theme and mode in the preview.

Nothing changed yet: the preview shows the base theme as material ships it. Start with Shape.

    Foundations

    Color

    Every color role in each theme, light and dark, with contrast checks.

    Typography

    The 15 type scale roles as live samples you can edit.

    Shape

    The corner scale: make your components squarer or rounder.
    RUNTIME COLOUR

    Colour Lab

    Start with a seed or an image. Explore seven variants on real components, then take the tokens into your app.

    Open Colour Lab →

    Coming

    • Elevation

      Shadow levels and tonal surfaces.

      Coming

    • Motion

      Easing and duration tokens.

      Coming

    • States

      Hover, focus, pressed and dragged layers.

      Coming

    • Icons

      Material Symbols in the material library’s components.

      Coming

    Export theme

    CSS

    The same file for web components, React, Vue, Svelte, Solid and the factories: custom properties reach into every component, shadow roots included.

    Reset