Behaav

Overview

Behaav is a Dutch security awareness training platform that reimagines cybersecurity education through a 'Behavioral-Centric Minimalism' aesthetic. The brand combines authoritative corporate design with warm, human-centered visual language to make security training feel accessible rather than intimidating. The UI evokes trust and competence through a carefully balanced palette of deep navy (#263563, #131b32) paired with a vibrant golden-orange accent (#f09f38), creating visual hierarchy that guides users toward action without overwhelming them. The emotional response is one of calm confidence: users feel supported by a knowledgeable partner, not lectured by a stern authority. Voice: direct, conversational, and action-oriented. Behaav speaks in the language of business outcomes and human capability, never technical jargon. Example sentence: 'Security is mensenwerk—your people are your strongest defense, and we help them become it.'

Colors

The Behaav color system operates on a principle of 'Authoritative Warmth,' where deep navy surfaces (#263563 for secondary, #131b32 for inverse-surface) establish professional credibility, while the primary accent (#f09f38) creates moments of approachability and action. Primary (#f09f38, rgb(240, 159, 56)) is deployed exclusively on call-to-action buttons ('Maak een afspraak', 'Bekijk onze aanpak'), interactive elements, and focus states—it is the brand's signature accent and the visual embodiment of 'do this next.' On-primary is always white (#ffffff) for maximum contrast and legibility at 18px+ sizes. The secondary color (#263563) anchors the header navigation and hero background, reinforcing corporate authority. Surface colors range from warm cream (#fdf6ed, #f9f6f1) for light backgroun

Typography

The Behaav type system pairs Baloo 2 (a geometric, friendly sans-serif) for headlines with Montserrat (a modern, neutral sans-serif) for body text, creating a visual tension that balances warmth with professionalism. Display (60px, 700 weight, Baloo 2) is reserved for hero headlines like 'Security is mensenwerk,' commanding attention with -0.04em letter-spacing to tighten the letterforms. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) are used for section titles and card headers, maintaining the same friendly-yet-authoritative tone. Body-lg (18px, 500 weight, 30px line-height) is the primary reading size for paragraphs and descriptive text, set in Montserrat for clarity. Body-md (16px, 400 weight) is used in forms and smaller content blocks. Label-md (14px, 600 weight) a

Layout

Behaav uses a fluid 12-column grid system with a maximum container width of 1300px (set via .container class), allowing content to breathe on desktop while remaining responsive on mobile. The page rhythm is governed by semantic spacing: lg spacing (40px) separates major sections (hero, services, testimonials), md spacing (24px) is used for card padding and component internal spacing, and sm spacing (12px) is applied to list items and form field margins. The hero section occupies full viewport height with a gradient background (#1a3051 to #131b32), left-aligned headline and body text (max 600px width), and a right-aligned image carousel. The gutter (24px) is consistently applied to all container sides, ensuring content never touches viewport edges. Sections use u-pd--md (100px padding top/b

Elevation & Depth

Behaav's elevation system is subtle and functional, avoiding heavy shadows in favor of clean separation through color and border treatments. Level 1 (Base): The page background is #fdf6ed (warm cream), with no shadow. Level 2 (Standard Cards): Cards use a 1px solid border in #dfe1e6 (surface-container-highest) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift without drama. Level 3 (Modals & Elevated Surfaces): Modals and overlays use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a semi-transparent dark overlay (rgba(0, 0, 0, 0.7)) to establish clear visual hierarchy. Hove

Shapes

Behaav employs a 'Soft-Technical' shape philosophy, combining sharp geometric precision with approachable rounded corners to balance corporate authority with human warmth. Buttons use a full pill shape (border-radius: 50px) to feel friendly and clickable, never rigid. Primary CTAs ('Maak een afspraak', 'Bekijk onze aanpak') are always 50px border-radius with 6px 30px padding, creating a compact, action-oriented form factor. Cards and containers use 10px border-radius (rounded.lg) for a subtle softness that avoids feeling childish. Form inputs use an asymmetric radius (4px 20px 4px 20px) to cre

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use background-color: rgb(240, 159, 56), color: rgb(255, 255, 255), border-radius: 50px, padding: 6px 30px, height: 48px, font-size: 18px, font-weight: 600, with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). On hover (button-primary-hover), the background shifts to #f0a84a with a 0.2s ease-in-out transition. On active (button-primary-active), the background darkens to #d68a2f. Secondary buttons (button-secondary) are transparent with a 2px solid border in #f09f38, same padding and height, and transition to background-color: #fde4c4 on hover. All buttons use Montserrat at 600 weight for consistency with body text.

Containers & Surfaces Cards (card) have background-color: #f9f6f1, border-rad

Do's and Don'ts

**Do**

• Do use the primary orange (#f09f38) exclusively on CTAs and interactive focus states—it is the brand's signature accent and must never be diluted or overused.
• Do maintain the asymmetric input border-radius (4px 20px 4px 20px) on all form fields to create a distinctive, recognizable input treatment.
• Do pair Baloo 2 headlines with Montserrat body text to balance warmth with professionalism; never reverse these roles.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to white text over gradient backgrounds to ensure readability at all sizes.
• Do use the full pill shape (border-radius: 50px) for all primary buttons to reinforce the 'approachable' brand personality.
• Do respect the spacing scale (12px sm, 24px md, 40px lg) for consistent visual rhythm; never introduce arbitrary spacing values.

**Don't**

• Don't use the primary orange on backgrounds, body text, or non-interactive elements—it must remain reserved for actions and focus states.
• Don't apply rounded corners smaller than 4px to form inputs; the asymmetric 4px 20px 4px 20px treatment is brand-distinctive and must be preserved.
• Don't mix Baloo 2 and Montserrat weights arbitrarily; follow the typography scale strictly (Baloo 2 for headlines, Montserrat for body).
• Don't create custom shadows; always use the three elevation levels (sm: 0 1px 2px, md: 0 3px 8px, lg: 0 8px 24px) with rgba(0, 0, 0, 0.15) or similar opacity.
• Don't use the secondary navy (#263563) as a primary background color on large sections; reserve it for headers and accents only.
• Don't introduce new accent colors; the system is built on primary (#f09f38), secondary (#263563), and tertiary (#1a1f29)—all other colors must derive from the surface stack.