DreamBuilder Wayfinder Theme Guide
A comprehensive guide to maintain consistent styling across the website
Primary Colors
Primary
hsl(221.2, 83.2%, 53.3%)
bg-primary
Primary Foreground
hsl(210, 40%, 98%)
bg-primary-foreground
Blue 600
rgb(37, 99, 235)
bg-blue-600
Blue 100
rgb(219, 234, 254)
bg-blue-100
Secondary Colors
Secondary
hsl(220, 14.3%, 95.9%)
bg-secondary
Secondary Foreground
hsl(220.9, 39.3%, 11%)
bg-secondary-foreground
Muted
hsl(220, 14.3%, 95.9%)
bg-muted
Muted Foreground
hsl(220, 8.9%, 46.1%)
bg-muted-foreground
Background Colors
Background
hsl(0, 0%, 100%)
bg-background
Foreground
hsl(224, 71.4%, 4.1%)
bg-foreground
Gray 50
rgb(249, 250, 251)
bg-gray-50
Blue 50
rgb(239, 246, 255)
bg-blue-50
Gradient Examples
Blue to White Gradient
bg-gradient-to-b from-blue-50 to-white
Blue to Indigo Gradient
bg-gradient-to-r from-blue-700 to-indigo-700
Usage Guidelines
When creating new components or pages for the DreamBuilder Wayfinder website, follow these guidelines to maintain consistency:
- Use the color palette defined in this guide. Avoid introducing new colors unless absolutely necessary.
- Maintain consistent typography by using the heading and text styles documented in this guide.
- Reuse existing components whenever possible. If you need to create a new component, follow the styling patterns established in this guide.
- Follow the spacing guidelines to create a harmonious layout. Use the container class for consistent content width.
- Use the shadcn/ui components for UI elements like buttons, cards, and form inputs. These components are already styled to match the design system.
- For icons, use the Lucide React library. This ensures consistent icon styling throughout the website.
- Ensure all components are responsive and look good on mobile, tablet, and desktop screens.