Foren · v0.1

Design tokens, synced from Figma.

The single source of truth for color, type, spacing, and radius across Foren products. Every token here mirrors a Figma variable and exposes a CSS custom property you can use in code.

Colors

170

129 primitives across 13 ramps. 41 semantic tokens for production.

Typography

Inter for UI, Megafield for display. 16-step size ramp.

Spacing

15-step scale from 0 to 128px. Used for padding, gap, sizing.

Radius

10-step corner scale. None to full-pill.

Use in code

Every semantic token is exposed as a CSS custom property. Reference them directly in styles or via Tailwind utilities.

/* Background + text */
background: var(--color-foren-bg-default);
color: var(--color-foren-text-primary);

/* Border + radius */
border: 1px solid var(--color-foren-border-default);
border-radius: var(--radius-lg);