STAYBOOKED Style Guide
Complete brand guidelines and design system for STAYBOOKED. This guide ensures consistency across all touchpoints and provides leverage for our visual identity.
Brand Overview
Brand Personality
- Professional: Trustworthy and reliable for business communications
- Warm: Approachable and human-centered
- Modern: Contemporary and tech-forward
- Wellness-focused: Calming and spa-like aesthetic
Target Audience
- Nail Salons & Spas: Primary service providers in Los Angeles
- Business Owners: Focused on reducing no-shows and increasing bookings
- Tech-Forward: Open to automation and digital solutions
- Quality-Focused: Value professional, reliable service
Color Palette
Primary Colors
Primary
Primary
#2D3748
Warm dark charcoal
Secondary
Secondary
#4A5568
Warm medium gray
Tertiary
Tertiary
#718096
Warm light gray
Accent
Accent
#2B6CB0
Warm blue accent
Brand Colors
WhatsApp
WhatsApp Green
#25D366
Brand accent color
Coral
Coral
#E67E5A
Primary button color
Ceramic
Ceramic
#FAF9F6
Background base
Background Gradient
Soft peach to cream gradient conveying elegance, calmness, and modern wellness aesthetic
background: linear-gradient(135deg, #FFE5D9 0%, #F5E6D3 25%, #F0E6D2 50%, #F5F0E8 75%, #FDFCF8 100%);
Typography
Font Hierarchy
Heading 1
text-4xl font-semibold text-primary
Heading 2
text-3xl font-semibold text-primary
Heading 3
text-2xl font-semibold text-primary
Heading 4
text-xl font-semibold text-primary
Body Large
text-lg text-secondary
Body Regular
text-base text-secondary
Body Small
text-sm text-tertiary
Font Usage Guidelines
- Headings: Use text-primary for all headings to maintain hierarchy
- Body Text: Use text-secondary for main content and text-tertiary for supporting information
- Interactive Elements: Use text-accent for links and interactive states
- Emphasis: Use text-warm for special emphasis or highlights
Components
Buttons
Primary Button
<button class="inline-flex items-center justify-center rounded-md px-4 py-2 text-white text-sm font-semibold shadow-sm hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wa focus-visible:ring-offset-2" style="background-color: #E67E5A;">
Get Started
</button>
Secondary Button
<button class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-primary text-sm font-semibold shadow-sm hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wa focus-visible:ring-offset-2">
Learn More
</button>
Cards
Content Card
Card Title
This is a content card with shadow and rounded corners. Perfect for displaying information sections.
<div class="rounded-lg bg-white p-5 shadow-card">
<h5 class="font-medium text-primary mb-2">Card Title</h5>
<p class="text-secondary">Card content goes here.</p>
</div>
Feature Card
Feature Name
Feature description
- • Feature benefit 1
- • Feature benefit 2
- • Feature benefit 3
<div class="rounded-xl bg-white p-6 shadow-card">
<h5 class="text-lg font-semibold text-primary mb-2">Feature Name</h5>
<p class="text-sm text-tertiary mb-4">Feature description</p>
<ul class="space-y-2 text-sm text-secondary">
<li>• Feature benefit</li>
</ul>
</div>
Form Elements
<label class="block text-sm font-medium text-primary mb-2">Input Label</label>
<input type="text" placeholder="Enter text here" class="w-full rounded-md border border-gray-300 px-3 py-2 text-primary shadow-sm focus:outline-none focus:ring-2 focus:ring-wa focus:border-transparent">
Logo & Branding
Logo Usage
STAYBOOKED
The logo consists of a WhatsApp green dot followed by the company name in a semibold font. This creates a clear connection to our WhatsApp-based service.
<div class="flex items-center gap-2">
<span class="inline-block h-2.5 w-2.5 rounded-full bg-wa"></span>
<span class="font-semibold text-primary">STAYBOOKED</span>
</div>
Brand Guidelines
- Always maintain proper spacing around the logo
- Use the WhatsApp green dot consistently across all materials
- Maintain the warm color palette for brand consistency
- Ensure accessibility with proper contrast ratios
Spacing & Layout
Spacing Scale
4px - xs
6px - sm
8px - base
12px - md
16px - lg
24px - xl
Layout Principles
- Use consistent padding and margins throughout
- Maintain proper visual hierarchy with spacing
- Ensure responsive design across all breakpoints
- Use grid systems for consistent layouts
Accessibility Guidelines
Color Contrast
- • Primary text (#2D3748) on white: 12.63:1 ratio
- • Secondary text (#4A5568) on white: 7.25:1 ratio
- • All combinations meet WCAG AA standards
Focus States
- • Use focus-visible:ring-2 for keyboard navigation
- • WhatsApp green (#25D366) for focus indicators
- • Ensure all interactive elements are focusable
Implementation
CSS Classes
/* Enhanced font color palette with warm hues */
.text-primary { color: #2D3748; } /* Warm dark charcoal */
.text-secondary { color: #4A5568; } /* Warm medium gray */
.text-tertiary { color: #718096; } /* Warm light gray */
.text-accent { color: #2B6CB0; } /* Warm blue accent */
.text-warm { color: #744210; } /* Warm brown for emphasis */
/* Hover states with hue */
.hover-primary:hover { color: #1A202C; }
.hover-accent:hover { color: #2C5282; }
/* Button color scheme */
/* Primary buttons: Coral background with white text */
.btn-primary { background-color: #E67E5A; color: white; }
/* Secondary buttons: White background with gray border and dark text */
.btn-secondary { background-color: white; border: 1px solid #D1D5DB; color: #2D3748; }
/* Background gradient */
body {
background: linear-gradient(135deg, #FFE5D9 0%, #F5E6D3 25%, #F0E6D2 50%, #F5F0E8 75%, #FDFCF8 100%);
background-attachment: fixed;
min-height: 100vh;
}