A practical vocabulary to help users describe what they want when prompting AI or briefing designers.
Use these to describe how the page is structured.
- Bento Grid
- Hero Section
- Hero + Sections
- Split Layout (Text / Image)
- Card-Based Layout
- Masonry Grid
- Asymmetrical Layout
- One-Page Scroll
- Modular Blocks
- Dashboard Layout
- Sidebar Layout
- Mobile-First Layout
- Full-Width Sections
Example
“Use a bento grid layout with modular sections.”
Defines the overall look & feel.
- Modern SaaS
- Minimalist
- Clean UI
- Corporate / Professional
- Brutalist
- Soft UI
- Flat Design
- Glassmorphism
- Neumorphism
- Futuristic
- Retro / Vintage
- Editorial Style
- Playful
- High-Contrast
- Dark Mode
- Light Mode
Example
“Modern SaaS style with glassmorphism elements.”
Use these to describe page background treatment.
- Subtle Background
- Neutral Background
- Off-White Background
- Light Gray Background
- Clean Flat Background
- Low-Contrast Background
- Soft Gradient
- Linear Gradient
- Mesh Gradient
- Radial Gradient
- Pastel Gradient
- Monochrome Gradient
- Dark Gradient
- Accent Gradient
- Light Noise Texture
- Grainy Texture
- Paper Texture
- Frosted Glass Background
- Glassmorphism Background
- Soft Blur Background
- Dark Mode Background
- Charcoal Background
- Matte Black
- Midnight Blue
- Deep Navy
- Dark Background with Soft Glow
- Subtle Grid Pattern
- Dot Pattern
- Line Pattern
- Geometric Pattern
- Abstract Shapes
- Blurred Blobs
- Decorative Accents
- Technical Grid Background
- Blueprint Style
- Wireframe Background
- Data Grid
- System UI Background
Example
“Subtle off-white background with light noise texture.”
Describes how users move through the site.
- Sticky Navigation
- Floating Header
- Mega Menu
- Sidebar Navigation
- Hamburger Menu
- Breadcrumb Navigation
- Smooth Scrolling
- Anchor Links
- Floating CTA Button
- Step-Based Flow
- Wizard-Style Form
Use these to specify what appears on the page.
- Call-to-Action (CTA)
- Feature Cards
- Pricing Table
- Comparison Table
- Testimonial Carousel
- Logo Wall
- FAQ Accordion
- Tabs
- Badges / Pills
- Stats Counter
- Timeline
- Modal / Dialog
- Tooltip
- Search Bar
- Notification Toast
Controls tone and messaging.
- Benefit-Driven Copy
- Short Punchy Headlines
- Problem → Solution Flow
- Storytelling Copy
- Professional Tone
- Conversational Tone
- Technical / Developer-Focused
- Marketing-Friendly
- SEO-Optimized Copy
- Minimal Text
- Action-Oriented CTAs
- Clear Microcopy
Defines motion and interactivity.
- Subtle Micro-Interactions
- Hover Animations
- Scroll-Based Animations
- Fade-In Sections
- Slide-Up Cards
- Parallax Scrolling
- Page Transitions
- Loading Skeletons
- Lottie Animations
- Interactive Charts
- Cursor Effects
- No Animation
Helps tailor design decisions.
- SaaS Landing Page
- Startup MVP
- Agency Website
- Portfolio Website
- Personal Brand Site
- E-Commerce Store
- Dashboard / Admin Panel
- Blog / Content Site
- Documentation Site
- Healthcare Website
- Education Platform
- Fintech Website
- Enterprise Website
Designer-style shorthand that works very well in prompts:
- Bento grid with subtle gradient background
- Modern SaaS style with mesh gradient
- Dark mode with elevated cards
- Neutral background with accent gradients
- Off-white background with paper texture
- Minimal layout with high-contrast cards
- Dashboard layout with technical grid background
Design a [website type] using a [layout style] and [visual style].
Use a [background style].
Include [components].
Apply [copy style] and [animation style].
Target audience: [who].
Design a SaaS landing page using a bento grid layout and modern SaaS style.
Use a subtle off-white background with light noise texture.
Include feature cards, pricing table, and FAQ accordion.
Apply benefit-driven copy and subtle micro-interactions.
Target audience: digital agencies.