Skip to content
SmartHand Design Systemv0.1.1

Colors & tokens

Color is expressed as tokens, never raw hex. Tokens are layered so you can restyle the whole system from one place and get automatic light/dark support.

Semantic & action tokens
Open ↗
foundations/tokens.html
<div class="space-y-6">
  <div>
    <p class="mb-2 font-medium text-foreground">Surfaces</p>
    <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
      <div class="rounded-lg border border-border bg-background p-4 text-sm text-foreground">background</div>
      <div class="rounded-lg border border-border bg-background-subtle p-4 text-sm text-foreground">subtle</div>
      <div class="rounded-lg border border-border bg-background-muted p-4 text-sm text-foreground">muted</div>
      <div class="rounded-lg border border-border-primary bg-background-primary p-4 text-sm text-foreground-primary">
        primary
      </div>
    </div>
  </div>


  <div>
    <p class="mb-2 font-medium text-foreground">Foreground</p>
    <div class="flex flex-wrap gap-4 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground">foreground</span>
      <span class="text-foreground-subtle">subtle</span>
      <span class="text-foreground-muted">muted</span>
      <span class="text-foreground-primary">primary</span>
    </div>
  </div>


  <div>
    <p class="mb-2 font-medium text-foreground">Status</p>
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
      <div class="rounded-lg border border-border-positive bg-background-positive p-4 text-sm text-foreground-positive">
        positive
      </div>
      <div class="rounded-lg border border-border-negative bg-background-negative p-4 text-sm text-foreground-negative">
        negative
      </div>
      <div class="rounded-lg border border-border-warning bg-background-warning p-4 text-sm text-foreground-warning">
        warning
      </div>
    </div>
  </div>


  <div>
    <p class="mb-2 font-medium text-foreground">Action</p>
    <div class="flex flex-wrap gap-3">
      <span class="rounded-lg bg-action-primary px-4 py-2 text-sm text-action-on-primary">action-primary</span>
      <span class="rounded-lg bg-action-secondary px-4 py-2 text-sm text-action-on-secondary ring-1 ring-border"
        >action-secondary</span
      >
      <span class="rounded-lg bg-action-tertiary px-4 py-2 text-sm text-action-on-tertiary">action-tertiary</span>
    </div>
  </div>
</div>

The three layers

Section titled “The three layers”
  1. Primitives — the raw palette (--brand-600, --sm-neutral-800, …). You rarely touch these directly.
  2. Semantic — meaning-based tokens that map onto primitives and flip in dark mode: background, background-subtle, background-muted, background-primary, foreground, foreground-subtle, foreground-muted, foreground-primary, border, plus positive / negative / warning variants.
  3. Action — interaction tokens for controls: action-primary, action-on-primary, action-secondary, action-tertiary, action-positive, action-negative, and their hover / focus / border companions.

Using tokens

Section titled “Using tokens”

Every token is available as a Tailwind color, so it works with any color utility:

<div class="border border-border bg-background text-foreground">…</div>
<span class="text-foreground-positive">+4.6%</span>
<button class="bg-action-primary text-action-on-primary">Save</button>

Light & dark

Section titled “Light & dark”

Theming is a single class on <html> (light or dark) — set by the theme script in the head and toggled by the theme switcher. Semantic and action tokens carry their own dark-mode values, so switching the class is all it takes.