Primitive Token Generator

Primitive Token Generator creates your foundational design token layer — color ramps, type scales, spacing, border radius, and elevation — directly in Figma as variables and effect styles.

Start with a seed color and generate a perceptually-balanced 11-stop ramp using OKLCH. Build a type scale from a single base size. Define spacing from a base unit. Every token is named, previewed in the panel, and exported to a Figma variable collection in one action.

Use it to build the primitive layer you then map to your own semantic and component tokens.

What it generates:

Color — multi-ramp OKLCH scales with customizable stops and curveTypography — font family slots, font size scale, and line height scaleSpacing — linear, geometric, or hybrid scalesBorder radius — numeric ramp with optional full/pill stopElevation — algorithmically-generated shadow stacks as effect stylesIncludes canvas documentation generation — one click produces a labelled Primitives page with swatches, type specimens, spacing tiles, radius tiles, and elevation cards.