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