NEVERHACK operates in a stark, high-trust sovereign-cybersecurity register: near-white canvas, near-black navy type (#0a0f1f), and a single electric violet (#6b2bea) that activates only for AI surface. Hierarchy is carved through weight and scale, not decoration — the 72px display headlines paired with a quiet 11–17px body voice create a clinical, operator-grade tension. Components feel like equipment, not marketing: pill-shaped controls, hairline borders on cool gray (#e5e7eb), and a distinctive purple-tinted shadow system (rgba(40,30,93,*)) that makes every elevated surface feel on-brand rather than generic. A muted signal red (#dc2626) is reserved exclusively for critical/emergency semantics — CERT, crisis, hazard — so it never gets confused with the violet brand voice.
#6b2beaBrand accent, AI surface highlights, chat response fills, decorative strokes, badge dots, icon accents — defines the AI-native identity; Hero section ambient gradient: fades from a 6%-opacity violet into Mist Surface, signaling AI atmosphere without hard color blocking
#afa9fdTinted backgrounds for AI-adjacent surfaces, soft highlight washes, capability tags
#28d3feBlue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
#f4babaRed supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
#0a0f1fPrimary text, headlines, nav, core UI — near-black with a barely-perceptible blue cast that separates it from pure black and lets violet accents feel native
#ffffffCard surfaces, elevated panels, button text on dark fills
#f6f7fcPage canvas, soft card backgrounds, subtle wash sections
#e5e7ebBorders, dividers, input outlines, structural separators — the single neutral that holds the whole UI together
#d8d7e2Card inset shadow tint, quiet elevation layer
#4e4e4eSecondary text, supporting copy, muted labels
#999999Button shadow tint, disabled affordances, tertiary text
#dc2626Critical/emergency state only — CERT badges, crisis CTAs, hazard indicators. Never used decoratively; its scarcity is its meaning; Radial emergency glow behind critical badges — 22% opacity at upper-right, fading to transparent
#2563ebInformational badges, neutral data callouts, non-critical status indicators
72px · 400 · 1 · -2.16px trackingThe quick brown fox jumps
52px · 400 · 1.08 · -1.3px trackingThe quick brown fox jumps
40px · 400 · 1.12 · -0.8px trackingThe quick brown fox jumps
34px · 400 · 1.1The quick brown fox jumps
32px · 400 · 1.2 · -0.48px trackingThe quick brown fox jumps
24px · 500 · 1.3 · -0.24px trackingThe quick brown fox jumps
22px · 500 · 1.45 · -0.11px trackingThe quick brown fox jumps
18px · 400 · 1.63 · -0.09px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Single-family system. Roobert's geometric-humanist forms handle the full scale from 11px micro-labels to 72px display headlines. The custom face's slightly condensed proportions and subtle stroke contrast make headlines feel like terminal readouts rather than marketing copy. Weight 400 carries most UI; weight 500 is reserved for nav items, button labels, and emphasis. Letter-spacing tightens aggressively as size grows: -0.03em at 72px down to neutral at body sizes; micro-labels and ALL-CAPS badges open up to +0.08–0.12em for legibility
14px9999px9999px18px10px6px2px4px5px6px8px10px11px12px14px16px18px20px22px24px28px32px40px48px56px64px73px80px96px128px144pxPill-shaped, 9999px radius, Sovereign Ink (#0a0f1f) fill, Signal White (#ffffff) text, 12px 24px padding, Roobert 15px weight 500. Subtle elevation: rgba(0,0,0,0.4) 0px 0px 1px + rgba(0,0,0,0.08) 0px 4px 8px. Acts as the grounded counterpart to violet AI surface.
Pill shape, transparent fill, 1px Sovereign Ink border, Sovereign Ink text, 12px 24px padding, 15px weight 500. No shadow. Pairs with the dark CTA to form the standard two-button hero/section pattern.
Pill shape with 18px radius (or 9999px for fully rounded), 8px 16px padding, Sovereign Ink fill, Signal White text, 13px weight 500. The slightly tighter radius vs other pills makes it feel more like a tab.
Pill shape, 9999px radius, Alert Crimson (#dc2626) fill, Signal White text, 12px 24px padding, 15px weight 500. Elevated with soft warm red shadow tint. Never use for standard CTAs — its scarcity preserves urgency.
14px border radius, white surface, 1px Cool Hairline (#e5e7eb) border, 32px internal padding. Elevated with the brand purple-tinted shadow: rgba(40,30,93,0.04) 0px 4px 12px -4px + rgba(0,0,0,0.03) 0px 1px 2px. Contains an eyebrow label (12px ALL-CAPS +0.08em), a 22–24px heading, body copy, and a 'Learn more →' link.
16–20px border radius, Mist Surface (#f6f7fc) or white fill, 1px Cool Hairline border, generous 32–40px padding. Contains a violet dot indicator, heading, description, and an embedded sub-card with numbered list (01/02/03). The sub-card uses 10px radius and lighter surface for nesting.
No visible border or background — pure typographic structure on canvas. Each card: short colored top-underline (violet, blue, or cyan, 2–3px tall, ~24px wide), 24–32px heading, body copy below. The color underline is the only decorative anchor.
Rounded card ~18px radius, white surface, multi-layer purple-tinted shadow stack. Contains: a light gray (#e5e7eb) user message bubble (rounded ~14px), a vibrant Sovereign Violet (#6b2bea) AI response bubble (rounded ~14px, white text), and a message input with a subtle 1px border. The violet bubble is the strongest brand-color moment on the page.
12px Roobert weight 500, ALL-CAPS, +0.12em letter-spacing, Sovereign Violet (#6b2bea) or Carbon Gray color. No background, no border. Sets context before each major section.
Inline pill, small radius (~6px), 10px vertical / 12px horizontal padding, 11–12px weight 500, ALL-CAPS +0.08em. Color signals category: violet-tinted for AI, neutral for MSP, crimson-tinted for CRITICAL.
Borderless row on white, single 1px top + bottom hairline in Cool Hairline. Each label: 13–14px Roobert weight 400, Carbon Gray, 24–32px horizontal padding. Repetition is the visual — no decoration needed.
Thin band (~40px), white or very light background, 1px bottom border. Centered text: 12–13px, contains a violet sparkle/dot icon and a violet 'Access the report →' link.
White background, 1px bottom border Cool Hairline, ~64–72px height. Left: NEVERHACK wordmark + N monogram. Center: 6–7 nav items in 15px weight 500 Sovereign Ink. Right: ghost 'Sign in' text, three text nav items, one dark 'Cyber AI' pill, 'Contact' text. Logo mark is a stylized 'N' in negative space within a square.
Pill shape (~999px radius), white fill, 1px Cool Hairline border, 12–16px padding. Placeholder 'Enter your message' in 14px Carbon Gray. Optional icon buttons (up-arrow submit, mic) at right edge, 32×32 hit targets.
#f6f7fcBase page background, subtle off-white with cool cast that separates content from pure white surfaces
#ffffffDefault card and panel background, chat widget, elevated content blocks
#f6f7fcSub-cards inside larger cards, inset content, visual differentiation within parent surfaces
#afa9fdSparse highlight surfaces for AI context, capability tag backgrounds — use only for emphasis, never as full sections
rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px
rgba(40, 30, 93, 0.04) 0px 4px 12px -4px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px
rgba(40, 30, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px
rgb(235, 232, 228) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 4px 4px 0px
rgba(40, 30, 93, 0.06) 0px 1px 2px 0px
Max-width 1200px centered, generous section gaps (80px+) between bands. Hero is a two-column split: left holds eyebrow + 52–72px display headline + body + two-button group; right holds the floating AI chat widget, vertically centered against the headline. Sections alternate between full-width white bands and subtle Mist Surface (#f6f7fc) washes, separated by hairline borders rather than heavy dividers. Feature sections use a 3-column card grid with equal-width cards and consistent 12–24px gutters. Principle sections drop to borderless 3-column typographic grids. Sector ticker sits as a single full-width borderless row between hero and content. Navigation is a sticky top bar with right-aligned utility nav and one dark accent pill marking the current context.
Visuals are sparse and purposeful: abstract 3D gradient orbs (violet-to-blue and crimson-to-pink) appear as card hero images, tightly cropped in rounded containers. No lifestyle photography, no people, no real-world environments. The visual language is: glowing liquid-metal sculptures on pure color, suggesting AI computation and threat energy. Icons are thin-line monochrome (1.5px stroke) in Sovereign Ink, with occasional violet accent. The overall density is text-dominant — imagery punctuates rather than narrates, occupying roughly 20% of any given section.
**Quick Color Reference** - text: #0a0f1f (Sovereign Ink) - background: #f6f7fc (Mist Surface) - card: #ffffff (Signal White) - border: #e5e7eb (Cool Hairline) - accent: #6b2bea (Sovereign Violet) - primary action: #dc2626 (filled action) **Example Component Prompts** 1. Create a Primary Action Button: #dc2626 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. *AI Chat Card*: 18px radius, #ffffff fill, shadow rgba(40,30,93,0.25) 0px 30px 45px -30px + rgba(0,0,0,0.1) 0px 18px 36px -18px. User message bubble: #e5e7eb fill, #0a0f1f text, 14px. AI response bubble: #6b2bea fill, #ffffff text, 14px weight 500. Input: pill 999px radius, 1px #e5e7eb border, 14px placeholder in #4e4e4e. 3. *Capability Card*: 14px radius, #ffffff fill, 1px #e5e7eb border, shadow rgba(40,30,93,0.04) 0px 4px 12px -4px + rgba(0,0,0,0.03) 0px 1px 2px. Category badge: 6px radius, 10px 12px padding, 11px ALL-CAPS weight 500, #6b2bea on #afa9fd wash. Heading 24px weight 500 #0a0f1f. Body 16px weight 400 #4e4e4e. 'Learn more →' link in #6b2bea, 15px weight 500. 4. *Critical Alert Card*: 14px radius, #ffffff fill, 1px #e5e7eb border. Badge: 9999px radius, #dc2626 fill, 11px ALL-CAPS #ffffff weight 500. Heading 24px weight 500 #0a0f1f. CTA: 9999px radius, #dc2626 fill, #ffffff text, 12px 24px padding, 15px weight 500, shadow with warm red tint. 5. *Principle Column*: No border, no background. Top accent: 2px tall × 24px wide colored bar (use #6b2bea, #2563eb, or #28d3fe). Heading 24px weight 500 #0a0f1f. Body 16px weight 400 #4e4e4e, line-height 1.60.
Every shadow in this system uses either pure neutral black at low opacity or the brand purple base (rgb 40,30,93) at low opacity. The purple-tinted shadows are the signature: they make even a generic card lift feel on-brand. Never use warm brown or cool blue shadows — the purple cast is non-negotiable for brand coherence. Elevation is used sparingly: only on primary CTAs, capability cards, and the chat/AI surface. Most UI is flat, separated by 1px hairline borders.
The 5% colorfulness target is a hard contract. 95% of the rendered page should be neutrals (Sovereign Ink, Signal White, Mist Surface, Cool Hairline). The remaining 5% splits between Sovereign Violet (AI surface, ~3.5%) and Alert Crimson (critical state, ~1.5%). Cyber Cyan appears at <0.5% — a single accent per page maximum. If violet starts appearing on non-AI elements, the brand signal dilutes.
Same sovereign-cybersecurity register: dark navy type on white canvas, pill-shaped controls, hairline borders, and a single accent color reserved for threat/AI context
Near-identical chat-surface treatment with violet AI response bubbles, restrained palette, and 72px display headlines paired with quiet 15–17px body text
Same pill-button geometry, hairline border system, and the discipline of using one chromatic accent (violet here, purple there) against a near-monochrome neutral system
Same comfortable density with 4px base, generous card padding, and the practice of letting eyebrows and badges carry the only chromatic punctuation
Same operator-grade typographic tension: oversized display headlines with 1.00 line-height next to clinical body copy, signal red reserved exclusively for critical state
Use the design exports or connect Musterlab to your AI.
