AV Component Catalogue

This catalogue now uses one page per learning group. Start with tokens, then move upward through web components, primitives, compositions, and project components.

Catalogue Sections

1. Foundations

Global behavior system for themes, typography roles, motion, elevation, focus, and state feedback.

2. Tokens

Visual design decisions and live token examples.

3. Web Components

Reference inventory from the Material Web package for components we may wrap later.

4. Primitives (av-* Wrappers)

Live primitive examples and copyable markup used for styling and iteration.

5. Compositions

Reusable composition patterns built from multiple primitives.

6. Project Components

Workflow-level components assembled from compositions and primitives.

How The Terms Connect

Tokens

Define visual decisions: color, spacing, type, radius, shadow, motion, breakpoints.

Web Components

Base md-* behaviour from Material Web.

Primitives (av-* Wrappers)

Avani wrappers standardize API, usage, and styling.

Compositions

Reusable combinations of primitives for common UI structures.

Project Components

Workflow-level features for specific team tasks.