<!-- Use for typography and icons. -->
<p style="color: var(--ui-color-text)">--ui-color-text: Default text</p>
<p class="ui-text-muted">--ui-color-text-muted: Secondary text, captions</p>
<p class="ui-p-1" style="color: var(--ui-color-text-inverse); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)">--ui-color-text-inverse: Text on dark backgrounds</p>

<!-- Use for surfaces, cards, and containers. -->
<div class="ui-p-2" style="background: var(--ui-color-bg); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md)">--ui-color-bg: Base background</div>
<div class="ui-p-2" style="background: var(--ui-color-bg-subtle); border-radius: var(--ui-radius-md)">--ui-color-bg-subtle: Subtle emphasis</div>
<div class="ui-p-2" style="background: var(--ui-color-bg-muted); border-radius: var(--ui-radius-md)">--ui-color-bg-muted: Stronger emphasis, code blocks</div>

<!-- Use for dividers, inputs, and card borders. -->
<div class="ui-p-2" style="border: 2px solid var(--ui-color-border); border-radius: var(--ui-radius-md)">--ui-color-border: Default borders</div>
<div class="ui-p-2" style="border: 2px solid var(--ui-color-border-strong); border-radius: var(--ui-radius-md)">--ui-color-border-strong: Emphasized borders</div>

<!-- Use for links, buttons, and interactive elements. -->
<p style="color: var(--ui-color-interactive)">--ui-color-interactive: Links, primary actions</p>
<p style="color: var(--ui-color-interactive-hover)">--ui-color-interactive-hover: Hover state</p>
<div class="ui-p-1" style="display: inline-block; outline: 3px solid var(--ui-color-focus); outline-offset: 2px; border-radius: var(--ui-radius-sm)">--ui-color-focus: Focus rings</div>

<!-- Use for feedback, alerts, and validation. -->
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-success); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-success</span>
</div>
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-warning); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-warning</span>
</div>
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-danger); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-danger</span>
</div>

<!-- Brand color with light and dark variants. -->
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-light); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-primary-light</span>
</div>
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-primary</span>
</div>
<div class="ui-row ui-row--sm">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-dark); border-radius: var(--ui-radius-sm)"></div>
  <span>--ui-color-primary-dark</span>
</div>

<!-- Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth. -->
<div class="ui-row ui-row--sm ui-flex-wrap">
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-50); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-300); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-400); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-500); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-600); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-700); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-800); border-radius: var(--ui-radius-sm)"></div>
  <div style="width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)"></div>
</div>