Design Style

Minimal Design Prompts

Clean, simple designs with lots of whitespace and focused content. Perfect for modern, professional websites.

ChatGPT website screenshot

ChatGPT

AI
MinimalDark
## Color Palette
- Primary: #10A37F (OpenAI Green)
- Background: #343541, #202123
- Text: #ECECF1, #8E8EA0
- Accent: #10A37F

## Typography
- Font: Söhne, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 16px

## Layout Principles
- Chat interface focus
- Sidebar conversations
- Input prominence
- Response streaming

## UI Components
- Message bubbles
- Regenerate buttons
- Code blocks
- Copy buttons

## Visual Style
- Conversational AI
- Minimal distractions
- Dark for focus
- Streaming responses
Notion website screenshot

Notion

Productivity
MinimalLight
## Color Palette
- Primary: #000000
- Background: #FFFFFF, #F7F6F3, #FBFBFA
- Text: #37352F, #9B9A97
- Accent: #2EAADC, #FF7369, #FFDC49

## Typography
- Font: Inter, Georgia for serif option
- Headings: 700 weight
- Body: 400 weight, 16px, 1.5 line-height

## Layout Principles
- Block-based content
- Infinite canvas feel
- Sidebar navigation
- Breadcrumb hierarchy

## UI Components
- Minimal borders
- Slash commands
- Toggle blocks
- Database views

## Visual Style
- Paper-like simplicity
- Subtle shadows
- Icon + text combinations
- Clean typography focus
Figma website screenshot

Figma

Design
MinimalLight
## Color Palette
- Primary: #0D99FF (Figma Blue)
- Secondary: #FF7262, #A259FF, #1ABCFE
- Background: #FFFFFF, #F5F5F5, #2C2C2C (dark)
- Text: #000000, #333333

## Typography
- Font: Inter, system sans-serif
- Headings: 600 weight, tight spacing
- Body: 400 weight, 14px

## Layout Principles
- Canvas-centric design
- Minimal chrome, maximum workspace
- Collapsible panels
- Floating toolbars

## UI Components
- Sharp corners (2-4px)
- Icon-driven interface
- Contextual menus
- Layer panels

## Visual Style
- Tool-focused minimalism
- High contrast selection states
- Subtle shadows for depth
- Grid and guide overlays
Twitter/X website screenshot

Twitter/X

Social
MinimalDark
## Color Palette
- Primary: #1D9BF0 (Twitter Blue)
- Background: #000000, #16181C
- Text: #E7E9EA, #71767B
- Accent: #F91880 (Pink), #FFD400 (Gold)

## Typography
- Font: Chirp, system sans-serif
- Headings: 700 weight
- Body: 400 weight, 15px

## Layout Principles
- Timeline-centric
- Three-column desktop
- Bottom nav mobile
- Infinite scroll

## UI Components
- Full rounded buttons
- Tweet cards
- Engagement bars
- Verification badges

## Visual Style
- Conversational focus
- Real-time updates
- Blue accent throughout
- Dense information
GitHub website screenshot

GitHub

Developer
MinimalDark
## Color Palette
- Primary: #238636 (Green), #1F6FEB (Blue)
- Background: #0D1117, #161B22, #21262D
- Text: #C9D1D9, #8B949E
- Accent: #F78166 (Orange), #A371F7 (Purple)

## Typography
- Font: -apple-system, Segoe UI, monospace for code
- Headings: 600 weight
- Body: 400 weight, 14-16px
- Code: 12-14px monospace

## Layout Principles
- Repository-centric navigation
- Tab-based content switching
- Sidebar for file trees
- Inline code review

## UI Components
- Rounded corners (6px)
- Label/badge system
- Diff viewers
- Markdown rendering

## Visual Style
- Developer-focused density
- Syntax highlighting
- Contribution graphs
- Monospace aesthetics
YouTube website screenshot

YouTube

Streaming
MinimalLight
## Color Palette
- Primary: #FF0000 (YouTube Red)
- Background: #FFFFFF, #F9F9F9
- Text: #030303, #606060
- Accent: #065FD4 (Blue links)

## Typography
- Font: Roboto, system sans-serif
- Headings: 500 weight
- Body: 400 weight, 14px

## Layout Principles
- Video grid focus
- Left sidebar navigation
- Watch page layout
- Shorts vertical feed

## UI Components
- Rounded thumbnails (12px)
- Subscribe buttons
- Like/dislike bar
- Comment sections

## Visual Style
- Creator-centric
- Thumbnail optimization
- Red accent minimal
- Video-first design
Stripe Dashboard website screenshot

Stripe Dashboard

Finance
MinimalLight
## Color Palette
- Primary: #635BFF (Stripe Purple)
- Background: #FFFFFF, #F6F8FA
- Text: #1A1A1A, #697386
- Accent: #00D4AA, #FF5B52

## Typography
- Font: -apple-system, Segoe UI
- Headings: 600 weight
- Body: 400 weight, 14px

## Layout Principles
- Data dashboard clarity
- Left navigation rail
- Card-based metrics
- Tabular data views

## UI Components
- Subtle rounded corners (6px)
- Status indicators
- Charts and graphs
- Breadcrumb navigation

## Visual Style
- Financial precision
- Clean data visualization
- Subtle gradients
- Professional clarity
Linear website screenshot

Linear

SaaS
MinimalDark
## Color Palette
- Primary: #5E6AD2 (Linear Purple)
- Background: #0A0A0B, #1B1B1F, #26262A
- Text: #FFFFFF, #8A8F98
- Accent: #4CB782, #E5484D

## Typography
- Font: Inter, SF Pro
- Headings: 500 weight, tight tracking
- Body: 400 weight, 13-14px

## Layout Principles
- Kanban and list views
- Keyboard-first navigation
- Command palette (⌘K)
- Minimal visual clutter

## UI Components
- Subtle rounded corners (4px)
- Status pills
- Priority indicators
- Cycle progress rings

## Visual Style
- Ultra-refined dark mode
- Subtle hover states
- Smooth animations
- Glassmorphism hints
Vercel website screenshot

Vercel

Developer
MinimalDark
## Color Palette
- Primary: #000000, #FFFFFF
- Background: #000000, #111111, #1A1A1A
- Text: #FFFFFF, #888888
- Accent: #0070F3 (Blue), #50E3C2 (Teal)

## Typography
- Font: Inter, system sans-serif
- Headings: 700 weight, large sizes
- Body: 400 weight, 16px

## Layout Principles
- Hero-focused landing pages
- Terminal/code aesthetics
- Grid-based dashboards
- Generous whitespace

## UI Components
- Sharp to slightly rounded (4px)
- Gradient borders
- Terminal windows
- Deployment status indicators

## Visual Style
- Stark black and white
- Code-centric visuals
- Subtle gradient accents
- Performance-focused messaging
Perplexity website screenshot

Perplexity

AI
MinimalLight
## Color Palette
- Primary: #20808D (Teal)
- Background: #FFFFFF, #F7F7F7
- Text: #1A1A1A, #666666
- Accent: #20808D

## Typography
- Font: Inter, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 15px

## Layout Principles
- Answer-first design
- Source citations
- Follow-up suggestions
- Thread conversations

## UI Components
- Source cards
- Citation numbers
- Search input
- Related queries

## Visual Style
- Research assistant
- Clean answers
- Citation transparency
- Knowledge focus
WhatsApp website screenshot

WhatsApp

Communication
MinimalLight
## Color Palette
- Primary: #25D366 (WhatsApp Green)
- Background: #FFFFFF, #ECE5DD (chat bg)
- Text: #111B21, #667781
- Accent: #34B7F1 (Blue tick)

## Typography
- Font: SF Pro, Roboto
- Headings: 500 weight
- Body: 400 weight, 15px

## Layout Principles
- Chat list sidebar
- Conversation focus
- Floating action buttons
- Status stories

## UI Components
- Message bubbles
- Read receipts
- Voice message waves
- Contact avatars

## Visual Style
- Clean messaging
- Green throughout
- Minimal UI chrome
- Fast and simple
Robinhood website screenshot

Robinhood

Finance
MinimalDark
## Color Palette
- Primary: #00C805 (Robinhood Green)
- Background: #040D14, #1E2124
- Text: #FFFFFF, #9DA0A5
- Accent: #FF5000 (Red for losses)

## Typography
- Font: Capsule Sans, system sans-serif
- Headings: 700 weight
- Body: 400 weight, 15px

## Layout Principles
- Chart-centric design
- Bottom tab navigation (mobile)
- Swipe interactions
- Full-screen charts

## UI Components
- Minimal borders
- Line charts prominent
- Number animations
- Slide-up modals

## Visual Style
- Neon on black
- Financial data focus
- Celebratory animations
- Gamified investing
Uber website screenshot

Uber

Travel
MinimalLight
## Color Palette
- Primary: #000000
- Background: #FFFFFF, #F6F6F6
- Text: #000000, #6B6B6B
- Accent: #276EF1 (Blue)

## Typography
- Font: Uber Move, system sans-serif
- Headings: 700 weight
- Body: 400 weight, 14-16px

## Layout Principles
- Map-centric design
- Bottom sheet interactions
- Step-by-step booking
- Price transparency

## UI Components
- Sharp corners
- Location pins
- Car icons
- ETA displays

## Visual Style
- Black and white primary
- Map integration
- Clean booking flow
- Safety information
Coinbase website screenshot

Coinbase

Finance
MinimalLight
## Color Palette
- Primary: #0052FF (Coinbase Blue)
- Background: #FFFFFF, #F5F8FF
- Text: #0A0B0D, #5B616E
- Accent: #00D395 (Green gains)

## Typography
- Font: Graphik, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 14-16px

## Layout Principles
- Portfolio dashboard
- Asset list views
- Price charts
- Trade interfaces

## UI Components
- Sparkline charts
- Price change badges
- Buy/sell buttons
- Watchlists

## Visual Style
- Trustworthy finance
- Blue professionalism
- Simple trading
- Beginner-friendly
1Password website screenshot

1Password

Security
MinimalDark
## Color Palette
- Primary: #0572EC (1P Blue)
- Background: #1A1A1D, #252529
- Text: #FFFFFF, #8E8E93
- Accent: #4BB543

## Typography
- Font: -apple-system, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 14px

## Layout Principles
- Vault sidebar
- Item detail views
- Search prominence
- Category organization

## UI Components
- Masked passwords
- Copy buttons
- Strength meters
- Security alerts

## Visual Style
- Security-focused
- Vault metaphor
- Locked/unlocked states
- Trust through design
LinkedIn website screenshot

LinkedIn

Social
MinimalLight
## Color Palette
- Primary: #0A66C2 (LinkedIn Blue)
- Background: #FFFFFF, #F4F2EE
- Text: #000000, #666666
- Accent: #01754F (Green)

## Typography
- Font: -apple-system, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 14px

## Layout Principles
- Profile-centric
- Feed with cards
- Right sidebar for ads
- Connection suggestions

## UI Components
- Rounded corners (8px)
- Profile cards
- Reaction options
- Job listings

## Visual Style
- Professional networking
- Business-appropriate
- Trust indicators
- Achievement focus
BBC News website screenshot

BBC News

Publishing
MinimalLight
## Color Palette
- Primary: #B80000 (BBC Red)
- Background: #FFFFFF, #F6F6F6
- Text: #222222, #5A5A5A
- Accent: #3F3F42

## Typography
- Font: Reith Sans, BBC Reith Serif
- Headings: 700 weight
- Body: 400 weight, 16px

## Layout Principles
- Headline hierarchy
- Regional sections
- Live updates
- Video prominence

## UI Components
- Bordered cards
- Live indicators
- Topic tags
- Share buttons

## Visual Style
- Trusted journalism
- Red accent on neutral
- Clear hierarchy
- Global perspective
Medium website screenshot

Medium

Publishing
MinimalLight
## Color Palette
- Primary: #000000
- Background: #FFFFFF
- Text: #242424, #6B6B6B
- Accent: #1A8917 (Green)

## Typography
- Font: sohne (sans), Charter (serif)
- Headings: Charter, 700 weight
- Body: Charter, 400 weight, 21px, 1.58 line-height

## Layout Principles
- Single-column reading
- Maximum 680px content width
- Generous margins
- Minimal distractions

## UI Components
- Almost no borders
- Clap button
- Highlight to share
- Reading progress bar

## Visual Style
- Pure reading focus
- Elegant typography
- Subtle interactions
- Literary aesthetic
Calendly website screenshot

Calendly

Productivity
MinimalLight
## Color Palette
- Primary: #006BFF (Calendly Blue)
- Background: #FFFFFF, #FAFAFA
- Text: #1A1A1A, #476788
- Accent: #00A86B

## Typography
- Font: Circular, system sans-serif
- Headings: 700 weight
- Body: 400 weight, 14-16px

## Layout Principles
- Calendar-centric
- Time slot grids
- Booking confirmation
- Availability settings

## UI Components
- Time slot buttons
- Calendar pickers
- Timezone selectors
- Confirmation cards

## Visual Style
- Scheduling clarity
- Time zone awareness
- Clean booking flow
- Professional simplicity
OpenSea website screenshot

OpenSea

Web3
MinimalLight
## Color Palette
- Primary: #2081E2 (OpenSea Blue)
- Background: #FFFFFF, #FBFDFF
- Text: #04111D, #707A83
- Accent: #8247E5

## Typography
- Font: Poppins, system sans-serif
- Headings: 600 weight
- Body: 400 weight, 14px

## Layout Principles
- NFT grid galleries
- Collection pages
- Profile showcases
- Auction interfaces

## UI Components
- NFT cards
- Bid buttons
- Rarity indicators
- Wallet connection

## Visual Style
- NFT artwork focus
- Collection aesthetics
- Marketplace clarity
- Web3 native
Google website screenshot

Google

Tech
MinimalLight
## Color Palette
- Primary: #4285F4 (Google Blue)
- Secondary accents: #EA4335 (Red), #FBBC04 (Yellow), #34A853 (Green)
- Background: #FFFFFF
- Text: #202124 (primary), #5F6368 (secondary)

## Typography
- Font Family: Google Sans, Product Sans fallback to system sans-serif
- Headings: 400-500 weight, generous letter-spacing
- Body: 14-16px, regular weight, high readability

## Layout Principles
- Extreme minimalism with maximum whitespace
- Content-first hierarchy, single focal point
- Centered layouts with balanced negative space
- Grid: Simple, often single-column for key interactions

## UI Components
- Buttons: Rounded corners (4px), subtle shadows on hover
- Inputs: Clean borders, ample padding, clear focus states
- Cards: Minimal elevation, light borders or subtle shadows
- Icons: Outlined style, consistent 24px sizing

## Visual Style
- No gradients, flat solid colors
- Micro-interactions on hover/focus
- Accessibility-first contrast ratios
- Clean, functional, purposeful design
Notion website screenshot

Notion

SaaS
MinimalLight
## Color Palette
- Primary: #000000 (Black)
- Background: #FFFFFF, #FBFBFA (off-white)
- Accents: #EB5757 (red), #F2C94C (yellow), #6FCF97 (green)
- Text: #37352F (primary), #9B9A97 (secondary)

## Typography
- Font Family: Inter, system sans-serif
- Headings: 600-700 weight, tight spacing
- Body: 16px, regular weight, 1.5 line-height
- Monospace for inline code

## Layout Principles
- Content-first, minimal chrome
- Flexible blocks-based layout thinking
- Maximum readability with constrained line lengths (680px)
- Subtle dividers, mostly whitespace for separation

## UI Components
- Buttons: Minimal, ghost style default, subtle fills
- Inputs: Borderless until focus, clean and simple
- Cards: No shadow, light borders or background change
- Toggles: Simple, functional, no decoration

## Visual Style
- Illustrations: Minimal line art, hand-drawn feel
- Icons: Outlined, thin stroke, 20px default
- No gradients, purely flat design
- Emoji as functional icons where appropriate
- Focus on content, not container
TalkbackAI website screenshot

TalkbackAI

AI/Tech
MinimalLight
Develop a design system for a website similar to TalkbackAI, emphasizing a clean, minimal style that aligns with a tech-focused brand. The color scheme should be light and modern, utilizing the following color palette:

- **Primary Color**: #4E4BFB (a deep blue used for important buttons and headings)
- **Secondary Color**: #17C964 (a bright green, for highlights and success messages)
- **Accent Color**: #9D80FF (a soft lavender, used sparingly for emphasis)
- **Background Color**: #FFFFFF (pure white for a clean backdrop)
- **Text Color**: #1F2937 (a dark gray for high legibility in body text)

### Typography
- **Headings**: Use the 'Inter' font family, bold weight for headings. Sizes should range from 48px for H1, decreasing incrementally to 18px for H6.
- **Body Text**: Also use 'Inter', regular weight with a base size of 16px.

### UI Components
- **Buttons**: Primary buttons should have a background color of #4E4BFB with white text. Use a slightly rounded corner (4px radius).
- **Cards/Modals**: Background color should be #FFFFFF with a subtle shadow to lift it off the page slightly (0px 4px 12px rgba(0, 0, 0, 0.1)).
- **Links**: Use the primary color for links, underlined on hover.

### Layout Principles
- **Spacing**: Use a base grid unit of 8px for padding and margin.
- **Alignment**: Center-align text on focus components like modals and forms.

### Visual Style Guidelines
- Maintain a clean and open look with ample white space to ensure content is digestible.
- Use button and link animations subtly for hover states to maintain a smooth user experience.

This guide should inform a cohesive and easy-to-navigate interface, reinforcing the brand's commitment to simplicity and functionality in AI technology.
Google website screenshot

Google

Tech
MinimalLight
Create a minimalistic design system inspired by Google. Use a light color scheme with the following color palette: primary color #4285F4 (used for buttons and links), secondary color #34A853 (used for confirmation actions), accent color #FBBC05 (for emphasis or alerts), background color #FFFFFF, and text color #202124.

Typography:
- Heading Font: Google Sans
- Body Font: Arial
- Base Font Size: 14px
- Heading Sizes:
  - H1: 32px, Bold
  - H2: 24px, Bold
  - H3: 18px, Bold
- Line Height: 1.5

Layout:
- Use ample white space with margins of 20px.
- Consistent padding of 16px in containers.
- Grid layout with a 12-column structure.

UI Components:
- Buttons:
  - Primary Button: Background color #4285F4, white text, border-radius 4px, padding 10px 20px
  - Secondary Button: Transparent background, border-color #4285F4, text color #4285F4, border-radius 4px

Visual Style:
- Maintain simplicity with no unnecessary embellishments.
- Ensure accessibility with high contrast between text and background.
- Use icons sparingly to support text content.

Explore Other Styles