VKE-Kosmetikverband

Overview

VKE-Kosmetikverband is the authoritative trade association representing prestige cosmetics manufacturers and distributors in Germany's selective beauty market. The design system embodies 'Institutional Modernism'—a refined aesthetic that merges classical serif typography with contemporary clarity, evoking trust, professionalism, and understated sophistication. The visual language prioritizes legibility and hierarchy over decoration, reflecting the organization's role as a serious advocate for fair competition and brand protection. The UI conveys calm authority: every element serves a purpose, every color choice signals intent. Voice: measured, precise, solution-oriented. Example: 'The VKE protects your brand's integrity through regulatory advocacy and market intelligence.'

Colors

The color palette is anchored by a distinctive crimson primary (#e3152f) deployed on CTAs, active states, and brand-critical UI elements—this red commands attention without aggression, signaling urgency and institutional authority. The surface stack uses warm, neutral beiges (#f0f0ea base, #ffffff bright) that evoke premium paper stock and refined restraint; on-surface text is a warm charcoal (#4e4848) for legibility without harshness. Secondary blue (#0069e2) supports data visualization and secondary actions, while tertiary gold (#f9cb25) highlights achievements or premium tier content. Error red (#cf2e2e) is reserved for validation failures. The outline-variant (#c4c4bf) creates subtle visual separation without visual noise. Usage: Primary (#e3152f) on all primary CTAs, hover states dark

Typography

The type system pairs Quattrocento (a classical serif with generous proportions) for display and headline tiers with Arial for body and label text, creating a 'formal-accessible' voice. Display (60px, 400 weight, -0.02em tracking) anchors hero sections with gravitas; headline-lg (44px, 400 weight) titles major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading at 1200px container width. Labels use Arial at 12–14px with 0.02–0.03em tracking to signal UI affordances. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on light backgrounds when contrast dips below WCAG AA; use font-weight: 600 exclusively for labels and CTAs to maintain visual hierarchy. Serif headlines convey institutional authority; sans-serif body text ensures modern legibility. Never mix serif

Layout

The layout employs a 12-column grid with a 1200px max-width container, centered with 24px gutters on desktop (reducing to 12px on tablet, 8px on mobile). Page rhythm follows a 'breathing' model: section separation uses lg spacing (40px) between major blocks, md spacing (24px) between subsections, and sm spacing (12px) between related elements. Hero sections occupy full viewport height with dark overlay (rgba(0, 0, 0, 0.4)) over background imagery, ensuring headline legibility at 44px. Card-based content uses md padding (24px) with 1px outline-variant borders and md shadows (0 3px 8px rgba(0, 0, 0, 0.15)). Tables employ striped rows (alternating surface / surface-container backgrounds) with primary-colored headers (background: #e3152f, color: #ffffff). White-space is generous: never compres

Elevation & Depth

Depth is achieved through a restrained shadow and border system rather than color shifts. Level 1 (Base): flat surfaces with 1px outline-variant borders (#c4c4bf) and no shadow. Level 2 (Standard Cards/Inputs): 0 3px 8px rgba(0, 0, 0, 0.15) shadow with 1px border, creating subtle lift. Level 3 (Modals/Elevated Panels): 0 8px 24px rgba(0, 0, 0, 0.12) shadow with 1px border, reserved for overlays and high-priority content. Hover states transition shadows from md to lg over 200ms (ease-in-out), signaling interactivity without jarring motion. No blur or glassmorphism effects; elevation is purely s

Shapes

The shape philosophy is 'Refined Pragmatism'—minimal rounding that softens without compromising authority. Buttons use full radius (9999px) to signal primary actions and create visual distinction from cards. Cards and input fields use 4px (DEFAULT) or 8px (md) radius, balancing approachability with professional restraint. Dividers and borders are sharp (0px radius). The rationale: full-radius buttons stand out as interactive affordances; modest card rounding prevents the UI from feeling austere while maintaining institutional gravitas. Avoid 50% radius except on buttons and badges; avoid sharp

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (#e3152f background, white text, 9999px radius, 48px height, 12px 32px padding) use label-md typography (14px, 600 weight) and transition to #c70a23 on hover (200ms ease-in-out). Secondary buttons mirror primary styling but use transparent background with 2px primary border and primary text color, filling to primary-container (#fce4e8) on hover. Ghost buttons (transparent, outline-variant border, 40px height) are used for tertiary actions and transition to surface-container-high on hover. All buttons include a 3px focus ring (rgba(227, 21, 47, 0.1)) when keyboard-focused.

Containers & Surfaces Cards use surface-bright (#ffffff) background with 1px outline-variant border (#c4c4bf), md padding (24px), and m

Do's and Don'ts

**Do**

• Do use primary red (#e3152f) exclusively on CTAs, active states, and brand-critical UI—never on backgrounds or body text.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile; never compress below 12px.
• Do apply 200ms ease-in-out transitions to all hover/focus state changes (background, shadow, color).
• Do use Quattrocento serif for headlines (display, headline-lg/md) and Arial sans-serif for body and labels to signal hierarchy.
• Do include a 3px focus ring (rgba(227, 21, 47, 0.1)) on all interactive elements for keyboard accessibility.
• Do use 1px outline-variant borders (#c4c4bf) on cards and inputs; never use thicker borders unless indicating error or focus.
• Do stack shadows: md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated/modal content.
• Do use full radius (9999px) only on buttons and badges; use 4–8px radius on cards and inputs.

**Don't**

• Don't use secondary blue (#0069e2) or tertiary gold (#f9cb25) as primary action colors; reserve them for data visualization and supporting UI.
• Don't apply shadows to text or use text-shadow except when contrast falls below WCAG AA on light backgrounds (then use 0 1px 2px rgba(0, 0, 0, 0.08)).
• Don't mix serif and sans-serif typefaces within a single paragraph or section; maintain clear tier separation.
• Don't compress spacing below sm (12px) between interactive elements or below md (24px) between major sections.
• Don't use glassmorphism, blur effects, or transparency overlays on core UI elements; maintain clarity and institutional formality.
• Don't apply more than 2–3 surface-container steps in a single view; excessive background variation creates visual noise.
• Don't use rounded corners (>4px) on input fields or dividers; reserve rounding for buttons, badges, and cards.
• Don't animate transitions faster than 150ms or slower than 300ms; maintain snappy, professional responsiveness.