# Design Mappings & Descriptors

Use these mappings to transform vague user requests into precise, high-fidelity
design instructions.

## UI/UX Keyword Refinement

| Vague Term | Enhanced Professional Terminology |
|:---|:---|
| "menu at the top" | "sticky navigation bar with logo and list items" |
| "big photo" | "high-impact hero section with full-width imagery" |
| "list of things" | "responsive card grid with hover states and subtle elevations" |
| "button" | "primary call-to-action button with micro-interactions" |
| "form" | "clean form with labeled input fields, validation states, and submit button" |
| "picture area" | "hero section with focal-point image or video background" |
| "sidebar" | "collapsible side navigation with icon-label pairings" |
| "popup" | "modal dialog with overlay and smooth entry animation" |

## Atmosphere & "Vibe" Descriptors

Add these adjectives to set the mood and aesthetic philosophy:

| Basic Vibe | Enhanced Design Description |
|:---|:---|
| "Modern" | "Clean, minimal, with generous whitespace and high-contrast typography." |
| "Professional" | "Sophisticated, trustworthy, utilizing subtle shadows and a restricted, premium palette." |
| "Fun / Playful" | "Vibrant, organic, with rounded corners, bold accent colors, and bouncy micro-animations." |
| "Dark Mode" | "Electric, high-contrast accents on deep slate or near-black backgrounds." |
| "Luxury" | "Elegant, spacious, with fine lines, serif headers, and a focus on high-fidelity photography." |
| "Tech / Cyber" | "Futuristic, neon accents, glassmorphism effects, and technological monospaced typography." |

## Geometry & Shape Translation

Convert technical values into physical descriptions for Stitch:

- **Pill-shaped**: Used for `rounded-full` elements (buttons, tags).
- **Softly rounded**: Used for `rounded-xl` (12px) or `rounded-2xl` (16px) containers.
- **Sharp/Precise**: Used for `rounded-none` or `rounded-sm` elements.
- **Glassmorphism**: Semi-transparent surfaces with background blur and thin borders.

## Depth & Elevation

- **Flat**: No shadows, focus on color blocking and borders.
- **Whisper-soft**: Diffused, light shadows for subtle lift.
- **Floating**: High-offset, soft shadows for elements that appear high above the surface.
- **Inset**: Inner shadows for pressable or nested elements.