Colorful 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: #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: #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: #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: #F40009 (Coca-Cola Red)
- Secondary: #FFFFFF (White), #000000 (Black)
- Background: #F40009 or #FFFFFF depending on section
- Accent: #1E1E1E (dark text on light)

## Typography
- Font Family: TCCC Unity, custom serif for headlines, sans-serif for body
- Headings: Bold, expressive, often curved or dynamic
- Body: Clean sans-serif, 16px, good contrast

## Layout Principles
- Dynamic, flowing layouts with curved elements
- Hero-focused with large product imagery
- Asymmetric balance, breaking grid intentionally
- Strong diagonal movements and wave patterns

## UI Components
- Buttons: Rounded pills, high contrast (white on red)
- Cards: Full-bleed images, minimal borders
- CTAs: Bold, action-oriented, prominent placement
- Icons: Custom illustrated style when possible

## Visual Style
- High saturation, confident color usage
- Product photography as centerpiece
- Lifestyle imagery with emotional appeal
- Smooth curves, no harsh angles
- Energy and movement in static designs

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