Revenue & Growth

Design Guide

Reference for all design capabilities and options. Use these snippets when briefing projects.

Color Palettes

Warm Pink

Gradient: pink-500 → rose-500 → orange-400

'Warm Pink palette with gradient accents'

Cool Slate

Neutral base with slate grays

'Cool Slate palette for professional, minimal design'

Vibrant Multi

Bright, colorful accents for energetic feel

'Vibrant Multi palette with bright accent colors'

Dark Mode

Dark theme with light text and vibrant accents

'Dark Mode palette with slate grays and bright accents'

Design Styles

Modern Minimalist

Clean & Simple

Lots of whitespace, minimal decorations

'Modern Minimalist style with clean layout and whitespace'

Bold Gradient

Eye-Catching

Vibrant gradients and dynamic feel

'Bold Gradient style with vibrant color transitions'

Playful & Fun

😊✨🎉

Light pastels, friendly tone, approachable

'Playful Fun style with light pastels and friendly feel'

Dark Professional

Sophisticated

Dark backgrounds, premium feel

'Dark Professional style for premium, sophisticated look'

CTA Button Corners

Sharp Corners

Industrial, bold, geometric feel

rounded-none\n// or borderRadius: '0px'

Rounded Medium

Modern, friendly, balanced

rounded-lg\n// or borderRadius: '8px'

Pill Shaped

Soft, approachable, organic

rounded-full\n// or borderRadius: '50px'

Layout Patterns

Centered Content

Hero sections, landing pages, CTAs

max-w-4xl mx-auto\ntext-center\n// Hero, landing, form focus

Side-by-Side Grid

grid grid-cols-2 gap-4\n// or md:grid-cols-3 lg:grid-cols-4

Full Width Sections

w-full\n// Alternating full-width sections\n// Great for landing pages

Card-Based Layout

grid gap-6\nrounded-2xl shadow-lg\nbg-white\n// Card-based, modular approach

Icon Styles

Lucide React Icons

All icons from lucide-react library

Icon usage examples:

✓ Size: w-4 h-4 (small), w-6 h-6 (medium), w-8 h-8 (large)
✓ Colors: text-slate-600, text-pink-500, text-white
✓ Styling: Add alongside text with gap, or standalone
✓ Animation: Add animate-spin for loading states

import { Sparkles } from 'lucide-react';

<Sparkles className="w-6 h-6 text-pink-500" />

Typography

Large Heading (text-4xl, font-bold)

Hero titles, page headings

Section Heading (text-2xl, font-bold)

Major section titles

Body Text (text-lg, font-semibold)

Feature descriptions, body copy

Small Text (text-sm, text-slate-600)

Descriptions, helper text, metadata

Headings: font-bold\nBody: font-semibold or regular\nSmall: text-sm text-slate-600

Spacing & Whitespace

Sections

py-24 or py-32 - generous vertical breathing room

Cards & Containers

p-6 or p-8 - internal padding

Elements

mb-4, gap-4 - breathing room between elements

Sections: py-24 or py-32\nCards: p-6 or p-8\nGap: gap-4, gap-6, gap-8\nmb-4, mt-6, etc.

Shadow & Depth

Subtle Shadow

shadow-sm\n// Light, minimal depth

Medium Shadow

shadow-lg\n// Standard depth, card hover state

Heavy Shadow

shadow-2xl\n// Deep elevation, modals, featured

Animation & Motion

Fade & Slide

Initial states: opacity-0, y-20. Animated: opacity-1, y-0

Hover Effects

hover:shadow-lg, hover:scale-105, hover:bg-accent

Loading States

animate-spin for spinners, opacity transitions

framer-motion for complex animations\ntransition-all duration-300\nhover:shadow-xl hover:scale-105

Example Design Brief

"Design this feature in Warm Pink palette, Bold Gradient style, with pill-shaped CTAs. Use a centered content layout with generous spacing (py-24), card-based modular sections, and medium shadows (shadow-lg). Include Lucide icons (w-6 h-6) in pink-500. Add fade & slide animations on scroll. Typography: bold headings, semibold body text."

Design Brief Template:
Palette: [Warm Pink / Cool Slate / Vibrant Multi / Dark Mode]
Style: [Minimalist / Bold Gradient / Playful / Dark Professional]
Buttons: [Sharp / Rounded / Pill]
Layout: [Centered / Grid / Sections / Cards]
Shadows: [Subtle / Medium / Heavy]
Animations: [Fade/Slide / Hover Effects / Loading]

Use these snippets and terms when briefing projects for clear, consistent design direction.