Design Systems
Don't just design a page; design a language. A Design System ensures that every button, header, and card feels like part of the same family.
The 4 Pillars of a System
Color Ramps
Go beyond primary colors. Define neutral shades, success/error states, and overlay tints.
Type Scales
A logical relationship between font sizes. Usually based on a Golden Ratio or 1.2x multiplier.
Space Tokens
Standardized padding, margin, and gap values (e.g. 4px, 8px, 16px, 32px, 64px).
Layer Styles
Global rules for border-radius, shadows, and background blurs.
System-Level Prompting
When starting a new project, describe your Design System first. This "pre-loads" the AI with the rules it should follow for every component it generates thereafter.
"Use a tight, geometric sans-serif type scale based on 1.25x (Major Third). Brand colors are Midnight (#0A0C10) and Neon Rose (#FF007F). All containers should use a 24px border-radius and shadow-sm."
Shared Token Library
The Palette
Prompt for "A systematic color palette with 10 shades for each brand color".
The Grid
Define your modular scale: "Use 16px as the base unit for all responsive spacing".
The Assets
Standardize iconography: "Use thin-stroke icons with rounded terminals for consistency".