DESIGN.md · Analysis

WestLotto

westlotto.de · 27 Aug 2026 · 47 colors · Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif

WestLotto

Germany's state-regulated lottery operator for North Rhine-Westphalia, combining institutional trust with vibrant, accessible gaming experiences. The design system balances official authority with approachable energy.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f0f0f0

surface-container#eeeeee

surface-container-high#e8e8e8

surface-container-highest#e0e0e0

on-surface#000000

on-surface-variant#424242

inverse-surface#1a1a1a

inverse-on-surface#f5f5f5

outline#757575

outline-variant#bdbdbd

surface-tint#efbc0a

primary#efbc0a

on-primary#003d1e

primary-container#ffd8a8

on-primary-container#332200

inverse-primary#b8860b

secondary#d22321

on-secondary#ffffff

secondary-container#ffb4ab

on-secondary-container#410e0b

tertiary#249b37

on-tertiary#ffffff

tertiary-container#a8f5b8

on-tertiary-container#002107

error#d22321

on-error#ffffff

error-container#ffb4ab

on-error-container#410e0b

primary-fixed#ffd8a8

primary-fixed-dim#efbc0a

on-primary-fixed#332200

on-primary-fixed-variant#664400

secondary-fixed#ffb4ab

secondary-fixed-dim#d22321

on-secondary-fixed#410e0b

on-secondary-fixed-variant#8b3a37

tertiary-fixed#a8f5b8

tertiary-fixed-dim#249b37

on-tertiary-fixed#002107

on-tertiary-fixed-variant#1a6b27

background#ffffff

on-background#000000

surface-variant#e8e8e8

Typography

display: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 40px · fontWeight: 700 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 28px · fontWeight: 700 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 20px · fontWeight: 700 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0em
body-md: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0em
label-md: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 14px · fontWeight: 700 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif · fontSize: 12px · fontWeight: 600 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Do's and Don'ts

**Do**

Do use the primary gold (#efbc0a) exclusively on CTAs and interactive moments—never on passive text or backgrounds.
Do maintain a minimum 48px height for all touch targets (buttons, inputs, list items) to ensure mobile accessibility.
Do apply the full-radius pill shape (border-radius: 32px) to all primary buttons and badges to signal interactivity.
Do use Fold Grotesque Pro at 700 weight for all headlines and button text to maintain visual hierarchy and institutional authority.
Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns, and the lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) only to modals and elevated surfaces.
Do use the surface-container stack (#fafafa to #e0e0e0) for subtle depth without introducing new colors.
Do include a 3px focus outline in rgba(239, 188, 10, 0.3) on all interactive elements for keyboard navigation.
Do transition all hover states over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable interactions.

**Don't**

Don't use the primary gold (#efbc0a) on body text, backgrounds, or passive UI elements—it is reserved for action and emphasis.
Don't apply shadows darker than md (0 3px 8px rgba(0, 0, 0, 0.15)) to standard cards; reserve lg shadows for modals only.
Don't use border-radius values smaller than 4px on interactive elements; maintain the Geometric Warmth philosophy.
Don't apply blur effects (backdrop-filter) to any surface except the modal overlay; blur obscures content and violates clarity principles.
Don't mix font families; Fold Grotesque Pro is the sole typeface for all UI text.
Don't use the secondary red (#d22321) for positive or neutral messaging; reserve it for alerts, errors, and high-stakes contexts.
Don't create buttons smaller than 48px in height or with padding less than 16px 24px; accessibility is non-negotiable.
Don't apply text-shadow to body text; use it only on label-sm text over busy backgrounds (e.g., lottery ticket imagery).

---
version: alpha
name: WestLotto
description: >-
  Germany's state-regulated lottery operator for North Rhine-Westphalia, combining institutional trust with vibrant,
  accessible gaming experiences. The design system balances official authority with approachable energy.
logo:
  src: data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%20109%2016%22%20fill%3D%22no…
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f0f0f0'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e0e0e0'
  on-surface: '#000000'
  on-surface-variant: '#424242'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#f5f5f5'
  outline: '#757575'
  outline-variant: '#bdbdbd'
  surface-tint: '#efbc0a'
  primary: '#efbc0a'
  on-primary: '#003d1e'
  primary-container: '#ffd8a8'
  on-primary-container: '#332200'
  inverse-primary: '#b8860b'
  secondary: '#d22321'
  on-secondary: '#ffffff'
  secondary-container: '#ffb4ab'
  on-secondary-container: '#410e0b'
  tertiary: '#249b37'
  on-tertiary: '#ffffff'
  tertiary-container: '#a8f5b8'
  on-tertiary-container: '#002107'
  error: '#d22321'
  on-error: '#ffffff'
  error-container: '#ffb4ab'
  on-error-container: '#410e0b'
  primary-fixed: '#ffd8a8'
  primary-fixed-dim: '#efbc0a'
  on-primary-fixed: '#332200'
  on-primary-fixed-variant: '#664400'
  secondary-fixed: '#ffb4ab'
  secondary-fixed-dim: '#d22321'
  on-secondary-fixed: '#410e0b'
  on-secondary-fixed-variant: '#8b3a37'
  tertiary-fixed: '#a8f5b8'
  tertiary-fixed-dim: '#249b37'
  on-tertiary-fixed: '#002107'
  on-tertiary-fixed-variant: '#1a6b27'
  background: '#ffffff'
  on-background: '#000000'
  surface-variant: '#e8e8e8'
typography:
  display:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 40px
    fontWeight: '700'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 28px
    fontWeight: '700'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0em
  body-md:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0em
  label-md:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 14px
    fontWeight: '700'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Fold Grotesque Pro, Helvetica Neue, Arial, sans-serif
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 24px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 3px 8px rgba(0, 0, 0, 0.15)
  lg: 0 8px 24px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 16px 24px
    height: 48px
    border: none
    boxShadow: none
  button-primary-hover:
    backgroundColor: '#e6b000'
    textColor: '{colors.on-primary}'
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1)
  button-primary-active:
    backgroundColor: '#d4a000'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 16px 24px
    height: 48px
    border: 2px solid {colors.primary}
    boxShadow: none
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.primary}'
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1)
  button-dark:
    backgroundColor: '#161616'
    textColor: '#ffffff'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 16px 24px
    height: 48px
    border: none
  button-dark-hover:
    backgroundColor: '#2a2a2a'
    textColor: '#ffffff'
    transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1)
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.md}'
    border: 1px solid {colors.surface-container-high}
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.lg}'
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.sm}'
    border: 1px solid {colors.outline-variant}
    height: 40px
  input-field-focus:
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(239, 188, 10, 0.1)
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
  badge-primary:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  badge-secondary:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  badge-tertiary:
    backgroundColor: '{colors.tertiary-container}'
    textColor: '{colors.on-tertiary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    display: inline-block
  modal-overlay:
    backgroundColor: rgba(0, 0, 0, 0.4)
    backdropFilter: blur(4px)
  modal-content:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.lg}'
    padding: '{spacing.lg}'
    boxShadow: '{elevation.lg}'
    border: 1px solid {colors.surface-container-high}
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    typography: '{typography.body-md}'
    textColor: '{colors.on-surface}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1)
---

## Do's and Don'ts

**Do**
- Do use the primary gold (#efbc0a) exclusively on CTAs and interactive moments—never on passive text or backgrounds.
- Do maintain a minimum 48px height for all touch targets (buttons, inputs, list items) to ensure mobile accessibility.
- Do apply the full-radius pill shape (border-radius: 32px) to all primary buttons and badges to signal interactivity.
- Do use Fold Grotesque Pro at 700 weight for all headlines and button text to maintain visual hierarchy and institutional authority.
- Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns, and the lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) only to modals and elevated surfaces.
- Do use the surface-container stack (#fafafa to #e0e0e0) for subtle depth without introducing new colors.
- Do include a 3px focus outline in rgba(239, 188, 10, 0.3) on all interactive elements for keyboard navigation.
- Do transition all hover states over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, predictable interactions.

**Don't**
- Don't use the primary gold (#efbc0a) on body text, backgrounds, or passive UI elements—it is reserved for action and emphasis.
- Don't apply shadows darker than md (0 3px 8px rgba(0, 0, 0, 0.15)) to standard cards; reserve lg shadows for modals only.
- Don't use border-radius values smaller than 4px on interactive elements; maintain the Geometric Warmth philosophy.
- Don't apply blur effects (backdrop-filter) to any surface except the modal overlay; blur obscures content and violates clarity principles.
- Don't mix font families; Fold Grotesque Pro is the sole typeface for all UI text.
- Don't use the secondary red (#d22321) for positive or neutral messaging; reserve it for alerts, errors, and high-stakes contexts.
- Don't create buttons smaller than 48px in height or with padding less than 16px 24px; accessibility is non-negotiable.
- Don't apply text-shadow to body text; use it only on label-sm text over busy backgrounds (e.g., lottery ticket imagery).

Edit, then copy or download.