---
stable_id: skills/skills-sh-samhvw8-dot-claude-ui-design-system
type: skills
title: skills-sh-samhvw8-dot-claude-ui-design-system
summary: >-
  # Design Token Architecture

  ## Three-Tier Token System (Industry Standard)

  Based on USWDS, IBM Carbon, and Shopify Polaris patterns.

  ### Tier 1: Primitive Tokens (Foundation Layer)

  - Raw design values without context

  - Examples: `gray-50`, `gray-900`, `spacing-4`, `font-sans`

  - Purpose: "The most basic form of tokens, reducing infinite possibilities to
  a select few"

  - Never reference other tokens

  - Immutable across themes

  ### Tier 2: Semantic Tokens (Context Layer)
tags:
  - skills-sh
  - skills-sh-all-time
source_url: https://raw.githubusercontent.com/samhvw8/dot-claude/HEAD/skills/ui-design-system/references/DESIGN_TOKENS.md
license: ""
upstream_ref: https://skills.sh/samhvw8/dot-claude/ui-design-system
github_stars: null
github_forks: null
github_is_organization: null
retrieved_at: 2026-06-11T08:33:17.712Z
content_sha256: 8d12d8d26d288f383e36dabea1cda9f1a9bbd96b6d8d23b7e364403dd2cb5c8f
---
