Festa's logo system
Identity with Purpose
A logo is more than a mark, it's a promise, a voice, a visual anchor in the digital landscape. The Festa logo embodies our commitment to thoughtful, trauma-informed design that serves social impact organizations with dignity and care.
Every variation, every spacing guideline, every color choice reinforces our mission: to create visual identities that are accessible, consistent, and purposeful. Just as typography carries meaning through weight and rhythm, our logo carries meaning through its presence, proportion, and placement, always respecting the space it inhabits and the audiences it serves.
Logo Variants
Festa has three primary logo variants optimized for different contexts: desktop wordmark, mobile logomark, and footer tagline.
Desktop Logo (Full Wordmark)
Use the full wordmark on desktop viewports (1024px+) where space allows for the complete brand identity.
Light Mode
Dark Mode
Mobile Logomark (Icon Only)
Use the compact logomark on tablet and mobile viewports (below 1024px), social media avatars, and favicon.
Light Mode
Dark Mode
Footer Logo (We Design for Good)
Use the tagline variant in footer sections and mission statement contexts to reinforce our social impact values.
Light Mode
Dark Mode
Logo Sizing System
Logo sizes use a consistent scale based on Tailwind's height utilities. The desktop logo uses larger sizes (h-16 to h-32), while the mobile logomark uses smaller sizes (h-6 to h-12).
Desktop Logo Sizes
Base (64px)
h-16
Compact headers, secondary navigation
Medium (80px) — Default
h-20
Primary headers, main navigation
Large (96px)
h-24
Hero sections, landing pages
XLarge (128px)
h-32
Marketing materials, large displays
Mobile Logomark Sizes
Small (24px)
h-6
Mobile menu, compact layouts, favicon
Medium (32px) — Default
h-8
Mobile/tablet headers, navigation
Large (48px)
h-12
Splash screens, app icons
Logo in Action
See how Festa's logo is used in real navigation and branding contexts across our digital products.
Desktop Navigation Header
Full wordmark with h-20 (80px) for primary navigation with subtle hover effect.
Mobile Navigation Header
Compact logomark with h-8 (32px) optimized for mobile viewports.
Usage Guidelines
Do's
- ✓ Maintain adequate clear space around the logo
- ✓ Use on clean, uncluttered backgrounds
- ✓ Scale proportionally using h-* classes
- ✓ Add hover states for interactive logos
- ✓ Include descriptive alt text
Don'ts
- ✗ Don't distort or stretch the logo
- ✗ Don't change the logo colors
- ✗ Don't add effects (shadows, glows)
- ✗ Don't place on busy backgrounds
- ✗ Don't rotate or alter orientation
Clear Space Requirements
Maintain minimum clear space around the logo equal to the height of the logomark. This ensures the logo has breathing room and remains visually distinct from surrounding content.
Dashed line represents minimum clear space boundary
Accessibility Guidelines
WCAG 2.2 Level AA Compliance
- Alt Text: Always include descriptive alt text like "Festa Logo" or "Festa Design Studio"
- Touch Targets: Ensure clickable logos have minimum 44×44px touch target size
- Focus States: When logo is a link, ensure visible keyboard focus ring
- ARIA Labels: For icon-only logos, add aria-label="Home" to the link
- Color Contrast: All logo variants maintain excellent contrast on their intended backgrounds