HumanInData

Overview

HumanInData is an enterprise AI governance platform that embeds verified human oversight into automated decision systems. The design system reflects a "Technical Minimalism with Neon Precision" aesthetic—combining deep blacks (#020202), institutional grays, and a signature cyan accent (#04e1f9) that signals trust, clarity, and technological sophistication. The brand serves European enterprises navigating AI Act compliance, transforming regulatory burden into competitive advantage. The UI evokes a sense of controlled power: a dark, grid-like canvas (reminiscent of technical infrastructure) punctuated by vibrant cyan accents that draw attention to critical decision points and human-in-the-loop moments. Voice: authoritative yet accessible, precise without jargon, confident in complexity. Example sentence: "Your AI decisions are now auditable, traceable, and human-verified—compliance becomes operational."

Colors

The color system operates on a principle of "high-contrast accountability." The primary accent, cyan (#04e1f9), is deployed exclusively on interactive elements (CTAs, focus states, active navigation) and data-critical highlights—it is the visual signal that a human decision point exists. The surface stack anchors the interface in deep blacks and near-blacks (surface: #020202, surface-dim: #000814, surface-container: #121212) to establish a professional, data-center aesthetic; these layers provide visual hierarchy without introducing warmth or distraction. Secondary cyan (#a2f4f2) and tertiary magenta (#e600e6) serve as supporting accents for status indicators, validation states, and secondary CTAs. On-surface text is a warm off-white (#e6e6e2) for legibility over dark backgrounds; outline

Typography

The type system uses Poppins as the primary typeface (with Poppins Fallback for font-metric stability), chosen for its geometric clarity and technical neutrality. Display sizes (72px, 700 weight) anchor hero sections with strong presence; headline-lg (48px, 600 weight) and headline-md (32px, 600 weight) establish section hierarchy without excessive visual weight. Body text (16px–18px, 400 weight) maintains legibility at 24px line-height over dark backgrounds; letter-spacing is increased slightly (0.01em–0.02em) to reduce visual density and improve scannability of regulatory content. Labels use 600–700 weight and increased letter-spacing (0.05em–0.08em) to emphasize call-to-action and form elements. For small labels over busy backgrounds (e.g., status badges, data annotations), apply text-s

Layout

The layout follows a 12-column grid with a fixed container max-width of 950px, centered on the viewport. Page rhythm is established through lg spacing (40px) for section separation and md spacing (24px) for component grouping; the gutter is 32px for left/right padding on full-width sections. The hero section spans full viewport height (100vh) with a split layout: text content left-aligned (with 17rem left margin for breathing room), and an animated SVG illustration right-aligned. Secondary sections alternate between left-text/right-visual and full-width content blocks, each maintaining 80vh minimum height to create a deliberate, unhurried scroll experience. On mobile (<768px), sections collapse to single-column flex layouts with 80% width constraints and centered alignment; padding reduces

Elevation & Depth

Depth is conveyed through a restrained shadow system and layered backgrounds rather than dramatic drop shadows. Level 1 (Base): the dark surface (#020202) with subtle grid texture overlay. Level 2 (Cards/Containers): surface-container (#121212) with a 1px border at outline-variant (#505050) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover. Level 3 (Modals/Overlays): surface-container-high (#1f1f1f) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20) and optional backdrop-filter: blur(10px) for semi-transparent overlays. The header uses a fixed position with background-color: rgba(2, 2, 2, 0.

Shapes

The shape philosophy is "Geometric Precision with Organic Moments." Buttons and primary CTAs use full border-radius (9999px / border-radius: 2rem) to signal approachability and forward momentum—the rounded pill shape contrasts with the angular grid background and suggests a smooth, human-centered interaction. Cards and containers use moderate radius (12–16px / border-radius: 0.75rem–1rem) to balance technical rigor with visual softness. Form inputs use minimal radius (8px / border-radius: 0.5rem) to maintain visual hierarchy and suggest precision data entry. The animated SVG illustration (the

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses background: {colors.primary} (#04e1f9), text-color: {colors.on-primary} (#020202), and border-radius: 2rem (32px). On hover (button-primary-hover), the background shifts to {colors.primary-container} (#00a8cc) and the button text translates left by -8px while an arrow icon slides in from the right (opacity: 0 → 1, right: -20px → 1rem) over 300ms ease. Secondary buttons (button-secondary) use transparent background with a 2px solid border in {colors.primary} and the same hover effect. All buttons maintain a fixed height of 48px with padding: 0 32px for consistent touch targets.

Containers & Surfaces Cards (card) use background: {colors.surface-container} (#121212), rounded: 16px, p

Do's and Don'ts

**Do**

• Do use {colors.primary} (#04e1f9) exclusively for interactive elements and human-decision highlights—it is the visual anchor for trust and accountability.
• Do maintain the dark surface stack (surface: #020202 through surface-container-highest: #2a2a2a) to preserve the technical, data-center aesthetic and reduce cognitive load.
• Do apply letter-spacing: 0.01em–0.02em on body text over dark backgrounds to improve scannability of regulatory and compliance content.
• Do use the rounded pill shape (border-radius: 2rem) for primary CTAs to signal human-centered, approachable interaction.
• Do layer shadows subtly (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover) rather than using dramatic elevation—depth should feel controlled and professional.

**Don't**

• Don't use bright, warm colors (reds, oranges, yellows) as primary accents—they conflict with the technical minimalism and reduce trust perception.
• Don't apply border-radius: 50% or full-circle shapes to cards or containers; reserve organic shapes for the animated SVG illustration and button CTAs.
• Don't exceed 950px container max-width on desktop; the constrained width maintains focus and prevents content from feeling scattered across wide screens.
• Don't use system fonts or generic sans-serif fallbacks; always specify Poppins with Poppins Fallback to maintain consistent geometric character shapes.
• Don't add drop shadows to input fields or form elements—use border color shifts and focus rings (box-shadow: 0 0 0 3px rgba) instead to signal interactivity.