BARMER

Overview

BARMER is Germany's leading statutory health insurance provider, serving millions with comprehensive coverage and digital-first member experiences. The design system embodies 'Institutional Clarity with Modern Energy'—a visual language that balances regulatory trust (clean typography, generous whitespace, high contrast at #212121 on #ffffff) with vibrant brand personality through a distinctive purple accent (#8739f4) and supporting green (#69a500). The brand personality is authoritative yet approachable, speaking to members with precision and empathy. The UI evokes confidence through clarity: every interaction is purposeful, every color choice deliberate, every spacing decision intentional. Voice: direct, reassuring, never patronizing. Example sentence: 'Ihre Gesundheit ist unsere Priorität—wir machen es einfach, die beste Versorgung zu bekommen.'

Colors

The BARMER color system prioritizes accessibility and institutional trust while leveraging a bold purple accent to signal interactivity and brand presence. Primary (#8739f4) is the signature accent used exclusively on call-to-action buttons, interactive links, and focus states—it commands attention without overwhelming the interface. On-primary (#ffffff) ensures WCAG AAA contrast (21:1) on primary buttons. Secondary (#6b25c5) and its hover state (#521d99) provide depth for secondary interactions and link states, creating a cohesive purple family that reinforces brand identity across the experience. Tertiary (#69a500) is reserved for banner alerts, success states, and secondary CTAs, providing visual distinction from the primary purple. The surface stack (from #ffffff surface down to #dcdcd

Typography

The typography system is anchored in BARMER Beat Screen, a custom brand typeface that conveys institutional authority while remaining approachable. The type hierarchy spans from Display (60px, 900 weight) for hero statements down to Label-sm (14px, 600 weight) for metadata and badges. Headlines use 900 weight (headline-lg: 48px, 56px line-height) to command attention on landing pages and section breaks. Body text defaults to 400 weight at 16px with 24px line-height (body-md) for optimal readability on desktop and mobile; body-lg (20px, 32px line-height) is reserved for prominent introductory paragraphs. All interactive labels (buttons, links) use 700 weight at 18px (label-md) to signal clickability. Letter-spacing is tightly controlled: headlines use -0.02em to -0.04em for visual impact, w

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport with symmetric margins. Container max-widths scale responsively: 1280px on desktop (1440px+ screens), 1099px on tablets (1024px–1199px), and full-width with 24px gutters on mobile (< 1024px). The spacing scale is semantic and hierarchical: unit (8px) is the base increment; sm (12px) is used for tight component padding; md (24px) is the standard gutter and card padding; lg (40px) separates major sections; xl (64px) creates breathing room between page sections. White-space is generous—sections are separated by at least lg (40px) vertically, and cards within sections use md (24px) padding internally. The grid enforces a rhythm: hero sections occupy 100% width with lg padding top/bottom; content

Elevation & Depth

Depth in the BARMER system is achieved through subtle shadows and strategic use of the surface container stack, avoiding heavy drop-shadows that would undermine the clean, institutional aesthetic. Level 1 (Base): the white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Containers): box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.2) (elevation.lg), a soft, diffuse shadow that lifts cards 4–8px above the base. Level 3 (Modals & Overlays): the same shadow as Level 2, paired with a semi-transparent dark overlay (rgba(0, 0, 0, 0.5)) and optional backdrop-filter: blur(4p

Shapes

The shape philosophy is 'Institutional Softness'—combining the precision of a regulated industry with the approachability of modern design. Buttons use full radius (999px) to signal interactivity and soften the institutional feel; this applies to all button variants (primary, secondary, tertiary) at 48px height with 12–22px horizontal padding. Cards and containers use lg radius (16px), creating a gentle corner that feels contemporary without being playful. Input fields use DEFAULT radius (8px), a subtle rounding that distinguishes them from buttons while maintaining visual coherence. Modals an

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (purple #8739f4 background, white text, 999px radius, 48px height, 18px 700-weight label), secondary (transparent background, purple text, 2px purple border, 999px radius, 44px height, 16px 700-weight label), and tertiary (green #69a500 background, white text, 999px radius, 48px height). All buttons use padding: 12px 22px (or 10px 22px for secondary to account for border). Hover states transition all properties over 200ms ease: primary darkens to #7130cd, secondary fills with rgba(135, 57, 244, 0.16) and text darkens to #521d99, tertiary darkens to #5a8c00. Active states deepen further (primary to #5c27a6, secondary to #3a166f). Focus states add a 3px outline in rgba(135, 57, 244, 0.1) with

Do's and Don'ts

**Do**

• Do use the primary purple (#8739f4) exclusively for interactive elements (buttons, links, focus states) to create a consistent visual language for 'clickability.'
• Do maintain the 24px gutter and 40px section spacing religiously—this rhythm is what makes the layout feel institutional and trustworthy.
• Do apply 999px border-radius to all buttons and 16px to all cards; this distinction signals hierarchy and prevents visual confusion.
• Do use BARMER Beat Screen at 900 weight for headlines and 700 weight for interactive labels; this weight contrast is critical for scanability.
• Do test all interactive elements with keyboard navigation and screen readers; focus states must use the 3px outline in rgba(135, 57, 244, 0.1), never remove outline.
• Do use the surface-container stack for nested backgrounds instead of adding shadows; this keeps the interface clean and regulatory-friendly.

**Don't**

• Don't use the primary purple (#8739f4) for body text, backgrounds, or non-interactive elements; reserve it exclusively for CTAs and focus states.
• Don't apply shadows heavier than 0 0 0.625rem rgba(0, 0, 0, 0.2); the institutional aesthetic requires restraint and clarity, not depth.
• Don't mix border-radius values arbitrarily; stick to the defined scale (4px, 8px, 12px, 16px, 24px, 999px) to maintain visual coherence.
• Don't use custom fonts other than BARMER Beat Screen and fallbacks (Helvetica, Arial); this ensures consistency across all platforms and print materials.
• Don't reduce padding below 12px (sm) or margins below 8px (unit) in the main content area; white-space is a feature, not a bug.
• Don't apply color overlays or gradients to the primary purple; use the defined hover and active states (#7130cd, #5c27a6) to maintain brand integrity.