Tokens & Composition

Tokens fall into five categories, but there's no enforced hierarchy:

Type	Examples	Role
Component	card, button, input	Primary identity
Modifier	elevated, hoverable	Behavioral variation
Slot	header, body, footer	Sub-structure
State	disabled, loading	Semantic states
Size	sm, lg, xl	Size variants

example.html

1<!-- Free composition — mix any tokens -->
2<section class="ui-card ui-elevated ui-hoverable">
3  <header class="ui-header ui-sticky">Dashboard</header>
4  <div class="ui-body">Content</div>
5  <footer class="ui-footer">
6    <button class="ui-button ui-secondary ui-sm">Cancel</button>
7    <button class="ui-button ui-primary ui-sm">Save</button>
8  </footer>
9</section>