Imported Figma export

Figma Tokens

The Figma token export is rendered as a standalone reference with resolved spacing aliases and CSS variables.

Colors

300

#FCA5A5

--colors-red-300

500

#EF4444

--colors-red-500

700

#B91C1C

--colors-red-700

black

#000000

--colors-black

white

#ffffff

--colors-white

Spacing

sm

4 = 4px

--spacing-sm

md

{spacing.sm} * 2 = 8px

--spacing-md

lg

{spacing.md} * 2 = {spacing.sm} * 2 * 2px

--spacing-lg

xl

{spacing.lg} * 2 = {spacing.md} * 2 * 2px

--spacing-xl

Generated CSS

:root {
  --colors-red-300: #FCA5A5;
  --colors-red-500: #EF4444;
  --colors-red-700: #B91C1C;
  --colors-black: #000000;
  --colors-white: #ffffff;
  --spacing-sm: 4;
  --spacing-md: 8;
  --spacing-lg: 16;
  --spacing-xl: 32;
}