5.4 KiB
Spanglish Website – Brand & Design Guide
1. Purpose
This document defines the visual identity, branding rules, and design direction for the Spanglish website.
It ensures consistent appearance across the public website, admin dashboard, emails, and marketing materials.
All designers and developers must follow this guide.
2. Brand Identity
2.1 Brand Personality
Spanglish is:
- Friendly
- International
- Social
- Modern
- Trustworthy
- Community-driven
- Inclusive
The visual identity must reflect openness, warmth, and professionalism.
2.2 Brand Values
- Accessibility
- Simplicity
- Human connection
- Cultural exchange
- Reliability
- Growth
These values guide all design decisions.
3. Visual Direction
3.1 Overall Look
The website must feel:
- Clean
- Modern
- Light
- Welcoming
- Organized
The design is inspired by:
- Café culture
- International meetups
- Modern SaaS landing pages
- Community platforms
The hero section uses strong contrast, large typography, and real photography.
3.2 Layout Philosophy
- Mobile-first
- One-column dominant layout
- Large sections with breathing room
- Consistent spacing
- Clear visual hierarchy
Avoid clutter and unnecessary elements.
4. Color System
4.1 Primary Colors
Primary Yellow (Brand Anchor)
- Hex: #FFD84D
- Usage: CTAs, highlights, logo accents
Primary Dark (Text & Contrast)
- Hex: #111111
- Usage: Headings, main text, navigation
Primary White (Background)
- Hex: #FFFFFF
- Usage: Main backgrounds
4.2 Secondary Colors
Soft Gray (Background Sections)
- Hex: #F5F5F5
Light Gray (Borders)
- Hex: #E5E5E5
Accent Blue (Links)
- Hex: #2F80ED
Warm Brown (Coffee Accent)
- Hex: #6B4A2B
4.3 Color Usage Rules
- Yellow is used sparingly
- White is dominant
- Dark is used for contrast
- Avoid heavy gradients
- Avoid neon colors
- Avoid dark backgrounds on public pages
Admin dashboard may use darker neutral tones.
5. Typography
5.1 Primary Font
Recommended:
- Inter
- Poppins
- Montserrat
Usage:
- Headings: Semi-bold / Bold
- Body: Regular
5.2 Body Font
Recommended:
- Inter
- Roboto
- System UI
Line height: 1.5 – 1.7
Avoid decorative fonts.
5.3 Font Hierarchy
Example:
H1: 48–56px H2: 36–40px H3: 24–28px Body: 16–18px Small: 14px
Responsive scaling required.
6. Logo Usage
6.1 Logo Style
- Simple
- Flat
- Works in monochrome
- Works on light backgrounds
6.2 Logo Placement
- Top-left in navigation
- Footer
- Emails
- Tickets
- Posters
Minimum clear space: Logo height x 0.5
7. Photography Style
7.1 Photo Characteristics
Use:
- Real participants
- Natural lighting
- Smiling faces
- Conversation scenes
- Coffee and table shots
- Multicultural groups
Avoid:
- Stock photos
- Posed portraits
- Empty rooms
- Artificial lighting
7.2 Image Treatment
- Slight warm tone
- Balanced contrast
- No heavy filters
- Consistent cropping
8. Iconography
8.1 Style
- Flat
- Rounded
- Line-based
- Minimal detail
Recommended sets:
- Heroicons
- Lucide
- Feather
8.2 Usage
Icons support content. They must not replace text.
9. UI Components
9.1 Buttons
Primary Button:
- Background: #FFD84D
- Text: #111111
- Border-radius: 10–14px
- Padding: 12px 24px
Secondary Button:
- Border: 1px solid #111111
- Background: Transparent
Hover:
- Slight darkening
- Soft shadow
9.2 Cards
- White background
- Rounded corners (16–20px)
- Soft shadow
- Internal padding
Used for:
- Events
- Testimonials
- Stats
9.3 Forms
- Large input fields
- Clear labels
- Rounded corners
- Inline validation
10. Hero Section Design
10.1 Structure
Left Side:
- Main headline
- Subheading
- CTA button
- Event info
Right Side:
- Photo collage
- Group images
- Rounded corners
10.2 Hero Content Style
Headline:
- Bold
- Clear
- Positive
Example: "Practice English & Spanish in Asunción"
Subheadline: "Meet people. Learn languages. Have fun."
CTA: "Join Next Event"
10.3 Background
- White or very light gray
- Yellow accents
- Subtle shapes
Avoid full-color backgrounds.
11. Navigation Design
- Sticky top navigation
- White background
- Subtle shadow
- Clear links
Menu items:
- Home
- Events
- Community
- Contact
- Join
CTA highlighted in yellow.
12. Footer Design
- Light gray background
- Minimal links
- Social icons
- Copyright info
13. Admin Dashboard Style
13.1 Visual Tone
- Neutral
- Productivity-focused
- Low distraction
13.2 Colors
- White / Gray backgrounds
- Blue accents
- Minimal yellow
14. Email Design
- White background
- Logo header
- Clear typography
- Single CTA
- Mobile-friendly
15. Accessibility
- Minimum contrast ratio 4.5:1
- Large tap targets
- Keyboard navigation
- Alt text for images
16. Consistency Rules
- Reuse components
- Follow spacing system
- Use defined colors only
- No custom fonts without approval
- No random color usage
17. Future Branding Extensions
- City-specific color accents
- Event themes
- Seasonal variations
- Partner branding
All extensions must respect core identity.
18. Summary
This brand and design guide defines how Spanglish should look and feel.
It ensures a consistent, modern, and welcoming experience across all touchpoints.
All visual implementations must comply with this document.