# Web Expressive
Web Expressive is a toolkit built on web standards that helps developers and AI agents build user interfaces for the web. It brings the design intent of Material 3 Expressive to HTML and CSS through design tokens, components, and adaptable UI patterns.
## Quick start
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.
```html
Web Expressive Starter
```
---
### Via npm
Install with:
```bash
npm install web-expressive
```
Import the styles you need into your global stylesheet:
```css
@import "web-expressive/core.css";
@import "web-expressive/schemes/alpha/classic-tonal.css";
@import "web-expressive/components/button.css";
```
Refer to [Imports](docs/reference/imports.md) for the full list of npm and CDN paths.
## Overview
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:
1. 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](docs/reference/tokens.md) for the full reference.
2. 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. Start with the more vivid [`schemes/alpha/` collection](https://unpkg.com/browse/web-expressive@0.5.1/dist/schemes/alpha/). See [Imports](docs/reference/imports.md#schemes) for the full scheme guidance.
3. Add components as needed.
Component stylesheets are optional. Import only the components you need, or build your own with the system tokens. Use [Imports](docs/reference/imports.md#components) for CDN and npm paths and [Components API](docs/reference/components.md) for component markup and modifiers.
## Using with an AI agent
Give the agent this repository URL or one of the [single-file layout starters](examples/layouts/Readme.md), then describe the interface you want and your target environment. The repository provides the import paths, component markup, system tokens, scheme guidance, and adaptable patterns it needs to build the UI layer.
Ask the agent to adapt the UI to your project's stack, file structure, and conventions, then connect it to your existing routing, data, and state.
## Resources
- [Layout starters](examples/layouts/Readme.md)
- [Tokens](docs/reference/tokens.md)
- [Imports](docs/reference/imports.md)
- [Available schemes](https://unpkg.com/browse/web-expressive@0.5.1/dist/schemes/alpha/)
- [Components API](docs/reference/components.md)