Skip to content

Foundations

The design tokens every component reads: color, type, shape, motion and layout, generated from the pinned androidx sources and shown here from those same tokens.

Every value on these pages comes from @kyralabs/m3e-tokens at build time, the same objects and custom properties the components use, so the tables cannot drift from the library. The sources are Compose Material3 at the pinned commit, Material Color Utilities 0.4.0 and m3.material.io (see FOUNDATIONS_SPEC.md and SOURCES.md).

  • Color

    Color roles, dynamic color from one seed (Material Color Utilities), contrast levels and a theme builder.

  • Typography

    The type scale in Google Sans Flex, with the emphasized styles, as tokens.

  • Shape

    The corner scale, the 35 Material shapes and the shape morph, ported from androidx graphics-shapes.

  • Motion

    The spring tokens of the standard and expressive motion schemes, their CSS curves and when to use each.

  • Layout

    Window size classes, the spacing scale, elevation and state layers.