Corona Beach 100

Overview

Corona Beach 100 embodies a 'Confident Oceanside Modernism' aesthetic—a design language that celebrates beach culture, freedom, and the brand's 100-year legacy through bold, sun-soaked typography and warm, inviting interactions. The visual identity prioritizes clarity and directness: a deep navy canvas (rgb(12, 35, 64)) provides sophisticated grounding, while a vibrant golden-yellow accent (rgb(255, 198, 39)) commands attention on primary CTAs, evoking the warmth of sand and tropical sunlight. The UI voice is conversational yet authoritative, speaking to travelers and beach enthusiasts with genuine enthusiasm and practical guidance.

The brand personality is 'This Is Living'—optimistic, uncompromising, and rooted in authentic beach moments. Tone: warm but never saccharine, energetic but grounded. Vocabulary favors active verbs and sensory language: 'Discover the world's most beautiful beaches,' 'Immerse yourself in 100 years of beach culture.' Example sentence in brand voice: 'Ga waar het leven het luidst roept'—Go where life calls loudest—capturing the spirit of adventure and liberation that Corona represents.

Colors

The color system is built on a high-contrast foundation: a deep navy primary surface (rgb(12, 35, 64)) creates a sophisticated, premium backdrop that evokes twilight ocean depths and tropical night skies. Against this, a warm golden-yellow primary accent (rgb(255, 198, 39)) serves as the signature brand color, deployed on all primary CTAs, hero buttons, and interactive highlights. This pairing—navy + golden-yellow—is non-negotiable and appears across every major interaction point.

Secondary colors support the narrative: a muted gray (rgb(84, 84, 84)) handles neutral text and secondary UI elements, while a bold crimson-red (rgb(207, 10, 44)) is reserved for error states, alerts, and tertiary CTAs that demand urgency. Surface variants range from rgb(5, 20, 40) (surface-dim, for recessed ele

Typography

The type system is hierarchical and distinctive, anchored by CoronaHeadline SemiBold—a custom serif-influenced typeface that conveys heritage and confidence. Display text (86px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like 'Ga waar het leven het luidst roept,' commanding the full visual hierarchy. Headline-lg (48px) and headline-md (32px) use the same CoronaHeadline family, maintaining brand consistency across section titles and card headers. Body copy shifts to Bud Crafted (a warm, humanistic serif) at 16px–18px with 400 weight and 24–28px line-height, ensuring readability over the dark background and creating a conversational tone. Labels and CTAs use Work Sans Bold at 12–14px with 0.01–0.05em letter-spacing, providing crisp, scannable UI text. All small labels

Layout

The layout operates on a 12-column grid with a max-width of 1198px, maintaining a fluid-to-fixed breakpoint strategy. On mobile (< 768px), the grid collapses to 4 columns with 12px gutters; on tablet (768–1199px), it expands to 8 columns with 24px gutters; on desktop (1200px+), the full 12-column grid activates with 24px gutters and centered container alignment. Vertical rhythm is established through the spacing scale: xs (4px) for micro-interactions, sm (12px) for inline spacing, md (24px) for component padding and section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Hero sections use lg spacing (40px) for top/bottom padding on desktop, scaling down to md (24px) on tablet and sm (12px) on mobile. Card stacks and content containers maintain

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows, instead using soft, diffused elevation. Level 1 (Base/Surface): no shadow; elements sit flush on the dark navy background. Level 2 (Standard Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that separates interactive elements from the background without visual heaviness. Level 3 (Modals/Dropdowns): box-shadow: 0 0 18px rgba(0, 0, 0, 0.2), a broader, softer shadow that signals modal priority and focus. Buttons and CTAs use the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to ens

Shapes

The shape philosophy is 'Approachable Precision'—a balance between technical sharpness and human warmth. Primary CTAs and input fields use full-radius (50px border-radius), creating pill-shaped buttons that feel friendly and inviting while maintaining a modern, app-like quality. Secondary buttons and cards use tighter radii: md (10px) for standard cards, DEFAULT (4px) for form inputs and list items, and sm (2px) for subtle borders and dividers. This graduated approach creates visual hierarchy: the more prominent and interactive an element, the rounder it becomes. Dropdown panels use md (10px)

Components

Action Elements Primary buttons (button-primary) use the golden-yellow accent (rgb(255, 198, 39)) with navy text (rgb(12, 35, 64)), full-radius (50px), and 16px horizontal padding. Height is fixed at 48px for touch-friendly interaction. On hover (button-primary-hover), the background shifts to a lighter golden tone (rgb(255, 216, 163)) with a 200ms ease-in-out transition, avoiding abrupt color snaps. All primary buttons receive a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to ensure they feel pressable. Secondary buttons (button-secondary) use the surface-container-high background (rgb(26, 58, 92)) with white text, DEFAULT radius (4px), and a 1px outline-variant border. Tertiary buttons (button-tertiary) deploy the crimson-red accent (rgb(207, 10, 44)) for high-priority destructive o

Do's and Don'ts

**Do**

• Do use the golden-yellow (rgb(255, 198, 39)) exclusively on primary CTAs and hero highlights—it is the brand's signature accent and must never be diluted or overused on secondary elements.
• Do maintain the navy-to-golden contrast ratio (21:1 WCAG AAA) on all text-over-color combinations to ensure accessibility and legibility over the dark background.
• Do apply the Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to all interactive elements (buttons, inputs, cards) to signal affordance and depth.
• Do use CoronaHeadline SemiBold for all headlines and display text to reinforce brand heritage and visual distinctiveness.
• Do scale spacing proportionally across breakpoints: use sm (12px) on mobile, md (24px) on tablet, and lg (40px) on desktop for section separation.

**Don't**

• Don't use the crimson-red (rgb(207, 10, 44)) on primary CTAs—it is reserved for error states and tertiary actions only; using it on primary buttons will confuse users about action priority.
• Don't apply shadows heavier than Level 3 (0 0 18px rgba(0, 0, 0, 0.2)) or use multiple stacked shadows; the interface must remain clean and premium, not heavy or dated.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii will fragment the visual system and reduce consistency.
• Don't place white text directly on the golden-yellow background without a shadow or outline—the contrast is insufficient (4.5:1) for WCAG AA compliance; always use navy text on golden backgrounds.
• Don't animate color transitions faster than 200ms or slower than 400ms; interactions must feel responsive without appearing jarring or sluggish.