SaaS Website Design Prompts

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

## 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: #635BFF (Stripe Purple)
- Gradients: Purple to cyan (#80E9FF), purple to pink
- Background: #0A2540 (dark navy), #FFFFFF (light sections)
- Text: #FFFFFF (on dark), #425466 (on light)

## Typography
- Font Family: Inter, system sans-serif
- Headings: 500-600 weight, tight tracking (-0.02em)
- Body: 16-17px, regular weight, 1.5 line-height
- Code: Berkeley Mono, monospace

## Layout Principles
- Asymmetric layouts with intentional imbalance
- Layered elements with depth (floating cards, code blocks)
- Generous padding, 80-120px section spacing
- Diagonal dividers and angled sections

## UI Components
- Buttons: Rounded (6px), gradient fills for primary CTA
- Code blocks: Syntax highlighted, dark themed
- Cards: Glass-morphism effects, subtle borders, backdrop blur
- Animations: Smooth parallax, GPU-accelerated transforms

## Visual Style
- Rich gradients as primary visual element
- 3D elements and floating UI components
- Animated mesh gradients in heroes
- Technical precision meets artistic expression
- Dark mode as default, light as alternate

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

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.