System Overview

Tokens

Tokens carry visual decisions such as color, spacing, typography, and borders. The model follows Core → Appearance → Semantics → Patterns. Brand, Scheme, and Scale are independent Appearance concerns.

Use the token reference to find the right role before overriding a visual property.

Patterns

Patterns provide HTML structures and CSS classes for controls such as Button, Input, and Checkbox. Use their documented markup with the package styles. Individual pages explain where JavaScript is needed for behavior.

Components

Date Picker and Dialog document interactions that combine markup, state, and JavaScript. Check each page for integration requirements and limitations.

Optional light-DOM Web Components provide JavaScript wrappers for supported patterns. They use the same CSS and tokens as plain HTML. Import only the wrappers your application needs; see Getting Started.

Examples

Examples show how to compose the building blocks into forms and page layouts. Adapt their content, validation, and application behavior to your own flow.

Application responsibilities

Your application supplies content, accessible labels, business validation, data, and actions. A styled control alone does not provide those behaviors. Check the documented keyboard behavior and test the completed flow in context.