# 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.
