Brand Assets & Logo - festa-marketing-website

Logo Specifications

Desktop Logo (Full Wordmark)

Light Mode (64-96px height)

Dark Mode (64-96px height)

Use case: Desktop navigation, headers, and branded sections where space allows for the full wordmark.

Mobile Logomark (Icon Only)

Light Mode (32px height)

Dark Mode (32px height)

Use case: Mobile navigation, compact layouts, social media avatars, and favicon.

Footer Logo (We Design for Good)

Light Mode

Dark Mode

Use case: Footer sections, mission statements, and social impact messaging.

Mission: Empowering social impact organizations through thoughtful design that amplifies their mission and drives meaningful change.

Desktop Logo Sizing System

The desktop logo uses a modular scale system for larger screens. These sizes do not scale down as the mobile logomark (icon only) is used for tablet and mobile devices.

Design Principle: The full wordmark desktop logo maintains fixed sizes optimized for desktop viewports (1024px+). For responsive layouts on smaller screens, use the mobile logomark instead.

Base

h-16 (64px)

Compact headers, secondary navigation

Medium (Default)

h-20 (80px)

Primary headers, main navigation

Large

h-24 (96px)

Hero sections, landing pages

XLarge

h-32 (128px)

Marketing materials, large displays

Modular Scale Ratio: 1.25 (Major Third)

Size Progression

Size	Height	Tailwind
Base	64px	`h-16`
Medium (Default)	80px	`h-20`
Large	96px	`h-24`
XLarge	128px	`h-32`

Usage Guidelines

✓ Base (64px): Use in compact desktop headers or when space is limited but full wordmark is required
✓ Medium (80px): Default size for primary navigation headers and branded sections (recommended)
✓ Large (96px): Hero sections, landing pages, and feature showcases
✓ XLarge (128px): Marketing materials, presentations, and large format displays

Mobile Logomark Sizes

For tablet and mobile devices, use the logomark (icon only) with these standardized sizes.

Responsive Strategy: Use the mobile logomark for viewports under 1024px (tablet and mobile). The compact icon-only format ensures optimal display on smaller screens.

Small

h-6 (24px)

Mobile menu, compact layouts, favicon

Medium (Default)

h-8 (32px)

Mobile/tablet headers, navigation

Large

h-12 (48px)

Splash screens, app icons

Usage Guidelines

Do's

✓ Maintain adequate clear space around the logo
✓ Use the logo on clean, uncluttered backgrounds
✓ Scale proportionally (use Tailwind's h-* classes)
✓ Add hover states for interactive elements
✓ Include descriptive alt text for accessibility

Don'ts

✗ Don't distort or stretch the logo
✗ Don't change the logo colors
✗ Don't add effects (shadows, glows, outlines)
✗ Don't place on busy or low-contrast backgrounds
✗ Don't rotate or alter the orientation

Clear Space Requirements

Maintain a minimum clear space around the logo equal to the height of the logomark. This ensures the logo has breathing room and remains visually distinct.

Dashed line represents minimum clear space

Implementation Examples

1. Header Navigation (Recommended)

View Blade Code

<a href="/" class="flex items-center space-x-3 group">
    <img
        src="https://festa-design-studio.laravel.cloud/ds-assets/logos/festa-logo-desk-lightmode.svg"
        alt="Festa Design Studio Logo"
        class="h-12 md:h-20 w-auto transition-transform duration-200 group-hover:scale-105"
    />
</a>

2. Standalone Logomark (Icon Only)

View Blade Code

<a href="/" class="group">
    <img
        src="https://festa-design-studio.laravel.cloud/ds-assets/logos/festa-logomark-mobile-lightmode.svg"
        alt="Festa Design Studio"
        class="h-12 w-auto transition-transform duration-200 group-hover:scale-105"
    />
</a>

3. Footer Implementation

Empowering social impact organizations through thoughtful design that amplifies their mission and drives meaningful change.

View Blade Code

<div class="flex items-center space-x-3 mb-4">
    <img
        src="https://festa-design-studio.laravel.cloud/ds-assets/logos/we-design-for-good-lightmode.svg"
        alt="We Design for Good"
        class="h-8 w-auto"
    />
</div>
<p class="text-body-sm text-white-smoke-300">
    Empowering social impact organizations through thoughtful design.
</p>

Accessibility Guidelines

WCAG 2.2 Level AA Compliance

Alt Text: Always include descriptive alt text like "Festa Design Studio Logo" or "Festa Design Studio"
Clickable Area: Ensure the logo has adequate touch target size (minimum 44×44px)
Contrast: The Chicken Comb Red (#e12729) has excellent contrast on both light and dark backgrounds
Focus States: When the logo is a link, ensure keyboard focus is visible
ARIA Labels: For icon-only logos, consider adding aria-label="Home" to the link

Logo File Information

Available Logo Files

Desktop Full Logo:
- festa-logo-desk-lightmode.svg
- festa-logo-desk-darkmode.svg
Mobile Logomark:
- festa-logomark-mobile-lightmode.svg
- festa-logomark-mobile-darkmode.svg
Footer Logo:
- we-design-for-good-lightmode.svg
- we-design-for-good-darkmode.svg
Special Variants:
- favicon-festa.svg
- festa-logomark-dark-variation-1.svg
- festa-logomark-dark-variation-2.svg

Advantages of SVG

✓ Scales perfectly at any size
✓ Retina display ready
✓ Small file size (< 10KB)
✓ Can be styled with CSS
✓ Crisp on all devices
✓ Accessible and semantic

Laravel Blade Component (Phase 2 Preview)

In Phase 2, we'll convert this logo implementation into a reusable Blade component for easier maintenance and consistency across the Laravel application.

Preview: Blade Component Structure




<a href="/" class="group">
    <img
        src="https://festa-design-studio.laravel.cloud/ds-assets/logos/festa-logomark-mobile-lightmode.svg"
        alt="Festa Design Studio Logo"
        class="h-8 w-auto transition-transform duration-200 group-hover:scale-105"
    />
</a>

Preview: Usage Examples


<x-logo />


<x-logo type="desktop" size="large" />


<x-logo type="footer" variant="dark" />


<x-logo class="mr-4" />