Helsing

Overview

Helsing is a defense-technology platform that transforms complex AI security into a visual language of institutional authority and urgent clarity. The design system embodies 'Institutional Minimalism'—a movement that strips away ornament to expose pure function, using extreme contrast (pure black #000000 against pure white #ffffff) and a single vivid accent (orange #ff8c42) to command attention and signal critical action. The brand serves governments, election officials, and democratic institutions, evoking confidence through restraint: every pixel earns its place. The emotional response is one of precision and resolve—users should feel that they are wielding a powerful, trustworthy tool against real threats.

The voice is direct, technical without jargon, and urgent without panic. Helsing speaks in declarative sentences with active verbs: 'Detect threats in real time. Respond with confidence.' The vocabulary favors military and scientific terminology (deploy, threat vector, resilience) paired with democratic values (protect, defend, transparency). The brand personality is uncompromising—it does not apologize, does not soften, does not decorate. Example sentence: 'Our AI detected 47 coordinated inauthentic accounts targeting the election. We neutralized them in 3 minutes.'

Colors

The color system is built on a foundation of absolute contrast: surface is pure black (#000000), on-surface is pure white (#ffffff). This creates maximum legibility and visual hierarchy for critical information. Primary (#ff8c42) is a vivid, warm orange—the brand's signature accent—used exclusively on call-to-action buttons ('Join the team'), interactive hover states, and alerts that demand immediate attention. It appears sparingly but unmistakably, ensuring users always know where to click. Secondary (#e4dfd5) is a warm beige, derived from the brand's theme color, used for subtle backgrounds and secondary text to provide visual relief from the black-white axis without compromising contrast. Tertiary (#ffffff) reinforces the white palette for container backgrounds and elevated surfaces. Th

Typography

The type system uses Suisse Intl as the primary typeface, a geometric sans-serif that conveys precision and modernity while remaining highly legible at all sizes. The hierarchy is built on weight and scale rather than serif/sans contrast: display (170px, weight 450) anchors hero sections with commanding presence; headline-lg (88px, weight 450) and headline-md (54px, weight 450) establish section breaks; title-lg (32px, weight 500) introduces card and component titles; body-lg (18px, weight 400) and body-md (16px, weight 400) carry primary content; label-md (14px, weight 600) and label-sm (12px, weight 600) label interactive elements and metadata. Letter-spacing is tightly controlled: display and headline levels use -0.02em to -0.015em to compress large text and increase visual impact, whil

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px (theme(screens.3xl)), centered on the viewport with symmetric margins. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the standard gutter for horizontal padding and vertical section spacing; lg (40px) separates major sections; xl (64px) creates breathing room between hero and content blocks. Horizontal padding (px-container) is 24px on mobile and tablet, increasing to 40px on desktop to accommodate wider viewports. Vertical padding (py-container) is 85px on mobile, 54px on tablet, and 143px on 3xl screens, creating a rhythm that scales with viewport size. White space is used aggressively to

Elevation & Depth

Depth is conveyed through layered surfaces and precise shadows rather than color gradients. The elevation system defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and borders; md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and modals; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements like dropdowns and hover states. Shadows are always black with low opacity, preserving the stark contrast of the black-and-white palette. Surfaces are layered using the surface-container stack: base surface (#000000), surface-container-low (#0f0f0f) for subtle elevation

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and functional, never decorative. The rounded scale uses sm (0.25rem / 4px) for small, tight components like badges and tags; DEFAULT (0.5rem / 8px) for buttons and input fields, providing just enough softness to feel modern without compromising the sharp, institutional aesthetic; md (0.75rem / 12px) for secondary buttons and list items; lg (1rem / 16px) for cards and larger containers; xl (1.5rem / 24px) for modals and hero sections; full (9999px) for pill-shaped buttons and badges. The rationale is that smaller compone

Components

Action Elements Buttons are the primary interactive element and use a consistent 150ms ease-in-out transition for all state changes. button-primary (#ff8c42 background, black text, 8px 16px padding, 0.5rem radius) is the dominant CTA, appearing on 'Join the team' and other high-priority actions. On hover, button-primary transitions to button-primary-hover (#ff8c42 darkened to #ff7a2a) with increased visual weight. button-secondary (transparent background, white text, 1px outline, 0.5rem radius) is used for secondary actions like 'Learn more' or navigation links; on hover, it gains a background of surface-container-high (#2a2a2a) and text color shifts to primary (#ff8c42). button-ghost (rgba(255, 255, 255, 0.05) background, primary text, no border) is used for tertiary actions; on hover

Do's and Don'ts

**Do**

• Do use primary (#ff8c42) exclusively for high-priority CTAs and interactive hover states—it is the brand's most precious color and loses impact if overused.
• Do maintain extreme contrast: pair white text on black backgrounds and black text on white/orange backgrounds to ensure WCAG AAA compliance.
• Do apply the 150ms ease-in-out transition to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use the spacing scale semantically: md (24px) for standard gutters, lg (40px) for section breaks, xl (64px) for hero spacing—never hardcode arbitrary values.
• Do layer surfaces using the surface-container stack to create visual hierarchy without relying on color gradients or transparency.
• Do use Suisse Intl at all sizes and weights; it is the only approved typeface and ensures institutional consistency across all touchpoints.

**Don't**

• Don't use primary (#ff8c42) for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and critical alerts.
• Don't apply rounded corners larger than lg (1rem) to buttons or inputs; the institutional aesthetic demands visual precision and tightness.
• Don't use color alone to convey state changes; always pair color with shadow, border, or typography weight changes for accessibility.
• Don't apply shadows larger than lg (0 3px 8px rgba(0, 0, 0, 0.15)) to standard components; excessive depth dilutes the stark, minimalist aesthetic.
• Don't mix typefaces or use system fonts as fallbacks; always specify Suisse Intl with appropriate fallbacks (ui-sans-serif, system-ui, sans-serif).
• Don't use transparency or glass-morphism effects; the black-and-white palette demands opaque, flat surfaces for maximum clarity and accessibility.