🎨 1. Color Tokens (10)

9 brightness steps from 50 to 900 + white. Pull one main color from Palette Generator and auto-step.

--brand-50:  #fdf2f8;
--brand-100: #fce7f3;
--brand-500: #ec4899;  /* main */
--brand-700: #be185d;
--brand-900: #831843;

--gray-50, --gray-100, ... --gray-900
--white: #fff;

✏️ 2. Type Scale (6 steps)

1.25x ratio (Major Third): 12/14/16/18/24/32/48px. Convert to rem with em-px Converter.

📏 3. Spacing (multiples of 4)

4 / 8 / 12 / 16 / 24 / 32 / 48 / 64. Anchored at 8px everything stays balanced.

⚡ Bonus: 5 Components

• Button: primary, secondary, ghost
• Input: text, error state
• Card: one box shadow
• Badge: for category tags
• Modal: overlay + box

These 5 cover most sites you will build.

🔧 One File

/* tokens.css */
:root {
  /* Color */
  --c-brand: #ec4899;
  --c-text: #1e293b;
  --c-bg: #fff;

  /* Type */
  --t-sm: 14px;
  --t-base: 16px;
  --t-lg: 24px;
  --t-xl: 32px;

  /* Space (step of 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
}

🛠 Tools

• Palette: Palette Generator
• Contrast: WCAG Contrast
• em-px: Unit Converter
• Color: HEX/RGB

💡 Reality: 30 tokens cover a solo project. You don't need Figma Variables; CSS vars are enough.