Responsive Token Generator

When to Use

• Building a responsive design token layer for multiple breakpoints
• Migrating from media-query-based responsive styles to token-based
• Setting up responsive typography and spacing scales
• Adding tablet and mobile modes to an existing token system

The Prompt

Generate responsive design tokens for these breakpoints:

- **Mobile:** 0-767px
- **Tablet:** 768-1023px
- **Desktop:** 1024px+

Create responsive tokens for:

1. **Typography** — Scale font sizes across breakpoints. Headings should decrease on mobile, body text stays readable. Include: font-size, line-height, letter-spacing for each type style.
2. **Spacing** — Adjust spacing scale per breakpoint. Reduce large spacing values on mobile. Keep small values (4-8px) consistent.
3. **Layout** — Container max-width, page margins, grid columns, gutter widths.
4. **Component overrides** — Card padding, modal width, navigation height, sidebar width.

Rules:
- Use fluid scaling (clamp) where possible, fixed steps otherwise
- Minimum body text: 16px on all breakpoints
- Minimum touch target: 44px on mobile/tablet
- Maintain visual hierarchy ratios across breakpoints

Output format: [CSS variables / JSON / Tokens Studio format]
Include a summary table showing all values at each breakpoint.

Example Output

## Responsive Typography

| Token                | Mobile    | Tablet    | Desktop   | Fluid (clamp)                        |
|----------------------|-----------|-----------|-----------|--------------------------------------|
| font-size-heading-1  | 28px      | 36px      | 48px      | clamp(1.75rem, 1.2rem + 2vw, 3rem)  |
| font-size-heading-2  | 24px      | 28px      | 36px      | clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem) |
| font-size-heading-3  | 20px      | 22px      | 24px      | clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) |
| font-size-body       | 16px      | 16px      | 16px      | 1rem (fixed)                         |
| font-size-small      | 14px      | 14px      | 14px      | 0.875rem (fixed)                     |

## Responsive Spacing

| Token                | Mobile | Tablet | Desktop |
|----------------------|--------|--------|---------|
| spacing-page-margin  | 16px   | 24px   | 48px    |
| spacing-section-gap  | 24px   | 32px   | 48px    |
| spacing-card-padding | 16px   | 20px   | 24px    |
| spacing-stack-gap    | 12px   | 16px   | 16px    |

## Responsive Layout

| Token                | Mobile | Tablet | Desktop |
|----------------------|--------|--------|---------|
| grid-columns         | 4      | 8      | 12      |
| grid-gutter          | 16px   | 24px   | 24px    |
| container-max-width  | 100%   | 100%   | 1280px  |
| sidebar-width        | 0 (hidden) | 240px | 280px |
| nav-height           | 56px   | 56px   | 64px    |

:root {
  --font-size-heading-1: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  --font-size-heading-2: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --font-size-body: 1rem;
  --spacing-page-margin: 16px;
}

@media (min-width: 768px) {
  :root {
    --spacing-page-margin: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --spacing-page-margin: 48px;
  }
}