Stiftung Warentest

Overview

Stiftung Warentest is a German independent consumer-testing foundation. Its digital surface serves readers who want verified, comparative product verdicts and practical guidance on household, finance, insurance, health and tax decisions. The aesthetic movement is best described as Editorial Clarity: a newspaper-grade reading layout with generous white space, strong black headlines and a single deep petrol accent that signals trust rather than promotion. The emotional response is measured reassurance, the feeling of opening a carefully edited consumer magazine.

The voice is factual, sober and service-oriented. Headlines are declarative and short ("Wie Sie Einbrecher den Riegel vorschieben"), category labels are set in small brand-red text above headlines, and copy avoids hype vocabulary. Example sentence in the brand voice: "Im Test: Rapsöl – welche Sorten überzeugen und welche Fette im Alltag wirklich taugen."

Colors

The palette is built on a near-white surface (#ffffff) with near-black text (#121212) and a neutral grey ladder from #f9f9f9 to #c4c4c4. Primary (#055063) is the petrol accent used for primary buttons such as the solid-fill "Registrieren" CTA, active navigation states, text links and focus rings; hover on primary shifts to #076a83. Secondary (#db083c) is the brand red, reserved for category eyebrows (e.g. "Tür- und Fenstersicherungen im Test"), product-count badges and editorial emphasis, never for large fills. Tertiary (#076a83) supports informational chips and the petrol-tinted hover wash #e9f2f5 used on list rows.

Surface stacking is flat: the page sits on #ffffff, sidebar modules on #f4f4f4 or #f9f9f9, and recently-viewed or highlighted tiles on #f1f6f8 or the petrol wash #e9f2f5. Bor

Typography

TheBest (variable, 300-800) carries nearly all interface text and gives the brand its sans-serif clarity; TheAntiquaBWeb (400-700, serif) is reserved for editorial long-form and lead paragraphs, creating a deliberate print-versus-web contrast. Display is 48px / 54px at weight 700 on desktop and steps down to 32px on mobile. Headline-md (20px / 26px, weight 700) is the workhorse for module titles and product names. Body-md is 16px / 24px at weight 400 with no letter-spacing adjustment. Label-md is 16px bold for CTAs and navigation emphasis. Apply letter-spacing: -0.02em only to display sizes above 40px; keep all body and label text at normal tracking. Small uppercase-free labels at 14px / 20px sit above headlines in brand red.

Layout

The grid is fluid with a fixed content ceiling: 4 columns on mobile, 8 from 48rem, 12 from 64rem, with a gutter of 20px on mobile, 32px at tablet and 24px at desktop. The container caps at 912px for article content with a wider 1248px envelope for full-bleed modules. Vertical rhythm uses 16px as the base unit: 12px between tightly related elements, 24px between components, and 32px to 48px between major modules. The 60/40 split of article hero and sidebar ("Zuletzt getestet") is the signature layout pattern. Use xs spacing (8px) for chip gaps and xl (24px) for module separation.

Elevation & Depth

Depth is conveyed almost exclusively by tone and hairline borders rather than shadow. Where elevation is needed (sticky header, dropdown panels), use 0px 3px 0.25rem 0px rgba(0,0,0,0.08), the brand's header shadow token. Modal overlays use a 60% black scrim (rgba(0,0,0,0.6)). Do not add shadows to cards or buttons; the flat stack is part of the editorial identity.

Shapes

The shape language is Architectural Sharpness: radii are kept between 2px and 4px so the interface reads as printed-product-precise rather than friendly. Buttons and inputs use 3px to 4px (rounded.lg at 4px for primary CTAs, 3px for form fields), product cards use 3px, and category chips use 2px outlines. The only fully round element is the 50% avatar or icon-button treatment, which keeps circular forms confined to utility icons and the cart/notification affordances.

Components

Action Elements Primary CTAs are solid petrol (#055063) with white 16px bold text, 48px height, 16px by 24px padding and 4px radius. On hover, transition background to #076a83 over 200ms ease. Secondary actions use a #f4f4f4 fill with near-black text and no border; hover moves to #e0e0e0. Keep focus states visible with a 2px outline of rgba(7,106,131,0.2) offset by 2px.

Containers & Surfaces Cards sit on #ffffff with a 1px #c4c4c4 border or on #f4f4f4 for sidebar modules, padded 20px, radius 3px. Hover on list rows switches the surface to #e9f2f5 with a 150ms ease transition and petrol text. Dividers are 1px #c4c4c4 and separate list rows rather than card shadows.

Inputs & Interaction The search field is white with an 18px/16px padding, 1px #c4c4c4 border and 3px radius; on f

Do's and Don'ts

**Do**

• Do use #055063 petrol for every primary CTA, link and active nav state so the accent stays consistent.
• Do reserve brand red #db083c for category eyebrows and product-count badges only.
• Do separate modules with 1px #c4c4c4 hairlines and 32px to 48px vertical gaps instead of shadows.
• Do set article lead paragraphs in TheAntiquaBWeb at 19px / 27px to mark editorial content.

**Don't**

• Don't introduce gradients, glass effects or coloured hero overlays; the identity is flat and print-like.
• Don't use brand red as a button fill or large background block.
• Don't apply shadows to cards or buttons beyond the header token.
• Don't set body or label text with tracking adjustments; keep letter-spacing normal below 40px.