Every surface is a token
Color, outline, elevation, shape, and motion all resolve through the same custom properties this page is using.
Material 3 Expressive · React 18 and 19
The design system, not a screenshot of it.
41 conformant components with native web semantics, precompiled CSS, and typed theme and token APIs. No Tailwind, no runtime style injection, no dependencies.
npm install @language-lit/material3-expressiveOne source color, one validated theme
Themes are created through a typed API and validated before they render — including role-pair contrast. A theme that would be unreadable is rejected rather than shipped.
Source color
Tonal palettes are generated from this color, then the complete theme is validated — reference integrity and role-pair contrast included — before any component sees it.
Native input, native validation
Primary
Secondary
Tertiary
Neutral variant
Tonal palettes generated from the source color #6750a4.
What you actually install
Every number here is read from the repository at build time.
Runtime dependencies
React and React DOM are peers. Nothing else ships.
JavaScript, gzipped
Plus 50 kB of precompiled CSS for the complete stylesheet. Both are budgeted in CI.
Entry points
Components, /theme, /tokens, and /styles.css. The theme and token entries are React-free.
Conformant components
Counted from the inventory that gates the release. Anything unfinished is absent, not listed as partial.
Built on the platform
A button is a <button>. A dialog is a <dialog>. A checkbox is a real form control that submits. Focus, keyboard, RTL, reduced motion, and forced-colors behavior come from the browser wherever the browser already gets them right, and the deliberate exceptions are written down.
Supported browsers: Chrome 120, Edge 120, Firefox 121, Safari 17.2, iOS 17.2.