Design tokens setup for enterprise teams using Next.js

Define tokens, align design + code, and ship a scalable theming foundation. Tailored for enterprise teams shipping with Next.js.

Use this playbook to scope work, align design and engineering, and avoid the failure modes we see most often on Next.js teams.

Who this is for: enterprise teams shipping design tokens setup on Next.js.

Typical constraints: procurement and a11y compliance, multiple vendors, long approval cycles.

Success looks like: Documented governance model with WCAG-aligned baselines and audit trail.

Next.js focus areas: Separate server and client component boundaries in your design system docs.; Use dynamic imports for heavy client-only widgets in marketing surfaces..

Watch for: Marking entire design-system shells as client components unnecessarily

• Figma variables and CSS custom properties use different names
• Dark mode is bolted on instead of designed as a theme
• Brand updates require manual find-and-replace across repos
• Spacing and typography drift because primitives are undefined
• Marking entire design-system shells as client components unnecessarily
• Hydration mismatches from theme or locale stored only in localStorage
• Duplicated layout code between marketing and app routes

1. Audit existing color, type, and spacing decisions in design and code.
2. Define semantic tokens that survive brand refreshes.
3. Wire Figma variables to code exports your CI can validate.
4. Roll out themes incrementally with a deprecation plan for legacy values.

Next.js specifics:

• Separate server and client component boundaries in your design system docs.
• Use dynamic imports for heavy client-only widgets in marketing surfaces.
• Align metadata and OG patterns with shared layout primitives.

• Token taxonomy (primitive → semantic → component)
• Figma variables and code export pipeline
• Theme switching strategy (light/dark/high-contrast)
• Migration guide for existing hardcoded values