Using UI Stack

Apply a structured design system to every UI component you generate. This prevents inconsistent padding, mismatched colors, and forgotten hover states.

Design System Principles

Follow these rules for every component you build:

Spacing — 8px Grid

Use multiples of 8 for all spacing (padding, margin, gap):

• 4px — tight internal padding only
• 8px — inline gaps, icon spacing
• 16px — standard padding, card gaps
• 24px — section padding
• 32px — large section gaps
• 48px / 64px — page-level spacing

Color — 60-30-10 Rule