Bitburger

Overview

Bitburger is a heritage German brewery brand established in 1817, rooted in Eifel craftsmanship and family tradition. The design system embodies 'Warm Minimalism'—a philosophy that pairs the brand's golden heritage accent (#d6b777, #e9c364) with clean, generous whitespace and a restrained serif-and-sans-serif typographic hierarchy. The aesthetic evokes trust, heritage, and approachability: users encounter a calm, uncluttered interface that respects their attention while celebrating the brand's premium positioning through carefully placed golden accents and refined typography. The UI feels like stepping into a well-appointed brewery taproom—spacious, welcoming, and confident in its craft.

The brand voice is conversational yet authoritative, grounded in German precision and family values. Sentences are direct and unpretentious: 'Bitte ein Bit' (Please, a Bit) captures the tone—casual, inviting, and rooted in local tradition. The vocabulary avoids corporate jargon; instead, it speaks of 'Genuss' (enjoyment), 'Qualität' (quality), and 'Tradition' (tradition). Example sentence in brand voice: 'Seit 1817 brauen wir Bier mit Leidenschaft—jeder Schluck erzählt unsere Geschichte.' (Since 1817, we brew beer with passion—every sip tells our story.)

Colors

The color system centers on a warm, earthy palette that reflects the brand's heritage and the natural ingredients of beer-making. Primary (#d6b777) and its accent variant (#e9c364) form the signature golden accent used exclusively on call-to-action buttons, interactive focus states, and brand-defining moments. These warm golds appear against clean white surfaces (#ffffff) and soft grays (#e9ecef, #f0f0f0) to create visual hierarchy without visual noise. The secondary color (#6c757d) provides a neutral, professional anchor for supporting text and disabled states. Tertiary (#e9c364) reinforces the golden accent in badges and highlights. On-surface text (#1a1a1a) maintains high contrast (18:1) for accessibility; on-surface-variant (#505050) is reserved for secondary information and metadata.

Typography

The type system pairs Abacaxi Latin (a bold, geometric sans-serif) for headlines and labels with Times New Roman (a classic serif) for body text, creating a distinctive 'heritage-meets-modern' voice. Display (60px, 900 weight, -0.02em tracking) and Headline-lg (40px, 900 weight) use Abacaxi Latin to command attention and establish brand personality; these sizes are reserved for hero sections and major section breaks. Headline-md (32px, 900 weight) scales down for subsections while maintaining visual weight. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) use Times New Roman for long-form content, providing a warm, readable serif that evokes tradition. Label-md (16px, 500 weight) and Label-sm (14px, 500 weight) use Abacaxi Latin for buttons, for

Layout

The layout system uses a fixed 12-column grid with a max-width container of 1080px, centered on desktop and tablet viewports. Horizontal padding follows a responsive scale: 24px gutter on desktop (1440px+), 24px on tablet (768px–1439px), and 16px on mobile (< 768px). Vertical spacing uses a semantic scale: lg (40px) separates major sections (hero to content, content to footer), md (24px) separates subsections and card groups, sm (12px) separates list items and inline elements. The whitespace philosophy is 'generous and intentional'—sections breathe with 40–64px of vertical separation, and cards maintain 24px internal padding. Container max-width of 1080px ensures text lines stay within 65–75 characters for optimal readability. Grid gaps follow the spacing scale: 24px column gap for card gr

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic elevation. The elevation system uses three tiers: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for minor UI elements like form inputs and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating elements. Shadows are soft and diffuse, never harsh or black-heavy. Hover states increase elevation: a card at rest uses md shadow; on hover, it transitions to lg shadow over 200ms. The select dropdown panel uses md shadow (0 3px 8px rgba

Shapes

The shape philosophy is 'Refined Pragmatism'—minimal rounding that feels contemporary without sacrificing legibility or brand distinctiveness. Buttons use 6px border-radius (rounded.md), a subtle curve that softens hard edges while maintaining a professional, engineered appearance. Form inputs and select dropdowns use 4px border-radius (rounded.DEFAULT) for consistency with web conventions. Cards and larger containers use 4px border-radius to align with input styling, creating a cohesive, grid-like aesthetic. The select dropdown panel uses 4px border-radius with a 1px solid border at #d0d0d0 t

Components

Action Elements Buttons are the primary interactive affordance. Button-primary uses backgroundColor {colors.primary} (#d6b777), textColor {colors.on-primary} (#ffffff), padding 10px 16px, height 44px, and border-radius {rounded.md} (6px). On hover, background-color transitions to #c9a968 over 200ms, maintaining white text. Button-secondary uses a transparent background with a 2px solid border in {colors.primary} (#d6b777), same padding and height, and text-color {colors.primary}. On hover, the background fills with {colors.primary-container} (#f0e8d8) while text remains primary-colored. Both buttons use {typography.label-md} (Abacaxi Latin, 16px, 500 weight) for consistency. Links use text-color {colors.primary} (#d6b777) with no underline by default; on hover, they transition to #c9a9