---
title: "NEVERHACK design system"
variant: extended
source: https://neverhack.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/neverhack-com-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# NEVERHACK · Design System

> Sovereign cyber defence, expressed with clarity and restraint.

**Theme:** light · **Industry:** ai · **Source:** https://neverhack.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

NEVERHACK pairs sovereign AI and defence-grade cybersecurity with a bright, restrained interface. Generous white space, rounded service cards, and selective violet and red accents guide visitors from the AI-led hero to specific security capabilities.

## North star

Keep the page bright, spacious, and operationally credible; use violet for guidance and reserve red for genuine urgency.

## Overview

The page is built on a white canvas, with pale lavender-white bands distinguishing the defence-culture section and selected service cards. Ink-dark headings and muted grey body text keep a sober enterprise tone; violet highlights links, eyebrow labels, and AI-related details, while red is reserved for the urgent incident-response CTA. Roobert is used throughout, with regular-weight oversized headlines, compact uppercase eyebrows, and calm, readable body copy. A centered content frame and left-aligned text create consistent structure across the long page, while large vertical gaps separate its major chapters. The hero pairs a clear text proposition with a conversational AI interface; service and certification content uses cards and compact grids. Abstract, glossy 3D forms add colour in service tiles and the emergency-response panel without displacing the restrained palette. Rounded pill actions, fine borders, and light card shadows supply the interface’s limited depth.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the dominant background for the hero, service sections, certifications, and footer. |
| Signal Violet | `#6b2bea` | `--color-signal-violet` | brand | Brand accent for links, AI labels, outlined badges, and small interface highlights. |
| Graphite Grey | `#4e4e4e` | `--color-graphite-grey` | neutral | Primary muted text colour for descriptions and supporting copy. |
| Cloud Lavender | `#f6f7fc` | `--color-cloud-lavender` | surface | Soft contrast band behind the defence-culture section and selected service cards. |
| Midnight Ink | `#0a0f1f` | `--color-midnight-ink` | neutral | Main heading and body text, and dark text inside service cards. |
| Mist Blue | `#e5edf5` | `--color-mist-blue` | neutral | Fine borders and hairlines separating cards, sections, and footer content. |
| Peach Haze | `#f8ded2` | `--color-peach-haze` | surface | Warm gradient tone associated with the emergency-response 3D illustration, not a core interface surface. |
| Warm Taupe | `#777169` | `--color-warm-taupe` | neutral | Secondary muted footer text and legal-support copy. |
| Alert Red | `#dc2626` | `--color-alert-red` | semantic | Critical-response CTA and urgent incident labels; use sparingly to signal action. |
| Pale Silver | `#f1f1f2` | `--color-pale-silver` | neutral | Subtle card outlines and small neutral details. |
| Warm Porcelain | `#fff5ed` | `--color-warm-porcelain` | surface | Lightest stop in the warm emergency-response illustration gradient. |
| Soft Apricot | `#ffe4d3` | `--color-soft-apricot` | surface | Middle stop in the warm illustration gradient, primarily behind the glossy 3D emergency visual. |
| Peach Glow | `#fbceb4` | `--color-peach-glow` | accent | Warm gradient endpoint in decorative illustration artwork, not a general-purpose UI accent. |
| Slate Blue | `#64748d` | `--color-slate-blue` | neutral | Occasional secondary text tone for restrained supporting details. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Black pill buttons, including Ask PROMETHEUS and the compact Cyber AI navigation action. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f7fc` (Cloud Lavender) · `--color-text` → `#0a0f1f` (Midnight Ink) · `--color-text-muted` → `#4e4e4e` (Graphite Grey) · `--color-text-subtle` → `#777169` (Warm Taupe) · `--color-border` → `#e5edf5` (Mist Blue) · `--color-accent` → `#6b2bea` (Signal Violet) · `--color-accent-2` → `#dc2626` (Alert Red) · `--color-accent-3` → `#fbceb4` (Peach Glow) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0a0f1f` | `#ffffff` | 19.07:1 | AAA |
| `#0a0f1f` | `#f6f7fc` | 17.83:1 | AAA |
| `#4e4e4e` | `#ffffff` | 8.32:1 | AAA |
| `#4e4e4e` | `#f6f7fc` | 7.78:1 | AAA |
| `#777169` | `#ffffff` | 4.83:1 | AA |
| `#777169` | `#f6f7fc` | 4.51:1 | AA |
| `#6b2bea` | `#ffffff` | 6.65:1 | AA |
| `#6b2bea` | `#f6f7fc` | 6.21:1 | AA |

### Gradients

- `linear-gradient(135deg, rgb(255, 245, 237) 0%, rgb(255, 228, 211) 60%, rgb(251, 206, 180) 100%)`
- `radial-gradient(circle at 70% 35%, rgba(220, 90, 30, 0.2) 0%, rgba(0, 0, 0, 0) 60%)`
- `linear-gradient(rgba(107, 43, 234, 0.06) 0%, rgb(247, 248, 252) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 400, 500 | Site-wide interface type: navigation, headings, body copy, buttons, badges, and links. | Inter |

- **Roobert:** Use regular weights for most text and medium for buttons and selected headings; headlines have tight negative tracking, while eyebrows are uppercase and letter-spaced.

### Type scale — Perfect Fourth (ratio ≈ 1.343, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 400 | 1.05 | -0.025em | — | Roobert | Hero proposition and primary page headline. |
| h2 | 32px | 400 | 1.12 | -0.02em | — | Roobert | Major section headings, including capabilities and culture. |
| h3 | 24px | 500 | 1.2 | -0.015em | — | Roobert | Service card titles and secondary content headings. |
| h4 | 22px | 400 | 1.2 | -0.015em | — | Roobert | Smaller subsection headings within service content. |
| body | 16px | 400 | 1.6 | 0 | — | Roobert | Service descriptions, explanatory copy, and supporting paragraphs. |
| caption | 15px | 400 | 1.55 | 0 | — | Roobert | Compact supporting descriptions and certification details. |
| button | 15px | 500 | 1 | 0 | — | Roobert | Pill-shaped primary and secondary action labels. |
| nav | 14px | 400 | 1.5 | 0 | — | Roobert | Main navigation labels and compact header links. |
| link | 16px | 500 | 1.5 | 0 | — | Roobert | Inline calls to action such as Learn more and Explore Cyber AI. |
| eyebrow | 11px | 500 | 1.5 | 0.12em | uppercase | Roobert | Uppercase section labels and compact category identifiers. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 10, 12, 14, 16, 20, 22, 24, 28, 32, 40, 48 px.
- Section rhythm 128px · element gap 6px · card padding 24px · max content width 1184px.

Use a centered content frame with a measured maximum width of 1184px. The hero is a two-column composition: left-aligned proposition and actions beside an AI conversation preview. Follow it with three service cards, then vary between multi-column principles and capability layouts and broad, full-width section bands. Major sections have generous separation; cards use consistent internal padding and restrained content density. Preserve the long-page rhythm and align headings, cards, and footer columns to a shared frame.

## Shape & elevation

- Radius: button `9999px` · card `12px` · badge `9999px` · nav `9999px` · link `9999px` · xs `6px` · sm `8px` · md `10px` · lg `12px` · xl `14px` · 2xl `16px` · pill `9999px`
- Shadow `md` (card): `rgba(40, 30, 93, 0.04) 0px 2px 4px 0px, rgba(40, 30, 93, 0.04) 0px 8px 16px -8px`
- Shadow `md-2` (button): `rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px`
- Shadow `inset` (card): `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`
- Shadow `hairline` (other): `rgba(40, 30, 93, 0.06) 0px 1px 2px 0px`
- Shadow `xl` (card): `rgba(40, 30, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`
- Shadow `md-3` (card): `rgba(40, 30, 93, 0.04) 0px 4px 12px -4px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections remain flat against white or pale lavender-white surfaces. Cards use fine light borders, subtle corner rounding, and soft, low-contrast shadows rather than heavy elevation. Black and red pill buttons have modest shadows, while the emergency illustration gains depth from its warm background and glossy form.

## Imagery

Use abstract, glossy 3D objects rather than lifestyle photography. Small, colorful forms sit at the edges of the Cyber AI, SOC, and CERT service cards; a larger warm-toned 3D mark anchors the emergency-response feature. The hero also includes a clean conversational interface mockup. Keep imagery contained, polished, and secondary to text; certification logos are small and informational.

## Components

### Primary black action

Black, white-label pill button with measured 15px medium Roobert type and compact balanced horizontal padding; used for Ask PROMETHEUS.

### Critical response action

Red pill button with white text and a soft red-tinted shadow; reserve it for emergency activation.

### Service cards

Three aligned service tiles introduce Cyber AI, SOC, and CERT, pairing a small category label and description with an image cropped toward the outer edge.

### Capability panels

Pale lavender-white rounded panels combine a service summary and violet link with a smaller, lightly elevated checklist card.

### Eyebrow badge

Compact uppercase category text or an outlined violet pill distinguishes sections such as PROMETHEUS AI and certified-for-trust content.

### Certification cards

A clean grid of small certification marks and short labels, with subtle card borders and restrained supporting text.

### Measured component styles

- **Primary button** (“Activate emergency response”): background #dc2626 · text #ffffff · radius 999px · padding 12px 22px · 500 15px Roobert · shadow rgba(220, 38, 38, 0.32) 0px 12px 24px -10px, rgba(0, 0, 0, 0.06) 0px 2px 4px 0px
- **Secondary button** (“Ask PROMETHEUS”): background #000000 · text #ffffff · radius 9999px · padding 12px 22px · 500 15px Roobert · shadow rgba(0, 0, 0, 0.4) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 8px 0px
- **Link** (“AI Cyber AI Sovereign AI & GPU infrastru”): transparent background · text #0a0f1f · radius 14px · padding 0px · 400 16px Roobert
- **Card** (“ISO 9001 International standard for qual”): transparent background · text #0a0f1f · border 1px solid #f1f1f2 · radius 12px · padding 24px · 400 16px Roobert · shadow rgba(40, 30, 93, 0.04) 0px 2px 4px 0px, rgba(40, 30, 93, 0.04) 0px 8px 16px -8px
- **Badge** (“PROMETHEUS AI”): transparent background · text #6b2bea · border 1px solid #6b2bea · radius 999px · padding 0px 14px · 500 11px Roobert · uppercase
- **Navigation item** (“Offers”): transparent background · text #000000 · radius 18px · padding 8px 12px · 400 14px Roobert

## Do

- Keep the main canvas white and uncluttered.
- Use Midnight Ink for prominent headings.
- Apply Signal Violet to navigation cues and informational links.
- Reserve Alert Red for critical incident actions.
- Give major page sections generous breathing room.
- Keep service cards aligned and visually restrained.

## Don't

- Do not turn warm illustration colours into broad section backgrounds.
- Do not use red for ordinary navigation or secondary links.
- Do not crowd the hero with extra content.
- Do not add heavy shadows or thick borders.
- Do not let 3D artwork overpower service descriptions.
- Do not replace the sober enterprise tone with playful decoration.

## Agent prompt

Build a new NEVERHACK page using a bright, restrained cybersecurity visual system. Set the canvas to Gallery White (#ffffff), use Midnight Ink (#0a0f1f) for headings, Graphite Grey (#4e4e4e) for body copy, and Cloud Lavender (#f6f7fc) for selective section bands and cards. Use Signal Violet (#6b2bea) for links and AI cues; reserve Alert Red (#dc2626) for urgent incident actions. Set Roobert throughout, with Inter as a free fallback, and maintain tight, clean headline typography. Align content to a centered frame, preserve generous vertical section spacing, and use rounded cards with fine Mist Blue (#e5edf5) borders and subtle shadows. Favor a clear hero, service-led grids, and contained glossy 3D illustrations. Keep interactions direct, layouts calm, and decoration subordinate to information.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with left-aligned proposition and actions beside an AI chat preview. | Primary AI-advisor action, Secondary capabilities link, Conversational product preview | Large dark headline, Uppercase violet eyebrow, Black pill CTA, Violet chat bubbles |
| 2 | feature-grid | Three side-by-side service cards for Cyber AI, SOC, and CERT. | Direct service links, Distinct paths by need | Compact category badges, Edge-cropped 3D artwork, Violet and red link accents |
| 3 | feature-grid | Three aligned principle columns beneath a shared section heading. | Scannable principles, Learn-more link | Minimal column treatment, Short colored accent lines, Dark text on white |
| 4 | stats | Pale full-width band with introductory copy, three principles, and a five-item metrics row. | Trust-building proof points, Principles followed by metrics | Lavender-white background, Small violet icons, Large violet figures |
| 5 | feature-grid | Introductory heading followed by three broad, vertically stacked capability panels. | Capability overview, Related service links, Checklist details | Pale panels, Inset white checklist cards, Violet inline links |
| 6 | feature-grid | Introductory AI-advisor block above three compact advisory options. | Ask AI advisor action, Challenge-based entry points | Outlined category badge, Black pill CTA, Minimal icon-led columns |
| 7 | logo-cloud | Centered heading and supporting copy above a multi-row grid of certification cards. | Browse certification details, Trust through independent audit | Centered section label, Small certification logos, Subtle card outlines |
| 8 | cta | Two-part feature card with response copy and red CTA beside a warm 3D illustration. | Emergency response action, 24/7 availability assurance | Critical label, Alert-red pill button, Warm gradient illustration panel |
| 9 | footer | Brand summary and contact action beside three navigation columns, followed by legal text. | Service navigation, Contact action, Legal and policy links | Multi-column link groups, Dark text on white, Small muted legal copy |

## Source CSS custom properties (selected)

```css
--tw-bg-opacity: 1;
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
--ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/neverhack-com-en