Styling Fundamentals
5 min read + 20 min hands-on
Visual Hierarchy
Section titled “Visual Hierarchy”Visual hierarchy is how you organize elements to guide the user’s eye from the most important to the least. When prompting for UI, you need to describe this hierarchy explicitly.
Use size, color, and spacing to establish importance.
Create a card component with clear visual hierarchy:
- Large title (24px, font-weight 700)
- Medium subtitle (16px, font-weight 500, gray-500)
- Small body text (14px, font-weight 400, gray-600)
- Prominent CTA button (full-width, primary color background, white text)
Use spacing to separate each level: 8px between title and subtitle, 12px before body, 24px before button.Key elements to name in hierarchy prompts
Section titled “Key elements to name in hierarchy prompts”| Element | What to specify |
|---|---|
| Typography | Font size, weight, and color for each level |
| Spacing | Exact padding/margin values between sections |
| Color contrast | Darker/bolder for primary, lighter for secondary |
| Button prominence | Size, color fill vs. outline, position |
Style Type Selection
Section titled “Style Type Selection”Choosing a style type sets the entire visual tone of a component. Name it explicitly — AI will make different decisions about shadows, borders, transparency, and corners depending on the style.
Clean, solid colors. No shadows or gradients. Fast and distraction-free.
Design a settings panel using flat design:
solid white background, no shadows, 1px #E5E7EB borders,
8px border radius, blue-600 for active states.Best for: productivity tools, content-heavy interfaces, fast-loading pages.
Outline
Section titled “Outline”Transparent backgrounds with visible borders. Components feel lightweight.
Create an outline-style button set:
transparent background, 1.5px solid border in the current accent color,
text in the accent color, filled background on hover.Best for: secondary actions, filter chips, tag components.
Minimalist
Section titled “Minimalist”Simple and clean with subtle visual cues. No decorative elements.
Design a minimalist login form:
white background, no decorative elements,
single 1px bottom border on inputs (not full box border),
one accent color for the submit button only.Best for: reading-focused apps, editorial sites, content platforms.
Glass (Glassmorphism)
Section titled “Glass (Glassmorphism)”Backdrop blur with semi-transparent surfaces. Creates depth and a premium feel.
Create a glassmorphism card:
background: rgba(255, 255, 255, 0.15),
backdrop-filter: blur(12px),
border: 1px solid rgba(255, 255, 255, 0.2),
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1).Best for: dashboards on image backgrounds, modern SaaS, landing pages.
Rounded corners, subtle depth, and layered surfaces. Feels native on Apple devices.
Design an iOS-style action sheet:
white card background, 14px border radius,
subtle separator lines between options,
blue system color (#007AFF) for primary actions,
red (#FF3B30) for destructive actions.Best for: mobile web apps, PWAs, apps targeting Apple users.
Material
Section titled “Material”Elevation-based depth using consistent shadows. Clear hierarchy through layering.
Create a Material Design card:
white surface (#FFFFFF), elevation-2 shadow (0 2px 4px rgba(0,0,0,0.12)),
4px border radius, 16px internal padding,
raised to elevation-4 shadow on hover.Best for: Android apps, Google-adjacent tools, enterprise interfaces.
Color Psychology in Styling
Section titled “Color Psychology in Styling”Colors carry meaning. When you name a color in a prompt, also state the intended emotional purpose so AI applies it in the right contexts.
| Color | Psychology | Prompt use case |
|---|---|---|
Red #EF4444 | Energy, urgency, warning | Error states, delete actions, CTAs |
Blue #3B82F6 | Trust, stability, professionalism | Primary actions, finance, corporate |
Green #10B981 | Growth, success, safety | Success states, eco brands, confirmations |
Yellow #F59E0B | Optimism, attention, caution | Warnings, highlights, creative tools |
Purple #8B5CF6 | Luxury, creativity, mystery | Premium tiers, creative apps |
Gray #6B7280 | Neutrality, sophistication | Text, borders, backgrounds |
Example: applying color psychology
Section titled “Example: applying color psychology”Create a financial dashboard using blue (#3B82F6) as primary color
to convey trust and stability.
Use green (#10B981) for positive values and gains,
red (#EF4444) for negative values and losses.
Gray (#6B7280) for secondary labels and dividers.Combining All Three
Section titled “Combining All Three”A strong styling prompt names the hierarchy, style type, and color intent together.
Design a pricing card with material design style:
- Visual hierarchy: plan name (20px bold), price (48px bold primary),
feature list (14px gray-600), CTA button (full-width)
- Style: elevation-2 shadow, 8px border radius, white surface
- Colors: blue (#3B82F6) for the recommended plan highlight,
gray (#F9FAFB) for standard plan background,
green (#10B981) checkmarks for included features,
red (#EF4444) for excluded features