# Design Tokens

Token reference for **Nolab Design System**. Use utility classes and CSS variables — never raw values.

## Colors

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--porcelain` |
| `--graphite` |
| `--charcoal` |
| `--nolab-blue` |
| `--neutral-0` |
| `--neutral-100` |
| `--neutral-200` |
| `--neutral-300` |
| `--neutral-400` |
| `--neutral-500` |
| `--neutral-600` |
| `--neutral-700` |
| `--neutral-900` |
| `--neutral-150` |
| `--neutral-250` |
| `--blue-100` |
| `--blue-500` |
| `--blue-700` |
| `--blue-tint` |
| `--terracotta-100` |
| `--terracotta-500` |
| `--terracotta-700` |
| `--forest-100` |
| `--forest-500` |
| `--forest-700` |
| `--success-600` |
| `--success-100` |
| `--warning-600` |
| `--warning-100` |
| `--danger-600` |
| `--danger-100` |
| `--dataviz-positive` |
| `--dataviz-negative` |
| `--photo-overlay-40` |
| `--action-disabled` |
| `--glass-soft-bg` |
| `--glass-soft-border` |
| `--glass-status-bg` |
| `--glass-status-border` |

## Typography

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--text-on-accent` |
| `--font-display` |
| `--font-sans` |
| `--font-mono` |
| `--text-display-2xl` |
| `--text-display-xl` |
| `--text-display-lg` |
| `--text-display-md` |
| `--text-display-sm` |
| `--text-xl` |
| `--text-lg` |
| `--text-md` |
| `--text-sm` |
| `--text-xs` |
| `--text-2xs` |
| `--leading-body` |

## Spacing

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--space-0` |
| `--space-1` |
| `--space-2` |
| `--space-3` |
| `--space-4` |
| `--space-5` |
| `--space-6` |
| `--space-8` |
| `--space-10` |
| `--space-12` |
| `--space-14` |
| `--space-16` |
| `--space-20` |
| `--space-30` |
| `--space-40` |
| `--space-50` |

## Border Radius

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--radius-none` |
| `--radius-sm` |
| `--radius-md` |
| `--radius-lg` |
| `--radius-cta` |
| `--radius-full` |

## Shadows

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--shadow-xs` |
| `--shadow-sm` |
| `--shadow-md` |
| `--shadow-lg` |
| `--shadow-xl` |
| `--shadow-focus` |

## Other

Reference via `var(--name)` in inline styles or CSS.

| CSS variable |
|---|
| `--photo-overlay` |
| `--weight-light` |
| `--weight-regular` |
| `--weight-medium` |
| `--weight-semibold` |
| `--weight-bold` |
| `--leading-tight` |
| `--leading-snug` |
| `--leading-normal` |
| `--leading-relaxed` |
| `--tracking-tight` |
| `--tracking-snug` |
| `--tracking-normal` |
| `--tracking-wide` |
| `--tracking-wider` |
| `--glass-soft-blur` |
| `--glass-status-blur` |
| `--container-max` |
| `--container-wide` |
| `--ease-out` |
| `--ease-in-out` |
| `--duration-fast` |
| `--duration-base` |
| `--duration-slow` |