WestLotto

Overview

WestLotto is Germany's state-regulated lottery operator for North Rhine-Westphalia, delivering secure, transparent gaming experiences across LOTTO, Eurojackpot, KENO, TOTO, and GlücksSpirale. The design system embodies "Confident Minimalism"—a visual language that prioritizes clarity, trust, and accessibility through bold primary accents (vibrant gold #efbc0a) set against clean, neutral surfaces. The aesthetic rejects ornamentation in favor of purposeful hierarchy: the signature gold appears exclusively on high-intent actions (CTAs, primary navigation), while supporting greens (#249b37) and reds (#d22321) signal secondary interactions and alerts. The emotional response is one of assured professionalism—users feel they are engaging with an established, legitimate institution.

The brand voice is direct, reassuring, and legally precise. WestLotto speaks in declarative statements that emphasize state regulation, security, and fairness. Vocabulary favors concrete terms ("Spielschein," "Gewinnchance," "Sicherheit") over marketing hyperbole. The tone never oversells; instead, it educates and protects. Example: "Ihre Gewinne sind durch staatliche Regulierung geschützt – Auszahlung innerhalb von 48 Stunden."

Colors

The color system is built on a foundation of trust and regulatory confidence. Primary (#efbc0a, a warm, saturated gold) is the brand's signature accent, reserved exclusively for call-to-action buttons, primary navigation highlights, and focus states. This gold appears at high frequency across the interface (81–72 occurrences per page scan), signaling that every instance is a deliberate invitation to act. Secondary (#249b37, a deep forest green) supports product differentiation and status indicators—used for success states, winning-related content, and secondary CTAs. Tertiary (#d22321, a regulatory red) conveys alerts, errors, and compliance messaging, ensuring users recognize critical information instantly. The surface stack is deliberately neutral: white (#ffffff) as the primary surface,

Typography

The type system uses Fold Grotesque Pro as the single typeface family, paired with Helvetica Neue and Arial as fallbacks—a choice that reflects WestLotto's institutional, no-nonsense positioning. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and campaign headlines, commanding attention through size and weight rather than color. Headline-lg (40px, 700 weight) anchors major sections; headline-md (31px, 700 weight) is the workhorse for page titles and card headers. Title-lg (24px, 600 weight) introduces subsections and product categories. Body-lg (18px, 400 weight, 28px line-height) is the default reading size, chosen for its legibility on both desktop and mobile; body-md (16px, 400 weight) is used for secondary content and form labels. Label-md (16px, 700

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus on smaller screens. The page rhythm is governed by a semantic spacing scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact component padding, md (24px) as the default gutter between sections and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. White-space is treated as a design material—generous margins around primary CTAs (minimum 24px on all sides) ensure they command attention without feeling crowded. The container-max of 1280px prevents line lengths from exceeding 80 characters at body-md size, supporting cognitive load reduction. Grid gutters are s

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the visual heaviness of drop-shadows in favor of subtle, directional lighting. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like disabled states and subtle dividers, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, input fields, and dropdown panels, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals, elevated cards, and full-page overlays. The md shadow is the workhorse—applied to all cards, buttons on hover, and form inputs to create a consistent, predictable visual hi

Shapes

The shape philosophy is "Institutional Softness"—a balance between the sharp, authoritative edges expected of a government-regulated institution and the approachability required for consumer-facing digital products. Buttons use full border-radius (9999px) to signal friendliness and accessibility, while maintaining their rectangular footprint for predictability. Cards and modals use lg radius (1rem / 16px) to soften corners without appearing playful or frivolous. Input fields and form elements use DEFAULT radius (0.5rem / 8px) for a neutral, professional appearance. Dropdown panels and tooltips

Components

Action Elements Buttons are the primary interaction mechanism and use a three-tier system. Button-primary (background: #efbc0a, text: #003d1e, 48px height, 16px 24px padding, full radius) is the dominant CTA—used for "Play Now," "Add to Cart," and primary navigation actions. On hover, the background transitions to #efbc0a (primary-fixed-dim) with a 200ms ease-in-out transition, maintaining the gold family while signaling state change. Button-secondary (transparent background, 2px solid #efbc0a border, text: #efbc0a, same padding and radius) is used for secondary actions like "Learn More" or "Cancel." On hover, the background fills with #e0e0e0 (surface-container-high), creating a subtle fill effect. Button-dark (background: #161616, text: #ffffff, full radius) is reserved for tertiary