first commit

about/brand.md

@@ -0,0 +1,441 @@
+# 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.