Inventix

Overview

Inventix embodies a "Technical Confidence" aesthetic—a design language that merges cybersecurity's inherent seriousness with the approachability of a trusted advisor. The brand serves SMEs, freelancers, and individuals navigating digital threats; the UI must convey both mastery and empathy. The visual identity draws from a teal-to-lime accent spectrum (primary #e2ff5e, secondary #16404b, tertiary #1863dc), creating a sense of forward momentum and protective vigilance. The emotional response is reassurance: users feel guided through complexity, not overwhelmed by it. Typography uses Sharp Grotesk for headlines (bold, geometric, authoritative) paired with Graphik for body text (warm, legible, human-scaled), creating a hierarchy that says "we know what we're doing, and we'll explain it clearly."

The brand voice is direct, Dutch-pragmatic, and solution-focused. Vocabulary favors concrete nouns over abstractions: "risico's opsporen" (identify risks) rather than "security posture." Tone is never alarmist; instead, it's matter-of-fact and occasionally wry. Example sentence in brand voice: "Hackers don't take holidays—neither do we. Continuous monitoring means you can."

Colors

The color system is anchored by three strategic roles: Primary (#e2ff5e, a vivid lime-yellow) is the accent of action and urgency, deployed on CTAs, highlights, and the "UpdateMelding" badge to signal forward momentum. Secondary (#16404b, a deep teal) represents the brand's protective core—used in headers, navigation, and secondary buttons to convey stability and expertise. Tertiary (#1863dc, a corporate blue) supports data-driven contexts and secondary interactions, bridging the gap between the brand's warmth and institutional trust. The surface stack (white #ffffff down to #dcdcdc in container-highest) provides clean, minimal backgrounds that let content breathe; on-surface text (#0f021d, near-black) ensures legibility without harshness. Error red (#cf2e2e) is reserved for warnings and d

Typography

The type system reflects a "Authoritative yet Approachable" philosophy. Sharp Grotesk (700 weight, -0.04em letter-spacing) anchors headlines at 40–60px, commanding attention with geometric precision; this weight and spacing create visual tension that mirrors cybersecurity's high stakes. Body text uses Graphik at 16–18px, 400 weight, with 24–28px line-height, ensuring comfortable reading for technical documentation and service descriptions. Mabry Pro (600 weight) handles labels and UI text, adding a touch of personality to buttons and badges without sacrificing clarity. For small labels over busy backgrounds (e.g., badge text on primary backgrounds), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibility. Headlines use -0.02em letter-spacing to tighten the visual mass; body

Layout

The layout follows a 12-column grid with a max-width of 1280px, providing a flexible container for both desktop (1024px+) and tablet (768–1023px) viewports. The gutter is 24px, applied consistently to section margins and card padding. Spacing uses a semantic scale: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for full-page rhythm. The hero section uses lg spacing above and below to establish visual weight; card grids use md spacing between items. Container max-width of 1280px prevents text lines from exceeding 75–80 characters, maintaining readability. White-space philosophy: generous margins around primary CTAs (md padding on all sides), tighter spacing within form groups (sm between

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows, instead using subtle layering and border treatments. Level 1 (Base): flat surfaces with no shadow, relying on 1px solid borders at outline-variant (#c4c4c9) to define edges. Level 2 (Cards, Input Fields): 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 4–6px off the page, used on hover states and elevated containers. Level 3 (Modals, Popovers): 0 8px 24px rgba(0, 0, 0, 0.12), a broader, diffused shadow suggesting 12–16px elevation. Interactive elements (buttons, inputs) use no shadow by defaul

Shapes

The shape philosophy is "Soft-Technical"—rounded corners signal approachability while maintaining the geometric precision required by a security-focused brand. Buttons use full radius (9999px), creating a pill shape that feels modern and inviting; this is the most prominent rounded element, drawing the eye to CTAs. Cards and containers use md radius (6px), a subtle curve that softens edges without appearing playful. Input fields use DEFAULT radius (4px), a minimal rounding that preserves the form's structural clarity. Badges use full radius (9999px) to match buttons, creating visual cohesion.

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses #e2ff5e background with #272727 text, 12px 24px padding, full radius (9999px), and label-md typography (Mabry Pro, 600 weight, 14px). On hover, the background shifts to #c8e640 (primary-fixed-dim) over 200ms ease-out, and the shadow elevates to 0 3px 8px rgba(0, 0, 0, 0.15). The secondary button uses a 2px solid border in #16404b with transparent background; on hover, the background fills with #0e5a49 (secondary-fixed-dim) and text becomes white. Tertiary buttons (for less prominent actions) use #1863dc background with white text, md radius (6px), and 12px 20px padding; hover state shifts to #0056a7 (tertiary-container). All buttons include a 200ms transition on background-color and box-shadow to sig

Do's and Don'ts

**Do**

• Do use primary (#e2ff5e) exclusively for high-priority CTAs and status indicators; it's the brand's signature accent and loses impact if overused.
• Do maintain 24px gutter spacing between major content sections and 12px between component internals to preserve visual breathing room.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Sharp Grotesk (700 weight, -0.04em letter-spacing) for all headlines to maintain the brand's authoritative, geometric voice.
• Do pair teal secondary (#16404b) with white text for maximum contrast (7:1 WCAG AAA) on navigation and secondary buttons.

**Don't**

• Don't use primary (#e2ff5e) as a background for large text blocks; it's too bright and reduces legibility. Reserve it for buttons, badges, and highlights.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); the design system prioritizes minimalism and clarity over depth.
• Don't round corners more aggressively than full radius (9999px) on buttons or md radius (6px) on cards; the shape vocabulary is intentionally restrained.
• Don't use the tertiary blue (#1863dc) as a primary accent; it's a supporting color for data contexts and secondary interactions, not a brand signature.