Radii Tokens

About

A design token system is the single source of truth that makes a codebase maintainable. Radii Tokens generates a coherent, production-ready token system adapted to your brand inputs. The output follows Radii's naming system exactly — every token name maps directly to a Radii term you can look up, understand, and demo. Tokens cover the full design surface: neutral scale, accent scale, semantic colors, spacing (8pt grid), border radius, shadow elevation, typography scale, font stacks, and motion (duration, easing, delay). You get both a CSS custom properties block for any project and a Tailwind v4 @theme block.

What it does

• Generates both light mode (:root) and dark mode ([data-theme="dark"]) color tokens — complete ink scale inversion, shifted accent, heavier shadows
• Recommends a specific Google Fonts pairing based on mood: Inter for minimal, Bricolage Grotesque for bold/creative, Cormorant for luxurious
• Outputs --spacing-* on the 8pt grid, --radius-*, --shadow-* elevation scale, and --text-* typography scale
• Generates --motion-* tokens with exact cubic-bezier values: ease-out entrances, ease-in exits, spring for interactive
• Produces three blocks: Google Fonts @import URL, CSS :root + dark mode, and Tailwind v4 @theme — all in one command
• Adapts token values to brand color, industry, and mood — playful gets higher spring amplitude, professional gets slower base timing

Give it

• 1.Brand color (hex) — optional; generates a harmonious palette if omitted
• 2.Industry (SaaS / fintech / e-commerce / creative / health / legal / etc.)
• 3.Mood (minimal / warm / bold / playful / professional / calm)
• 4.Optional: existing token names to maintain backwards compatibility

Example output

@theme {
  /* Color */
  --color-ink-50: #f8fafc;
  --color-ink-900: #0d0f1a;
  --color-accent-500: #2563eb;
  --color-success: #16a34a;
  --color-error: #dc2626;
  /* Spacing — 8pt grid */
  --spacing-1: 4px;
  --spacing-4: 16px;
  --spacing-8: 32px;
  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-xl: 24px;
  /* Elevation */
  --shadow-soft: 0 1px 3px rgb(0 0 0 / 0.06);
  --shadow-lifted: 0 10px 24px rgb(0 0 0 / 0.10);
  /* Typography */
  --font-sans: var(--font-inter), ui-sans-serif, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  /* Motion */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 400ms;
  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}