---
id: cybersecurity-nordvpn-design-en
service: NordVPN
website: https://nordvpn.com
category: cybersecurity
document: DESIGN.MD
source_prompt: cybersecurity-nordvpn-representative-en
language: en
generated: 2026-07-18
---

# NordVPN DESIGN.MD

> Use this DESIGN.MD as the persistent design standard before building a Cybersecurity site or app. It can be given directly to designers, frontend engineers, AI builders, and coding agents. NordVPN is an information-architecture reference only.

## Purpose

- NordVPN: https://nordvpn.com
- Cybersecurity: protecting identities, devices, and organizations
- identities, threats, and policies
- false confidence, access control, and incident response
- security

## Design brief

Create an original product that supports protecting identities, devices, and organizations. Make identities, threats, and policies easy to scan, compare, and act on. Treat false confidence, access control, and incident response as a primary design constraint. Starting direction: operational console · conservative and security-first · high information density · project navigation -> key metrics -> operations table or logs -> response action · #4687FF · NordVPN.

## Public interface design analysis

- Reference basis: These are recurring visual and structural patterns from public landing screens and representative task flows. Verify the current live capture because services change over time.
- Interface archetype: operational console
- Tone and manner: conservative and security-first
- Information density: high
- Color strategy: high-contrast brand accents on dark surfaces (#4687FF)
- Navigation model: sidebar-led context switching
- Structural sequence: project navigation -> key metrics -> operations table or logs -> response action
- Reusable patterns: risk notice, threat table, status badge, identity panel, response action
- Independent application rule: Use the order and decision principles only. Do not reproduce logos, copy, imagery, icons, or proprietary screen composition.

## Screen architecture

- Global navigation with clear current location and account state
- Overview that exposes the next important action for identities, threats, and policies
- Search, filter, sort, or segmented views only where they reduce decision cost
- Detail view that keeps context, status, evidence, and the primary action together
- Persistent help, recovery, privacy, and safety access for false confidence, access control, and incident response

## Design tokens

```css
:root {
  --color-primary: #4687FF;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #4687FF22;
  --color-danger: #DC2626;
  --radius-control: 6px;
  --radius-card: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --content-reading: 720px;
  --content-wide: 1280px;
}
```

## Component specifications

- Navigation: active, hover, focus, disabled, and collapsed states
- Cards and rows: stable dimensions, realistic content, metadata hierarchy, and complete click targets
- Forms: labels, descriptions, validation, error summary, progress, and recovery
- Actions: one clear primary action per region; icon buttons require accessible names and tooltips
- Feedback: inline status, toast, banner, skeleton, progress, confirmation, and destructive-action dialog

## State design

For every data-driven region, define loading, empty, partial-data, stale, error, offline, permission-denied, disabled, saving, and success states. Keep layout dimensions stable so state changes do not shift surrounding content.

## Responsive rules

- 360px: one primary column, no horizontal page scroll, 44px touch targets
- 768px: preserve context with two panes only when each pane remains readable
- 1280px and above: constrain reading width and use extra space for comparison or persistent context
- Never scale type with viewport width; wrap long labels and localize for text expansion

## Accessibility requirements

- Semantic landmarks and heading order
- Complete keyboard operation with visible focus
- WCAG AA contrast in all states
- Programmatic labels, descriptions, errors, and live regions
- 200% zoom, reduced motion, forced colors, and screen-reader verification

## Design instruction for AI builders

```text
Design an original Cybersecurity interface for [Product name]. Its goal is protecting identities, devices, and organizations; its core objects are identities, threats, and policies; its critical risk is false confidence, access control, and incident response. Use the token system and screen rules in this document. Specify realistic content, component contracts, all data states, responsive behavior, accessibility, and acceptance criteria. Do not copy NordVPN's logo, proprietary copy, images, or exact layout.
```

## Completion checklist

- [ ] The critical path for protecting identities, devices, and organizations is obvious without explanation
- [ ] identities, threats, and policies have clear hierarchy, status, and actions
- [ ] false confidence, access control, and incident response has prevention and recovery
- [ ] Mobile, tablet, desktop, keyboard, screen reader, zoom, and reduced motion are verified
- [ ] Loading, empty, error, offline, partial, permission, and success states are complete
- [ ] No protected brand asset or pixel-level layout from NordVPN is reproduced