Ritter Sport

Overview

Ritter Sport is a heritage German chocolate manufacturer that celebrates the square, practical perfection of its iconic product through a bold, ingredient-forward visual language. The design system embodies 'Architectural Minimalism'—a philosophy that treats color as structural material, typography as monumental form, and whitespace as deliberate absence. The brand serves chocolate enthusiasts and families seeking premium, responsibly-sourced confectionery, evoking feelings of warmth, authenticity, and quiet pride in craftsmanship.

The voice is direct, unpretentious, and rooted in German precision: 'Quadratisch. Praktisch. Gut.' (Square. Practical. Good.) This mantra defines the tone—no breathless marketing, no artificial urgency. Every word and color choice reflects the belief that excellence speaks for itself. The vocabulary favors concrete nouns (cocoa, ingredients, family) over abstract adjectives, and the visual rhythm mirrors the brand's heritage: bold, measured, unapologetically traditional yet contemporary.

Colors

The Ritter Sport palette is organized around three structural pillars: a deep maritime primary (rgb(1, 81, 134) / #015186), a vibrant golden secondary (rgb(255, 198, 0) / #ffc600), and a warm terracotta accent (rgb(211, 39, 55) / #d35237). Primary is deployed on all primary CTAs, navigation highlights, and interactive focus states—it conveys trust and authority rooted in the brand's 80+ year heritage. Secondary (golden yellow) is reserved for badges, highlights, and secondary CTAs, evoking the warmth of roasted cocoa and the sun-drenched cacao plantations featured in campaign imagery. Tertiary (burnt orange) appears on tertiary actions and accent elements, bridging the warmth of chocolate with the earthiness of ingredients.

The surface stack is anchored in a light, neutral gray (rgb(238,

Typography

The type system uses the proprietary FuturaRS20 family across eight levels, from display (72px, 700 weight, -0.02em tracking) down to label-sm (12px, 500 weight, 0.04em tracking). The hierarchy is deliberately steep: display and headline-lg use the bold EL variants (FuturaRS20_EL_Bold) for monumental impact on hero sections, while body text defaults to the lighter CY variants (FuturaRS20_CY_Light, FuturaRS20_CY_Book) to maintain readability at 16–18px. Letter-spacing increases as size decreases (body-md uses 0.025em, label-sm uses 0.04em), a technique that compensates for optical crowding in small text and reinforces the brand's geometric precision. All headlines use negative letter-spacing (-0.02em to -0.01em) to create visual density and authority. On small labels over busy backgrounds (

Layout

The page layout follows a 12-column grid with a fixed container max-width of 1200px, centered with symmetric padding. The grid uses 0px column gap and 0px row gap, allowing full-bleed background images and color blocks to extend edge-to-edge while content aligns to the grid. Sections are separated using the lg spacing token (40px) for major rhythm breaks and md spacing (24px) for subsection separation. Hero sections occupy 90vh to 100vh height, with padding applied as 5vh 10vw to 10vh 15vw to create breathing room around text and CTAs. Card grids use 2-column layouts on desktop (1200px+) and collapse to single-column on tablet (768–1024px) and mobile (<768px). The gutter between cards is 24px (md spacing). Whitespace is treated as a design material: negative space around headlines is never

Elevation & Depth

Depth in the Ritter Sport system is achieved through a three-tier shadow hierarchy and strategic use of background color shifts. Level 1 (Base/Flat) uses no shadow; elements sit flush on the surface background (rgb(238, 238, 238)). Level 2 (Standard Cards & Containers) applies a soft shadow: 0 3px 8px rgba(0, 0, 0, 0.15), lifting the element 4–8px above the base. Level 3 (Primary CTAs, Elevated Modals, Hover States) uses the brand's signature shadow: rgba(0, 0, 0, 0.25) 0 3px 11px 0, creating a pronounced lift of 12–16px. On hover, primary buttons transition from Level 3 to an enhanced shadow

Shapes

The shape philosophy is 'Geometric Pragmatism'—minimal rounding that respects the brand's square product icon while maintaining modern usability. Buttons use 3px border-radius (sm rounded), creating a subtle softness that prevents harsh corners without sacrificing the geometric aesthetic. Cards and containers use 8px border-radius (lg rounded) for a more approachable, nested feel. Input fields use 4px border-radius (DEFAULT rounded) to align with button styling and create visual cohesion in forms. Badges and pills use full border-radius (9999px) to signal secondary, non-critical information. A

Components

Action Elements Primary buttons (button-primary) use rgb(1, 81, 134) background with white text, 56px height, 16px vertical padding, 32px horizontal padding, 3px border-radius, and the lg elevation shadow (rgba(0, 0, 0, 0.25) 0 3px 11px 0). On hover, the background darkens to #0d3f66 and the shadow intensifies to rgba(0, 0, 0, 0.3) 0 6px 16px 0 over a 200ms transition. Active state uses #0a2d4d. Secondary buttons mirror primary styling but use transparent background with a 2px solid border in primary color and no shadow; on hover, the background fills with surface-container-high (rgb(209, 170, 100)). Accent buttons (button-accent) use the golden secondary (rgb(255, 198, 0)) with black text and the same shadow treatment as primary; hover state shifts to #ffba0a. All buttons use FuturaRS

Do's and Don'ts

**Do**

• Do use primary (rgb(1, 81, 134)) exclusively for primary CTAs, focus states, and navigation highlights—it is the brand's most authoritative color and must not be diluted.
• Do apply the lg elevation shadow (rgba(0, 0, 0, 0.25) 0 3px 11px 0) to all primary buttons and elevated surfaces to create clear visual hierarchy.
• Do maintain the steep typographic hierarchy: display and headline-lg must use FuturaRS20_EL_Bold at 72px and 48px respectively, with negative letter-spacing to create monumental impact.
• Do use full-bleed background images with background-attachment: fixed and a 0.1 opacity overlay to create depth and ensure text legibility on hero sections.
• Do separate major sections with lg spacing (40px) and subsections with md spacing (24px) to establish clear visual rhythm and breathing room.

**Don't**

• Don't use secondary (rgb(255, 198, 0)) on primary CTAs or navigation—it is a highlight and accent color only, reserved for badges and secondary actions.
• Don't apply border-radius greater than 8px to buttons or cards; excessive rounding undermines the brand's geometric precision and architectural aesthetic.
• Don't use light weights (FuturaRS20_CY_Light) for headlines; headlines must use bold variants (FuturaRS20_EL_Bold or FuturaRS20_CY_Bold) to maintain visual authority.
• Don't reduce letter-spacing on body text below 0.02em; the brand's precision requires generous tracking to maintain readability and geometric clarity.
• Don't apply shadows to flat, non-interactive elements; shadows are reserved for buttons, cards, and elevated surfaces to signal interactivity and depth.