---
version: alpha
name: "WireGuard"
description: "WireGuard uses a white patterned technical canvas, deep slate navigation and panel headers, a burgundy dragon identity, Lato typography, a compact side index, and bordered explanation panels. The system communicates security through legibility and small attack-surface thinking rather than visual intimidation."
colors:
  bg: "#fdfdfd"
  surface: "#edf0f1"
  text: "#2c3e50"
  brand: "#88171a"
  on-brand: "#ffffff"
  border: "#7f8c8d"
  text-soft: "#5b6770"
  nav: "#34495e"
  on-nav: "#ffffff"
  brand-soft: "#f2dede"
typography:
  display:
    fontFamily: "Lato"
    fontSize: "39px"
    lineHeight: 1.5
    letterSpacing: "0"
  body:
    fontFamily: "Lato"
    fontSize: "15px"
    lineHeight: 1.5
  mono:
    fontFamily: "SFMono-Regular"
rounded:
  button: "3px"
  card: "4px"
  pill: "9999px"
spacing:
  xs: "0px"
  sm: "4px"
  md: "12px"
  lg: "24px"
  xl: "48px"
---

## Overview

## Overview

WireGuard feels compact, reviewable, and cryptographically serious. A slate navigation bar frames a white technical page with a faint line pattern, a large burgundy wordmark, a small side index, and repeated explanation panels with dark slate headers.

The visual system mirrors the product promise: small surface area, explicit concepts, and little ornamental complexity. Security comes from understandable structure, not dark cinematic styling.

**Key Characteristics**
- Burgundy dragon and wordmark
- Deep slate navigation and panel headers
- White patterned technical canvas
- Compact side index
- Lato typography
- Bordered explanation panels
- Square controls and minimal motion

## Colors

Use #fdfdfd for the page, #2c3e50 for reading, #34495e for navigation and panel headers, and #88171a for identity, links, and selected emphasis. Light gray #edf0f1 supports the side index. Burgundy should not be used as a generic error color without an explicit label.

## Typography

Use Lato throughout at 15px body size and 1.5 line height. Headings are modest, 18-39px, with medium weight and zero tracking. Monospace is reserved for public keys, interface names, commands, and configuration. Do not imitate the wordmark with oversized body typography.

## Layout

Use a 1160px shell with a 220px side index and a 780px content column. The mark, one-sentence explanation, and conceptual overview should appear early. Stack panels vertically and align their headers. On smaller screens, move the side index into a labeled disclosure before the content.

Below 960px, collapse the side index and keep the main content full width. Below 640px, stack navigation, preserve 15-16px copy, wrap the wordmark safely, and bound keys and commands with horizontal scrolling. Keep the audited no-overflow behavior.

## Elevation & Depth

The page is nearly flat. Panel borders and slate headers establish depth; shadows are unnecessary. Overlays may use one subtle shadow, but configuration and protocol explanations remain on the page plane.

## Shapes

Use 0-2px for navigation and controls, 3px for panels, and 4-6px only for menus or dialogs. Keep headers and content edges aligned. Pills are only for protocol or platform metadata.

## Components

Primary buttons are compact burgundy rectangles. Secondary actions use white with a slate or burgundy border; tertiary actions are underlined burgundy links; destructive controls use explicit danger text. Concept panels use white bodies, 1px slate borders, and dark headers with white labels. Side navigation is a flat gray list. Inputs need labels, examples, validation text, and a visible burgundy focus outline.

Use 80ms hover feedback and 140ms menu disclosure. Anchor navigation should preserve context and avoid dramatic scrolling. Focus is a 2px burgundy outline with 2px offset. Reduced motion removes smooth scrolling and any menu transforms.

Slate on white provides strong contrast; white labels on slate headers remain readable. Mark the current concept in text, label every copy control, and prevent public keys from being read as one unbroken word. The logo needs alternative text, the background line pattern is decorative, and mobile targets must reach 44px.

Use exact, sober language: "Install WireGuard", "Read the conceptual overview", "Generate keys", and "Open source code". Define cryptographic terms in place, state platform assumptions, and avoid claims that imply a configuration is secure without its prerequisites.

The audited site is light-only. A dark reader theme needs independent tokens for keys, code, slate headers, burgundy identity, links, borders, and focus. Do not transform the whole experience into black security theater.

WireGuard draws from protocol specifications, network appliance manuals, and compact Unix documentation. Its burgundy identity gives the page distinction, while the slate panel system keeps cryptographic concepts reviewable and sequential.

## Do's and Don'ts

**Do**
- Keep the burgundy identity restrained.
- Use slate headers for conceptual grouping.
- Show configuration and keys as text.
- Define security terms.
- Keep the side index predictable.
- Preserve compact density.
- Reflow safely on mobile.
- Label copy and navigation controls.

**Don't**
- Do not use a black cinematic security theme.
- Do not hide configuration behind illustrations.
- Do not imply security from color alone.
- Do not place panels inside cards.
- Do not animate cryptographic diagrams continuously.
- Do not clip public keys.
- Do not over-round controls.
- Do not use vague privacy claims.

**Quick colors:** background #fdfdfd; text #2c3e50; WireGuard burgundy #88171a; navigation #34495e; surface #edf0f1; border #7f8c8d; white #ffffff.

**Example prompts**
- Create a WireGuard concept page with a burgundy identity, slate headers, and a compact side index.
- Design a key-generation guide with copyable commands, platform context, and explicit security notes.
- Build stacked protocol panels with white bodies, slate headers, and no shadow.
- Create a mobile navigation disclosure that preserves concept order and 44px targets.

**Iteration guide:** order concepts first; establish slate hierarchy; add burgundy identity; make keys and commands inspectable; collapse the side index; then verify contrast, focus, and overflow.