Style Guide Overview

This guide defines the visual and interaction standards for the Breesy application.

Design Principles

1. Clarity - Information should be immediately understandable
2. Efficiency - Minimize clicks to accomplish tasks
3. Consistency - Same patterns across all features
4. Accessibility - Usable by everyone

Technology Stack

• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - React component library
• Lucide Icons - Icon library
• Framer Motion - Animations

Color Palette

Primary Colors

Name	Hex	Usage
Primary	#0891b2	Main brand color, CTAs
Primary Dark	#0d3b4c	Headers, emphasis
Primary Light	#67e8f9	Highlights, accents

Neutral Colors

Name	Hex	Usage
Background	#ffffff	Page background
Surface	#f8fafc	Card backgrounds
Border	#e2e8f0	Borders, dividers
Text	#1e293b	Primary text
Muted	#64748b	Secondary text

Status Colors

Name	Hex	Usage
Success	#22c55e	Success states
Warning	#f59e0b	Warnings
Error	#ef4444	Errors
Info	#3b82f6	Information

Typography

Font Family

font-family: 'Inter', system-ui, -apple-system, sans-serif;

Scale

Name	Size	Weight	Usage
H1	2.25rem	700	Page titles
H2	1.875rem	600	Section headers
H3	1.5rem	600	Subsections
H4	1.25rem	500	Card headers
Body	1rem	400	Body text
Small	0.875rem	400	Captions, labels
XSmall	0.75rem	400	Fine print

Spacing

Use Tailwind’s spacing scale:

Name	Value	Usage
xs	0.25rem (4px)	Tight spacing
sm	0.5rem (8px)	Small gaps
md	1rem (16px)	Default spacing
lg	1.5rem (24px)	Section spacing
xl	2rem (32px)	Large gaps
2xl	3rem (48px)	Page margins

Components

Buttons

// Primary action
<Button>Save Changes</Button>

// Secondary action
<Button variant="outline">Cancel</Button>

// Destructive action
<Button variant="destructive">Delete</Button>

// Ghost/subtle
<Button variant="ghost">Learn More</Button>

Cards

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    {/* Content */}
  </CardContent>
  <CardFooter>
    {/* Actions */}
  </CardFooter>
</Card>

Forms

• Labels above inputs
• Helpful placeholder text
• Clear error messages
• Consistent field widths

Tables

• Zebra striping for readability
• Sortable columns where applicable
• Pagination for large datasets
• Row hover states

Icons

Use Lucide icons consistently:

import { Phone, Mail, Calendar, User } from 'lucide-react';

// Standard size
<Phone className="h-4 w-4" />

// With text
<span className="flex items-center gap-2">
  <Phone className="h-4 w-4" />
  Call Customer
</span>

Dark Mode

Support both light and dark modes:

// Use CSS variables for colors
className="bg-background text-foreground"

// Or explicit dark variants
className="bg-white dark:bg-slate-900"

Responsive Design

Mobile-first approach:

// Stack on mobile, side-by-side on desktop
className="flex flex-col md:flex-row gap-4"

// Hide on mobile
className="hidden md:block"

// Show only on mobile
className="md:hidden"

Animations

Keep animations subtle and purposeful:

// Fade in
<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.2 }}
>

// Slide in
<motion.div
  initial={{ y: 10, opacity: 0 }}
  animate={{ y: 0, opacity: 1 }}
>

Accessibility

• Minimum contrast ratio: 4.5:1
• Focus states on all interactive elements
• Proper ARIA labels
• Keyboard navigation support