Design system

A small set of values gives a native interface its color, shape and pace. Start here before styling individual components.

Foundations

Theme, semantic color roles, and palettes for each surface.

The radius scale and animation durations shared by the library.

Choose color. Theme derives a palette from three inputs. Scheme names explicit roles when your application chooses every value.
Pass a palette. Components receive a ComponentPalette, so a document and a sidebar can use different palettes in one window.
Set shape and pace. Tokens supplies radii and motion durations for the whole process.
Build with components. Keep application state in the host and compose the elements into your screen.