using-ui-stack

name	using-ui-stack
description	Enforce a configuration-driven design system when generating UI. Ensures consistent spacing, colors, typography, dark mode, interactions, and accessibility across all AI-generated components.
user-invocable	true

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

• 60% neutral/background
• 30% primary brand color
• 10% accent for CTAs and highlights
• Semantic colors: success (green), warning (amber), error (red), info (blue)
• Never use pure black (#000) for dark mode — use slate-950 or similar

Typography — 1.25 Ratio Scale

text-xs:   12px / 16px
text-sm:   14px / 20px
text-base: 16px / 24px
text-lg:   18px / 28px
text-xl:   20px / 28px
text-2xl:  24px / 32px
text-3xl:  30px / 36px
text-4xl:  36px / 40px