Light Design Prompts

## 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

## 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

## 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

## 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

## Color Palette
- Primary: #000000
- Background: #FFFFFF, #ECEFF1
- Text: #000000, #767677
- Accent: #FF0000

## Typography
- Font: AdihausDIN, Helvetica
- Headings: 700 weight, uppercase
- Body: 400 weight, 14px

## Layout Principles
- Three stripes motif
- Product category focus
- Athlete collaborations
- Sustainability messaging

## UI Components
- Angular design elements
- Product cards
- Filter dropdowns
- Size guides

## Visual Style
- Sport heritage
- Street culture
- Bold uppercase text
- Clean product focus

## Color Palette
- Primary: #5C6AC4 (Shopify Purple), #96BF48 (Green)
- Background: #FFFFFF, #F4F6F8
- Text: #212B36, #637381
- Accent: #007ACE

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

## Layout Principles
- Dashboard card layouts
- Left sidebar navigation
- Data tables
- Wizard-style flows

## UI Components
- Rounded corners (4-8px)
- Polaris design system
- Banner notifications
- Progress indicators

## Visual Style
- Merchant-focused clarity
- Helpful illustrations
- Green success states
- Professional warmth

## 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

## Color Palette
- Primary: #FC4C02 (Strava Orange)
- Background: #FFFFFF, #F7F7F8
- Text: #242428, #6D6D78
- Accent: #2D2D32

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

## Layout Principles
- Activity feed
- Map routes prominent
- Segment leaderboards
- Stats dashboards

## UI Components
- Kudos button
- Elevation charts
- Segment crowns
- Activity cards

## Visual Style
- Athletic achievement
- Orange energy
- Route visualization
- Community competition

## 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

## 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

## Color Palette
- Primary: #F06A6A (Coral)
- Background: #FFFFFF, #F9F8F8
- Text: #1E1F21, #6D6E6F
- Accent: #4573D2, #5DA283

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

## Layout Principles
- Project sidebar
- List and board views
- Timeline/Gantt
- My tasks focus

## UI Components
- Checkmark completion
- Due date pickers
- Assignee avatars
- Progress indicators

## Visual Style
- Warm coral accent
- Celebratory creatures
- Achievement animations
- Approachable business

## Color Palette
- Primary: #EA4C89 (Dribbble Pink)
- Background: #FFFFFF, #F8F7F4
- Text: #0D0C22, #6E6D7A
- Accent: #FFD100, #00D68F

## Typography
- Font: Haas Grotesk, Helvetica
- Headings: 700 weight
- Body: 400 weight, 15px

## Layout Principles
- Masonry grid for shots
- Card-based browsing
- Full-bleed images
- Minimal navigation

## UI Components
- Rounded corners (8-16px)
- Like animations (heart)
- Collection boards
- Designer profiles

## Visual Style
- Portfolio showcase focus
- Pink accent throughout
- Playful hover states
- Image-first design

## 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

## Color Palette
- Primary: #000000
- Background: #FFFFFF, #F7F7F7
- Text: #121212, #666666
- Accent: #567B95

## Typography
- Font: nyt-cheltenham (serif), nyt-franklin
- Headings: 700 weight, serif
- Body: 400 weight, 18-20px

## Layout Principles
- Broadsheet grid
- Section hierarchy
- Longform reading
- Breaking news banners

## UI Components
- Minimal borders
- Section headers
- Byline styling
- Comment sections

## Visual Style
- Newspaper heritage
- Authoritative serif
- Photojournalism
- Editorial gravitas

## 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

## 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

## Color Palette
- Primary: #003580 (Booking Blue)
- Secondary: #FEBB02 (Yellow)
- Background: #FFFFFF, #F5F5F5
- Text: #262626, #6B6B6B

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

## Layout Principles
- Search-first design
- Filter sidebars
- Property cards
- Review prominence

## UI Components
- Yellow CTAs
- Star ratings
- Price calendars
- Urgency badges

## Visual Style
- Deal-focused
- Trust through reviews
- Urgency messaging
- Blue professional base

## 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

## Color Palette
- Primary: #9FE870 (Wise Green)
- Secondary: #2E3238 (Navy)
- Background: #FFFFFF, #F2F5F7
- Text: #2E3238, #5D7079

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

## Layout Principles
- Step-by-step transfers
- Currency calculator prominence
- Trust indicators
- Clean onboarding

## UI Components
- Rounded corners (8-12px)
- Flag icons for currencies
- Progress steps
- Comparison tables

## Visual Style
- Transparent pricing focus
- Globe/international imagery
- Trustworthy and open
- Green growth theme

## 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

## 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

## Color Palette
- Primary: #F56400 (Etsy Orange)
- Background: #FFFFFF, #FAF9F7
- Text: #222222, #595959
- Accent: #A6192E, #2F466C

## Typography
- Font: Graphik, Guardian Egyptian
- Headings: 500-700 weight
- Body: 400 weight, 15px

## Layout Principles
- Handmade aesthetic
- Image-forward grids
- Category browsing
- Shop-centric pages

## UI Components
- Soft rounded corners (8px)
- Favorite hearts
- Shop badges
- Personalized recommendations

## Visual Style
- Artisanal warmth
- Handcrafted feel
- Personal seller stories
- Marketplace trust

## Color Palette
- Primary: #FF3008 (DoorDash Red)
- Background: #FFFFFF, #F5F5F5
- Text: #191919, #767676
- Accent: #00838A

## Typography
- Font: TT Norms Pro, system sans-serif
- Headings: 700 weight
- Body: 400 weight, 14px

## Layout Principles
- Restaurant discovery
- Category carousels
- Map/list toggle
- Cart sidebar

## UI Components
- Restaurant cards
- Delivery time badges
- Rating stars
- Add to cart buttons

## Visual Style
- Food photography
- Urgency in delivery
- Local discovery
- Red action emphasis

## Color Palette
- Primary: #D32323 (Yelp Red)
- Background: #FFFFFF, #F5F5F5
- Text: #333333, #666666
- Accent: #41A700

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

## Layout Principles
- Search-centric
- Map integration
- Review prominence
- Business listings

## UI Components
- Star ratings
- Review cards
- Photo galleries
- Filter chips

## Visual Style
- Review-focused
- Local business
- Trust through volume
- Red brand color

## Color Palette
- Primary: #FF9900 (Amazon Orange)
- Secondary: #146EB4 (Blue)
- Background: #FFFFFF, #EAEDED
- Text: #0F1111, #565959

## Typography
- Font: Amazon Ember, Arial
- Headings: 700 weight
- Body: 400 weight, 14px

## Layout Principles
- Dense product grids
- Horizontal scrolling carousels
- Mega navigation menus
- Review prominence

## UI Components
- Yellow buttons
- Star ratings
- Price emphasis
- Buy box layouts

## Visual Style
- Information density
- Deal/urgency messaging
- User review focus
- Utilitarian design

## Color Palette
- Primary: #000000 (Black), #FFFFFF (White)
- Accents: Product-specific colors (iPhone purple, etc.)
- Background: #FBFBFD (off-white), #000000 (dark sections)
- Text: #1D1D1F (primary), #86868B (secondary)

## Typography
- Font Family: SF Pro Display, SF Pro Text, system
- Headings: Semibold, large scale (48-80px), tight tracking
- Body: 17-21px, regular weight, generous line-height (1.47)
- Text often centered for dramatic impact

## Layout Principles
- Full-viewport sections, scroll-triggered content
- Product as hero, massive scale imagery
- Centered single-column for text content
- Strategic use of sticky positioning

## UI Components
- Buttons: Compact, rounded (980px radius pill), text-link style CTAs
- Navigation: Minimal, blurred backdrop, compact
- Cards: Edge-to-edge images, no visible borders
- Transitions: Smooth 400ms, ease-out curves

## Visual Style
- Product photography at highest quality
- Dramatic lighting, studio-shot feel
- Deep blacks, pure whites, selective color
- Scroll-triggered animations (fade, scale, parallax)
- Cinematic video backgrounds
- Details matter - pixel-perfect alignment

## 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

## 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

## Color Palette
- Primary: #FF7A59 (HubSpot Orange)
- Secondary: #00BDA5 (Teal), #516F90 (Slate)
- Background: #FFFFFF, #F5F8FA (light gray sections)
- Text: #33475B (primary), #516F90 (secondary)

## Typography
- Font Family: Lexend Deca, Queens (display), system sans-serif
- Headings: Semi-bold to bold, friendly rounded letterforms
- Body: 16-18px, regular weight, 1.6 line-height

## Layout Principles
- Generous whitespace, breathing room between sections
- Clear visual hierarchy with size and color contrast
- Two to three column grids, responsive breakpoints
- Alternating content blocks (image left/right)

## UI Components
- Buttons: Rounded (24px radius), solid fills, clear hierarchy
- Cards: White background, subtle shadow, rounded corners
- Forms: Friendly labels, helpful microcopy, validation states
- Icons: Filled style, consistent stroke width, playful

## Visual Style
- Illustrations: Custom, friendly characters and scenes
- Warm and approachable tone
- Subtle gradients for depth (orange to coral)
- Accessible color combinations throughout

## Color Palette
- Primary: #FF5A5F (Airbnb Coral/Rausch)
- Secondary: #00A699 (Teal), #FC642D (Orange)
- Background: #FFFFFF, #F7F7F7 (sections)
- Text: #484848 (primary), #767676 (secondary)

## Typography
- Font Family: Cereal, Circular, system sans-serif
- Headings: Bold, friendly curves, 24-48px
- Body: 16px, regular weight, 1.5 line-height

## Layout Principles
- Card-based content discovery
- Image-forward layouts (16:9, square crops)
- Horizontal scrolling collections
- Search-centric navigation patterns

## UI Components
- Buttons: Rounded pills, gradient hover states
- Cards: Large imagery, subtle shadow on hover, 12px radius
- Search: Prominent, segmented inputs, floating style
- Modals: Centered, generous padding, clear actions

## Visual Style
- Photography-first (high quality, authentic, diverse)
- Soft shadows for elevation (0 2px 8px rgba)
- Rounded everything (buttons, cards, avatars)
- Warm and welcoming tone
- Micro-interactions on all interactive elements

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.

Create a design system for a SaaS platform similar to HubSpot, focusing on a Friendly and Light style.

**Color Palette:**

- Primary Color: #FF7A59 (used for buttons and highlights)
- Secondary Color: #FF5722 (accent color)
- Background Color: #F5F5F5 (soft, light background)
- Text Color: #33475B (used for primary text)

**Typography:**

- Heading Font: "Merriweather", serif; use it for headlines and emphasis with a focus on elegance and readability. Suggested sizes:
  - H1: 48px
  - H2: 36px
  - H3: 28px

- Body Font: "Open Sans", sans-serif; ensure readability across all devices. Suggested sizes:
  - Body Text: 18px
  - Small Text: 14px

**Spacing and Layout:**

- Use generous spacing to create a clean, breathable layout.
- Standard padding for elements is 20px.
- Maintain a consistent grid layout for alignment.

**UI Components:**

- Buttons:
  - Primary: Background #FF7A59, text color #FFFFFF, border-radius 4px.
  - Secondary: Transparent background, border with primary color, text color #FF7A59.

- Navigation:
  - Fixed top, with a height of 60px, background color #FFFFFF.
  - Text color #33475B with hover effects using the primary color.

**Icons and Imagery:**

- Use minimalist icons that align with the brand's friendly and approachable tone.
- Photography should convey teamwork and innovation, using warm, natural lighting.

**Visual Guidelines:**

- Use the accent color sparingly to draw attention to CTA elements.
- Maintain a balance between text and visual elements to keep the interface engaging yet straightforward.

This guide should provide a blueprint for recreating a website with a similar aesthetic and functional style to HubSpot.

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.