---
name: radii-tokens
description: Generate a complete design token system — color (with dark mode), spacing, typography, motion — using Radii's naming conventions
version: 3.0.0
author: radii.cloud
---

# Radii Tokens

Generate a complete design token system using Radii's exact naming conventions. When invoked, ask for the user's brand color, industry, and mood — then produce a full token file covering color (light + dark mode), spacing, typography, radius, shadow, and motion in both CSS and Tailwind v4 @theme format. Includes font pairing recommendations.

## Gathering inputs

If not already provided, ask for:
1. **Brand color** (hex) — the primary accent. Default: #2563eb if unspecified.
2. **Industry** — SaaS / fintech / e-commerce / creative / health / education / legal / other
3. **Mood** — minimal / warm / bold / playful / professional / calm / luxurious

## Token scales to generate

### Colors — light mode

**Neutral (ink):** `--color-ink-50` through `--color-ink-950`
Adjust warmth for mood (warm/luxurious → warmer undertones; minimal/professional → cooler, more blue-gray).

**Accent:** derived from brand color: `--color-accent-100` through `--color-accent-700`
Key stops: 100 (light tint), 500 (base), 600 (hover), 700 (pressed).

**Semantic:**
```css
--color-success: #16a34a;
--color-warning: #d97706;
--color-error: #dc2626;
--color-info: #0284c7;
```

### Colors — dark mode

Generate a `[data-theme="dark"]` block alongside `:root`. Rules:
- Ink scale inverts: `--color-ink-50` becomes the darkest (near-black surface), `--color-ink-950` becomes near-white text
- Accent scale shifts 100 stops lighter in dark mode (accent-500 → accent-400) for readability
- Shadows use higher opacity: `rgb(0 0 0 / 0.4)` instead of `rgb(0 0 0 / 0.08)`
- Semantic colors adjust: error darkens slightly (dc2626 → ef4444 for better contrast on dark surfaces)

```css
[data-theme="dark"] {
  --color-ink-50: #0d0f1a;   /* darkest surface */
  --color-ink-100: #1a1d2e;
  --color-ink-200: #252840;
  --color-ink-300: #3a3d55;
  --color-ink-400: #5a5d78;
  --color-ink-500: #7a7d96;
  --color-ink-600: #9a9db4;
  --color-ink-700: #b8bace;
  --color-ink-800: #d4d6e4;
  --color-ink-900: #ecedf5;
  --color-ink-950: #f8f9fc;  /* near-white text */
  /* Accent shifts lighter */
  --color-accent-500: [brand-400-equivalent];
  --color-accent-600: [brand-500-equivalent];
  /* Shadows heavier */
  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.2), 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-lifted: 0 4px 6px -2px rgb(0 0 0 / 0.3), 0 10px 15px -3px rgb(0 0 0 / 0.4);
}
```

### Typography + Font Pairing

Recommend a specific Google Fonts pairing based on mood:

| Mood | Display / Heading | Body | Mono | @import |
|---|---|---|---|---|
| minimal / professional | (none — use system-ui) | Inter | JetBrains Mono | `Inter:wght@400;500;600` |
| bold / creative | Bricolage Grotesque | Inter | JetBrains Mono | `Bricolage+Grotesque:opsz,wght@12..96,400;700` |
| warm / playful | Plus Jakarta Sans | Plus Jakarta Sans | JetBrains Mono | `Plus+Jakarta+Sans:wght@400;500;600;700` |
| luxurious / editorial | Cormorant Garamond | Outfit | JetBrains Mono | `Cormorant+Garamond:ital,wght@0,400;0,600;1,400` |
| calm / health | DM Sans | DM Sans | DM Mono | `DM+Sans:opsz,wght@9..40,400;500;600` |
| fintech / legal | IBM Plex Sans | IBM Plex Sans | IBM Plex Mono | `IBM+Plex+Sans:wght@400;500;600` |

```css
/* Font tokens */
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-display: 'Bricolage Grotesque', Georgia, serif; /* omit if no display font */
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

/* Type scale */
--text-xs: 0.75rem;   /* 12px */
--text-sm: 0.875rem;  /* 14px */
--text-base: 1rem;    /* 16px */
--text-lg: 1.125rem;  /* 18px */
--text-xl: 1.25rem;   /* 20px */
--text-2xl: 1.5rem;   /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem;  /* 36px */
--text-5xl: 3rem;     /* 48px */
--text-6xl: 3.75rem;  /* 60px */
--text-7xl: 4.5rem;   /* 72px */
```

### Spacing — strict 8pt grid

```css
--spacing-0: 0px;    --spacing-1: 4px;   --spacing-2: 8px;
--spacing-3: 12px;   --spacing-4: 16px;  --spacing-5: 20px;
--spacing-6: 24px;   --spacing-8: 32px;  --spacing-10: 40px;
--spacing-12: 48px;  --spacing-16: 64px; --spacing-20: 80px;
--spacing-24: 96px;
```

### Radius scale

```css
--radius-none: 0px;   --radius-xs: 4px;   --radius-sm: 8px;
--radius-md: 12px;    --radius-lg: 16px;  --radius-xl: 20px;
--radius-2xl: 24px;   --radius-3xl: 32px; --radius-full: 9999px;
```

Mood guidance: minimal → xs–md; playful → lg–3xl; professional → sm–lg.

### Shadow / elevation

```css
--shadow-flat: none;
--shadow-soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);
--shadow-lifted: 0 4px 6px -2px rgb(0 0 0 / 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.08);
--shadow-elevated: 0 10px 20px -5px rgb(0 0 0 / 0.08), 0 20px 40px -10px rgb(0 0 0 / 0.12);
```

### Motion tokens

```css
/* Duration */
--motion-instant: 80ms;      /* press feedback, micro-interactions */
--motion-fast: 150ms;        /* hover states, small transitions */
--motion-base: 220ms;        /* most UI transitions */
--motion-slow: 380ms;        /* modals, sheets, page transitions */
--motion-deliberate: 500ms;  /* dramatic reveals, onboarding */

/* Easing */
--motion-ease-in: cubic-bezier(0.4, 0, 1, 1);          /* exits */
--motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances */
--motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);    /* position changes */
--motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* interactive feedback */

/* Stagger */
--motion-stagger: 80ms;      /* delay between staggered list items */
```

Mood guidance: playful → increase spring amplitude, use --motion-fast for most interactions. Calm/professional → use --motion-base or --motion-slow, avoid spring for primary actions.

## Output format

Produce THREE blocks:

**1. Google Fonts @import:**
```css
@import url('https://fonts.googleapis.com/css2?family=...');
```

**2. CSS custom properties:**
```css
/* ── Radii Token System — generated by radii.cloud ──── */
/* Industry: [input] | Mood: [input] | Brand: [input] */

:root { /* light mode tokens */ }

[data-theme="dark"] { /* dark mode overrides */ }
```

**3. Tailwind v4 @theme:**
```css
/* Tailwind v4 — paste into globals.css */
@theme {
  /* identical tokens */
}
```

## After generating

- Remind the user: in Tailwind v4, tokens do NOT generate utility classes automatically. Use `text-[var(--color-ink-900)]`, not `text-ink-900`.
- To enable dark mode: add `data-theme="dark"` to `<html>`. Wire it to `document.documentElement.dataset.theme = 'dark'`.
- Run `/radii-audit` after building to score implementation.
- Run `/radii-motion` to verify motion token usage in components.

## Learn more

https://radii.cloud/terms/spacing-system
https://radii.cloud/terms/color-palette
https://radii.cloud/terms/type-scale
https://radii.cloud/terms/animation
https://radii.cloud/terms/dark-mode
https://radii.cloud/prompt-builder