AOK Design System

Overview

AOK (Allgemeine Ortskrankenkasse) is Germany's largest public health insurance provider, serving millions of members with clarity, trust, and institutional reliability. The design system embodies 'Institutional Minimalism'—a movement that prioritizes legibility, accessibility, and bureaucratic transparency over decorative flourish. The aesthetic is deliberately austere: a clean white canvas (rgb(255, 255, 255)), deep forest green accents (#18ab42 for primary actions, #005e3f for secondary authority), and neutral grays (#505050, #6c757d) for supporting text. This palette evokes the feeling of a well-organized filing cabinet—everything in its place, nothing wasted, every element purposeful. The UI communicates: 'Your health information is secure, organized, and easy to navigate.'

AOK's voice is formal yet approachable, precise yet human. The brand uses active, direct language without jargon: 'Klicken Sie den Link um zur Startseite zu gelangen' (Click the link to go to the homepage) rather than 'Navigieren Sie zum primären Einstiegspunkt.' Typography relies on the custom AOKBuenosAires and AOKBuenosAiresText families—geometric, modern typefaces that signal both institutional authority and contemporary design sensibility. Tone is never breathless or urgent; it is calm, factual, and reassuring. Example: 'Es tut uns leid. Sie haben keine Berechtigung diese Seite zu sehen.' (We're sorry. You don't have permission to view this page.) The sentence structure is simple, the apology is genuine, and the next action is clear.

Colors

The AOK color system is built on a foundation of institutional trust and clinical clarity. Primary (#18ab42, rgb(24, 171, 66)) is the brand's signature accent—a vibrant, slightly saturated green used exclusively on call-to-action buttons, active links, and focus states. It appears sparingly but decisively, commanding attention without aggression. Secondary (#005e3f, rgb(0, 94, 63)) is a deep forest green reserved for headings, authority markers, and secondary interactive elements; it reinforces institutional gravitas. Tertiary (#6c757d, rgb(108, 117, 125)) is a neutral gray used for supporting text, disabled states, and subtle UI elements. The surface stack is deliberately minimal: Surface (#ffffff) is the canonical white background; Surface-Container (#e9ecef, rgb(233, 236, 239)) is a bar

Typography

The type system uses two custom AOK typeface families: AOKBuenosAires for display and headline layers (weights 400, 600), and AOKBuenosAiresText for body and label layers (weights 400, 600, 700). This pairing creates visual hierarchy through family distinction rather than weight alone. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero moments and error codes; Headline-LG (40px, 600 weight, -0.02em) for major section titles; Headline-MD (32px, 600 weight) for subsection titles; Title-LG (28px, 600 weight) for card headers and form labels. Body-LG (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent body copy; Body-MD (16px, 400 weight, 24px line-height) for standard paragraph text and descriptions; Label-MD (14px, 600 weight, 20px line

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1216px (76rem). On mobile (< 600px), the grid collapses to a single column with 16px horizontal padding (gutter). At 600px and above, padding increases to 24px; at 840px and above, padding increases to 32px; at 1280px and above, the container is centered with auto margins and full-width padding is removed. Vertical spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The 'gutter' token (16px) is used for horizontal spacing between grid columns and inline elements. White-space is generous but not excessive—the design avoids cramping content

Elevation & Depth

Depth in the AOK system is conveyed through subtle shadows and layering, not through color or blur. The elevation scale has three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on small interactive elements like buttons and badges; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 5px 15px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05)) for header elements and prominent overlays. Shadows use a two-layer approach: a soft, spread shadow (5px blur, 15px spread) for ambient light, and a tighter shadow (2px blur, 6px spread) for direct light, creati

Shapes

The shape philosophy is 'Institutional Clarity'—a balance between geometric precision and human approachability. Buttons and interactive elements use full-rounded corners (border-radius: 9999px), creating pill-shaped buttons that feel modern and inviting while maintaining institutional formality. Cards and containers use lg (1rem / 16px) border-radius, providing subtle rounding that softens hard edges without appearing playful or casual. Input fields and select dropdowns use DEFAULT (0.5rem / 8px) border-radius, a conservative rounding that maintains the form's structural integrity. The reason

Components

Action Elements Buttons are the primary interactive element and come in three variants: Primary (background: #18ab42, color: #ffffff, border-radius: 9999px, padding: 12px 24px, height: 44px, font-weight: 600) for main CTAs like 'Zur Startseite'; Secondary (background: transparent, color: #18ab42, border: 1px solid #18ab42, border-radius: 9999px) for alternative actions; Ghost (background: transparent, color: #18ab42, border-bottom: 1px solid #18ab42, border-radius: 9999px) for tertiary or inline actions. All buttons use the label-md typography (14px, 600 weight). Hover states apply a 350ms cubic-bezier(0.4, 0, 0.2, 1) transition and scale the button to 1.02 (a subtle 2% enlargement) or shift the background color to a darker shade (#16a038). Focus states add a 2px solid outline in the p

Do's and Don'ts

**Do**

• Do use Primary (#18ab42) exclusively for main CTAs and active/focus states—it is the brand's signature accent and must remain visually distinct.
• Do maintain a minimum contrast ratio of 4.5:1 (WCAG AA) for all body text and 3:1 for UI components; test with tools like WebAIM Contrast Checker.
• Do apply the 350ms cubic-bezier(0.4, 0, 0.2, 1) transition timing to all interactive state changes (hover, focus, active) for a consistent, professional feel.
• Do use the custom AOKBuenosAires and AOKBuenosAiresText typefaces for all UI text; fall back to Arial, Helvetica, and system sans-serif only when custom fonts are unavailable.
• Do center content on viewports wider than 1280px using the container-max-width of 1216px to prevent line lengths from exceeding ~80 characters.

**Don't**

• Don't use Primary (#18ab42) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and focus states only.
• Don't apply drop-shadows, blur effects, or glassmorphism; the institutional clarity aesthetic demands sharp, legible surfaces.
• Don't use rounded corners smaller than 0.5rem (8px) on interactive elements; they become visually ambiguous and may be mistaken for borders.
• Don't mix typeface families within a single heading or paragraph; use AOKBuenosAires for display/headline layers and AOKBuenosAiresText for body/label layers exclusively.
• Don't apply focus outlines with outline-offset less than 8px; keyboard users need clear, visible focus indicators to navigate the interface.