Prävention Polizei NRW

Overview

Prävention Polizei NRW is a civic-authority digital platform delivering crime prevention guidance and safety awareness to North Rhine-Westphalia residents. The design language embodies 'Authoritative Clarity'—a high-contrast, bold aesthetic that prioritizes legibility and trust through a deep navy canvas (#002749) punctuated by an electric lime-yellow accent (#ebff00). The interface evokes institutional confidence without coldness: the vivid primary color signals actionable guidance, while the secondary cobalt blue (#1449cc) reinforces official authority. The emotional response is one of reassurance and empowerment—citizens are guided toward protective action through clear, unambiguous visual hierarchy. Voice: direct, civic-minded, never alarmist. The tone is informative and protective, speaking to residents as stakeholders in their own safety. Example sentence: 'Erkennen Sie die Warnsignale von Betrugsmethoden — wir zeigen Ihnen, wie Sie sich schützen.'

The brand personality balances institutional gravitas with accessible warmth. Typography uses OpenSans-Regular at bold weights (600–800) to convey authority, while generous line-height (52px for headlines, 28px for body) ensures readability on screens and print. The design system rejects minimalism in favor of purposeful density: every element serves the mission of public safety education.

Colors

The color system is built on a 'Dark Authority with Bright Guidance' principle. Surface (#002749, rgb(0, 39, 73)) is a deep navy that establishes institutional credibility and reduces eye strain during extended reading. Primary (#ebff00, rgb(235, 255, 0)) is the electric lime accent used exclusively for call-to-action buttons, focus states, and critical safety alerts—its high contrast ratio (19:1 against surface) ensures WCAG AAA compliance and immediate visual recognition. Secondary (#1449cc, rgb(20, 73, 156)) is a cobalt blue deployed for secondary actions, badges, and informational containers, reinforcing official police branding. Tertiary (#00b2ff, rgb(0, 178, 255)) is a bright cyan reserved for highlights, links, and interactive feedback states. Error (#f27474, rgb(242, 116, 116)) sig

Typography

The type system uses OpenSans-Regular exclusively, a humanist sans-serif that balances institutional clarity with approachability. Display (60px, weight 800) anchors hero sections with commanding presence; Headline-lg (44px, weight 800) is reserved for page titles and major section breaks. Headline-md (32px, weight 700) introduces subsections, while Title-lg (24px, weight 600) marks card headers and form labels. Body-lg (18px, weight 400, line-height 28px) is the primary reading size for hero copy and long-form content; Body-md (16px, weight 400, line-height 24px) handles standard paragraph text and card descriptions. Label-md (14px, weight 600, letter-spacing 0.02em) is applied to button text and form labels to ensure legibility at small sizes; Label-sm (12px, weight 500, letter-spacing 0

Layout

The layout system uses a 12-column grid with a maximum container width of 1360px, providing a fixed-width structure that ensures consistent information hierarchy across devices. The gutter spacing is 24px (md token), creating breathing room between columns without sacrificing density. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for related items within a container. The hero section occupies full viewport height with a 40px top margin, positioning the h1 headline at 44px with 52px line-height to create a commanding entry point. Card layouts use md padding (24px) internally, with 12px (sm) spacing between card elements. Input fields and buttons are sized at 44px height to meet touch-target accessibility standard

Elevation & Depth

Depth is conveyed through layered opacity and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the surface background (#002749) with no shadow, establishing the foundation. Level 2 (Standard Card): rgba(19, 21, 24, 0.4) background with a 1px border at rgba(179, 196, 217, 0.15) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), creating a gentle lift. Level 3 (Elevated/Modal): rgba(19, 21, 24, 0.6) background with backdrop-filter: blur(8px), a 1px border at rgba(179, 196, 217, 0.2), and box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2), establishing clear visual separation. Interactive h

Shapes

The shape philosophy is 'Institutional Precision with Approachable Curves'—sharp corners on data-heavy elements, rounded corners on interactive and human-facing components. Buttons use full rounding (border-radius: 999px) to signal interactivity and reduce visual harshness; this 44px-tall button with 999px radius creates a pill shape that feels inviting while maintaining authority. Cards use md rounding (12px) to balance structure with approachability; input fields use a tighter 22px radius (custom, not a standard token) to suggest containment and focus. Form labels and badges use full roundin

Components

Action Elements Buttons are the primary interaction mechanism and use three distinct variants. Primary buttons (bg: #ebff00, text: #131518, height: 44px, padding: 12px 24px, border-radius: 999px) are reserved for the most important action per screen—typically 'Akzeptieren' (Accept) or 'Jetzt Mitmachen' (Join Now). On hover, the background shifts to #d4e600 with a glow shadow (0 4px 12px rgba(235, 255, 0, 0.25)) and a 0.2s ease transition. Secondary buttons (bg: transparent, border: 2px solid #ebff00, text: #ebff00, height: 44px, padding: 12px 24px, border-radius: 999px) are used for alternative actions like 'Nein, danke' (No, thanks); on hover, the background becomes rgba(235, 255, 0, 0.1). Tertiary buttons (bg: #1449cc, text: white, height: 44px, padding: 12px 24px, border-radius: 999

Do's and Don'ts

**Do**

• Do use primary yellow (#ebff00) exclusively for the most critical action per screen—typically a single CTA button; overuse dilutes its signal strength.
• Do maintain a minimum contrast ratio of 4.5:1 (WCAG AA) for all body text; the primary color achieves 19:1 against surface, exceeding AAA standards.
• Do apply md spacing (24px) as the default separation between major content blocks; use lg (40px) only for section breaks to avoid excessive whitespace.
• Do use OpenSans-Regular at weight 600+ for all interactive elements (buttons, links, form labels) to signal affordance and reduce cognitive load.
• Do apply backdrop-filter: blur(8px) to card backgrounds to create visual depth and distinguish elevated content from the base surface.

**Don't**

• Don't use secondary blue (#1449cc) or tertiary cyan (#00b2ff) as primary CTAs; reserve these for supporting actions and informational elements.
• Don't apply border-radius smaller than 12px (md) to cards or containers; sharp corners reduce approachability and conflict with the institutional-yet-warm aesthetic.
• Don't exceed 2 levels of visual hierarchy on a single screen; use primary, secondary, and tertiary buttons sparingly to avoid decision paralysis.
• Don't use body text smaller than 16px (body-md) for long-form content; the dark surface (#002749) requires larger type to maintain readability and reduce eye strain.