442 lines
5.4 KiB
Markdown
442 lines
5.4 KiB
Markdown
# 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.
|