Friendly Design Prompts

## Color Palette
- Primary: #58CC02 (Duolingo Green)
- Background: #FFFFFF, #F7F7F7
- Text: #4B4B4B, #777777
- Accent: #FF4B4B, #FFC800, #1CB0F6

## Typography
- Font: Din Round, Nunito
- Headings: 700 weight, rounded
- Body: 400 weight, 16px

## Layout Principles
- Gamified learning paths
- Progress trees
- Streak tracking
- Lesson cards

## UI Components
- Rounded everything (16px+)
- XP bars
- Heart lives
- Character mascots

## Visual Style
- Playful illustrations
- Celebration animations
- Owl mascot (Duo)
- Achievement badges

## Color Palette
- Primary: #0079BF (Trello Blue)
- Background: #FFFFFF, board colors vary
- Text: #172B4D, #5E6C84
- Accent: #61BD4F, #F2D600, #FF9F1A

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

## Layout Principles
- Kanban board focus
- Drag and drop
- List columns
- Card detail modals

## UI Components
- Rounded corners (8px)
- Labels/tags
- Checklists
- Cover images

## Visual Style
- Board background images
- Colorful labels
- Simple card design
- Visual organization

## Color Palette
- Primary: #4A154B (Aubergine)
- Secondary: #36C5F0, #2EB67D, #ECB22E, #E01E5A
- Background: #FFFFFF, #F8F8F8
- Text: #1D1C1D, #616061

## Typography
- Font: Lato, system sans-serif
- Headings: 700-900 weight
- Body: 400 weight, 15px line-height 1.5

## Layout Principles
- Three-column layout (sidebar, channels, main)
- Compact message threading
- Persistent navigation sidebar
- Floating compose areas

## UI Components
- Rounded corners (4-8px)
- Emoji reactions prominent
- Status indicators (dots)
- Threaded conversations

## Visual Style
- Playful but professional
- Custom emoji and reactions
- Colorful sidebar themes
- Friendly illustrations

## 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: #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: #FF8B64 (Coral Orange)
- Background: #FEF4EF, #FFFFFF
- Text: #2C3958, #6B7A99
- Accent: #FFDC69, #85D5DE

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

## Layout Principles
- Course/journey paths
- Meditation cards
- Daily recommendations
- Progress tracking

## UI Components
- Rounded everything
- Play/pause meditation
- Streak counters
- Sleep sounds

## Visual Style
- Calming illustrations
- Warm color palette
- Friendly characters
- Peaceful atmosphere

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

### PhilAroma Design System

**Brand Name:** PhilAroma  
**Category:** E-commerce  
**Overall Style:** Friendly  

#### Color Scheme
- **Primary Color:** #C01E1C (Red)
- **Secondary Color:** #8BAD00 (Lime Green)
- **Accent Color:** #FFFFFF (White)
- **Background Color:** #7C9473 (Sage Green)
- **Text Color:** #FFFFFF (White)

#### Typography
- **Heading Font:** Arial, sans-serif; 
  - **Font Weight:** Bold
  - **Sizes:**
    - H1: 48px
    - H2: 36px
    - H3: 28px
- **Body Font:** Arial, sans-serif;
  - **Font Weight:** Normal
  - **Sizes:** 16px

#### Layout Principles
- **Navigation:** Fixed top navigation with horizontal links in primary or accent colors.
- **Header:** Full width with primary call-to-action centered.
- **Footer:** Background in secondary color with minimal links in accent color.
- **Card Layouts:** Rounded corners at 8px radius; shadows with soft, diffused edges.

#### UI Component Styles
- **Buttons:**
  - **Primary Button:**
    - Background: Primary color (#C01E1C)
    - Text: Accent color
    - Border radius: 4px
    - Padding: 10px 20px
- **Secondary Button:**
  - Background: Secondary color (#8BAD00)
  - Text: Accent color
  - Border: None

#### Visual Style Guidelines
- **Imagery:** Use bright, natural imagery focusing on freshness and local produce.
- **Icons:** Clean, minimalist style with primary or secondary color fills.
- **Spacing:** Maintain consistent spacing of 16px between elements.

Use this design system as a foundation to create an engaging and user-friendly website for an online store specializing in fresh, locally sourced produce.

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.