A frontend toolkit that enables developers to communicate the intent of Material 3 Expressive through web standards.
To start without a build step, load web-expressive from a CDN.
Load the core foundation first, then a scheme, then any components you need.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Expressive Starter</title>
<!-- 1. Typography -->
<!-- Web Expressive uses Google Sans Flex by default. -->
<!-- To use a custom font, load it here and update --ref-typeface-base with your own value. -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400..600&display=swap" />
<!-- 2. Core (reset + essential tokens) -->
<link rel="stylesheet" href="https://unpkg.com/web-expressive@0.5.0/dist/core.css" />
<!-- 3. A scheme -->
<link rel="stylesheet" href="https://unpkg.com/web-expressive@0.5.0/dist/schemes/fuchsia-tonal.css" />
<!-- 4. Components (as needed) -->
<link rel="stylesheet" href="https://unpkg.com/web-expressive@0.5.0/dist/components/button.css" />
<link rel="stylesheet" href="https://unpkg.com/web-expressive@0.5.0/dist/components/switch.css" />
</head>
<body>
<button class="btn tonal xl">Get Started</button>
<input class="switch" type="checkbox" role="switch" />
</body>
</html>Install with:
npm install web-expressiveImport the styles you need into your global stylesheet:
@import "web-expressive/core.css";
@import "web-expressive/schemes/classic-tonal.css";
@import "web-expressive/components/button.css";Refer to Imports for the full list of npm and CDN paths.
Web Expressive is modular. Core foundations, schemes, and components ship as separate layers, so you can import the full toolkit or only the parts you need.
If you are starting from scratch, the usual path is:
- Load
core.css. This file provides the required foundation: a minimal reset and global system tokens based on the Material 3 token specification, such as typography, shape corners, and elevation. It does not include scheme colors or abstract shape tokens. Refer to Tokens for the full reference. - Load one or more schemes.
Schemes provide the Material 3 color roles such as primary, secondary, tertiary, surface, error, and
on-*variants. Each scheme includes light and dark mode, and multiple schemes can coexist. Browse the available files indist/schemes/or preview them in the Schemes showcase. - Add components as needed.
Component stylesheets are optional. Import only the components you need from
dist/components/, or build your own with the system tokens. Use Components API for component markup and modifiers.
View
Reference
