Lyon Street Food Festival

Overview

Lyon Street Food Festival is France's premier celebration of culinary culture, music, and community energy. The design system embraces **Playful Maximalism**—a bold, youth-centric aesthetic that rejects minimalist restraint in favor of saturated color blocking, geometric illustration, and expressive typography. The brand personality is celebratory, inclusive, and unapologetically energetic: the UI communicates joy through vivid accent colors (teal primary #00c1b9, magenta secondary #e46ec0, rose tertiary #dd649d), generous white space punctuated by colorful sections, and rounded geometric forms that feel approachable rather than corporate.

The voice is direct, enthusiastic, and conversational—never formal or distant. Sentences are short and action-oriented. Example: "RDV du 11 au 14 juin pour les 10 ans !" (Meet us June 11–14 for the 10th anniversary!) The brand celebrates food as culture, music as connection, and the festival as a gathering place for Lyon's vibrant community.

Colors

The color palette is built on three primary accents layered over a light, neutral canvas. **Primary (#00c1b9)** is a vibrant teal used exclusively for call-to-action buttons, interactive states, and key links—it commands attention and signals clickability. **Secondary (#e46ec0)** is a saturated magenta deployed for highlights, section backgrounds, and supporting UI elements; it creates visual rhythm and energy. **Tertiary (#dd649d)** is a softer rose-mauve used for badges, secondary containers, and softer emphasis. The surface stack is anchored in light neutrals: surface (#f7f7f7), surface-container (#f5f5f5), and surface-container-highest (#ffffff) provide breathing room. On-surface text is a warm gray (#595959) for legibility over light backgrounds. Accent colors are never desaturated or

Typography

The type system uses **Poppins** as the primary typeface, a geometric sans-serif that reinforces the brand's playful, modern character. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major announcements; its tight tracking creates visual punch. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles with clear hierarchy. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) provide readable body copy with 0.01–0.02em letter-spacing to maintain openness. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are used for buttons, badges, and metadata. All headlines use negative letter-spacing (-0.04em to -0.01em) to create visual tightness and energy; body text uses positive or neutral spacing

Layout

The layout follows a **12-column fluid grid** with a max-width of 1200px, centered on larger screens. Sections use lg spacing (40px) for vertical rhythm and separation; internal card padding uses md spacing (24px). The gutter between columns is 24px. White space is generous but purposeful—sections are not cramped, and cards breathe with padding on all sides. Hero sections span full-width with bold color blocks (e.g., #f7d3d7 or #fce992) that extend edge-to-edge, creating visual drama. Content containers maintain 1200px max-width to prevent line-length bloat. Mobile breakpoints compress spacing to sm (12px) and reduce padding to 12–16px on cards. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently across margins, padding, and gaps to create visual cohere

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic blur or glassmorphism. **Level 1 (Base)**: flat surfaces with no shadow (e.g., body background #f7f7f7). **Level 2 (Cards & Containers)**: box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, input fields, and lifted elements; this creates gentle separation from the background. **Level 3 (Modals & Overlays)**: box-shadow 0 12px 50px rgba(0, 0, 0, 0.4) for full-screen overlays and prominent modals. Hover states elevate cards to Level 3 with a 200ms ease-out transition. No borders are used on cards; shadows alone de

Shapes

The shape philosophy is **Soft-Geometric**—rounded corners are used consistently but not excessively, balancing approachability with structure. Buttons use rounded sm (4px) for a modern, slightly softened edge that feels contemporary without being overly playful. Cards and containers use rounded lg (16px) for a more generous curve that invites interaction. Input fields use rounded sm (4px) to align with button styling and maintain visual consistency. Badges and pills use rounded full (9999px) for maximum softness and emphasis. The rationale: small radii (sm) signal precision and control; large

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses teal (#00c1b9) background, white text, 14px mdnichrome-regular font (700 weight), 12px 18px padding, and 4px border-radius. On hover, the background shifts to #00a89f with a 200ms ease-out transition. **button-secondary** uses a semi-transparent dark overlay (rgba(0, 0, 0, 0.2)) with dark text (#1e1f4e), same padding and radius, and darkens to rgba(0, 0, 0, 0.3) on hover. Both buttons have a minimum height of 40px for touch accessibility.

Containers & Surfaces **card** uses surface-container (#f5f5f5) background, lg rounded (16px), md padding (24px), and md shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background lifts to surface-container-high (#fafafa) and shadow elevates to lg (0 12px 5

Do's and Don'ts

**Do**

• Do use teal (#00c1b9) exclusively for primary CTAs and interactive states—it is the brand's signature accent and must remain distinctive.
• Do maintain generous white space (lg spacing, 40px) between major sections to prevent visual fatigue and emphasize content hierarchy.
• Do apply Poppins at 600–700 weight for headlines to create visual energy; avoid thin weights (300–400) for large text.
• Do layer color blocks (e.g., #f7d3d7, #fce992) as full-width section backgrounds to create visual rhythm and break up neutral surfaces.
• Do use md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on cards and containers; avoid flat design or heavy shadows that feel dated.
• Do apply 200ms ease-out transitions on hover states for buttons and cards to signal interactivity smoothly.

**Don't**

• Don't desaturate or tone down the accent colors—teal, magenta, and rose must remain vivid and saturated to maintain brand energy.
• Don't use system fonts or generic sans-serifs; Poppins is essential to the brand's playful, modern character.
• Don't add borders to cards or containers; rely on shadows and color to define edges and hierarchy.
• Don't mix rounded corners inconsistently—use sm (4px) for buttons and inputs, lg (16px) for cards, and full (9999px) for badges only.
• Don't compress spacing below sm (12px) in body copy or between sections; the brand relies on breathing room to feel approachable.
• Don't use gradients or blur effects; the brand favors flat, bold color blocks and clear visual separation.