Hurricane Electric (He) — Design System Deep Dive

1. Brand Overview

Hurricane Electric’s site (he.net) feels like a time capsule from early web design — and that’s not a bad thing. It’s unapologetically functional, stripped of visual fluff, and clearly aimed at a technical audience who values speed, clarity, and reliability over aesthetic trends.

No gradients, no oversized hero images, no JavaScript-heavy animations. It’s lean HTML and CSS. The design philosophy screams utility first: minimal color usage, default system fonts, and direct links. This is exactly what you’d expect from an internet backbone provider — uptime and accessibility matter, not “dribbble-friendly” visuals.

The vibe is:

• Technical-first — prioritizes information density
• Old-school web — inline links, underlines, no modern UI sugar
• Functional hierarchy — headings and links are there to navigate, not perform brand theater

This is not a consumer-facing lifestyle brand. It’s for network engineers, sysadmins, and technically literate users who know what IPv6 is and don’t need it explained with animated infographics. The design choices reflect that audience — practical typography, restrained palette, and zero reliance on heavy imagery.

The brand’s design language is almost anti-marketing: no overselling, no big slogans. It’s the equivalent of a command-line interface in web form — stripped down to essentials, optimized for fast parsing.

I’ll be blunt: if you’re used to working on design systems with component libraries, elevation levels, and semantic color tokens, this one will feel like minimal scaffolding. But that’s exactly why it works here. Hurricane Electric’s audience doesn’t need brand storytelling; they need quick access to tools, stats, and network information.

2. Color System

2.1 Primary Colors

The site’s palette is almost monochrome. The extracted data shows:

• White (#ffffff) — dominant background
• Navy (rgb(0, 0, 102)) — primary link color
• Black (rgb(0, 0, 0)) — text, headings, some links
• Red — hover state for links

That navy is the closest thing to a brand color. It’s deep, stable, and non-distracting. Psychologically, dark blue conveys trust and professionalism — appropriate for an ISP and network services brand. Compared to competitors (e.g., Cloudflare’s vibrant orange), this is understated. It says, “We’re solid infrastructure,” not “We’re trendy.”

The red hover is a sharp contrast — functional, not aesthetic. It’s an old-school cue: “You are about to click.” No subtle fades or micro-interactions — just a binary color change.

2.2 Complete Palette

Yes, that’s it. No grays, no secondary accent colors. The entire visual hierarchy relies on typography and underline styles, not a broad palette.

2.3 Color Relationships

Contrast is excellent:

• Navy on white: ~12:1 ratio — AAA accessible
• Black on white: 21:1 — maximum contrast
• Red on white: ~4.0:1 — passes for normal text, borderline for small text

There’s no dark mode. Given the minimal CSS, adding one would be trivial but probably unnecessary for the audience.

2.4 Usage Guide

Works well:

• Navy for interactive elements (links, clickable text)
• Black for static text
• White backgrounds for clarity

Avoid:

• Mixing navy and black for body text — keep navy reserved for links
• Using red for anything except hover/focus feedback — otherwise, it loses its “action” signal

3. Typography

3.1 Font Families

Everything is Arial — a system sans-serif. No Google Fonts, no Adobe Fonts, no variable fonts. This choice matches the minimal, functional philosophy. Arial is ubiquitous, legible, and fast to render.

Fallbacks aren’t explicitly defined, but browsers will default to generic sans-serif if Arial is missing.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is achieved purely by weight and slight size changes — no color differences for headings vs body. The jump from 10.4px caption to 19.5px heading is functional but subtle compared to modern type scales.

Readability is fine for desktop, but small text (10.4px) may be hard for mobile users. This is a legacy web pattern — dense tables and small UI labels.

4. Spacing & Layout

4.1 Spacing Scale

The site uses a 4px scale type but also has fractional values (1.3px, 3.38px). This suggests pixel-perfect tweaks, probably from table layouts or legacy elements.

4.2 Layout

Breakpoints:

• 824px
• 992px

This is minimal — probably a single breakpoint for mobile and one for tablet/desktop.

5. Visual Elements

• Border Radius — None. Absolutely flat corners everywhere.
• Shadows — None. Flat design. Depth indicated via borders.
• Borders:
  • 1px solid navy (rgb(0, 0, 102)) — used on divs
  • 2px inset black (rgb(0, 0, 0)) — used on iframes

This reinforces the “flat, functional” feel. Borders are structural, not decorative.

6. Components

6.1 Buttons

No styled buttons extracted. Likely using basic HTML <input type="submit"> with browser defaults. That’s consistent with the utilitarian philosophy.

6.2 Links

Two main styles:

1. Navy links:

   • Default: color: rgb(0, 0, 102); text-decoration: underline; font-weight: 700
   • Hover: underline stays, color changes to red

2. Black links:

   • Default: color: rgb(0, 0, 0); text-decoration: underline; font-weight: 700
   • Hover: underline stays, color changes to red

Underline never disappears — this is deliberate. It’s an accessibility win, ensuring links are identifiable even without color.

6.3 Forms

No extracted input styles — likely native browser defaults.

6.4 Cards

No “card” components in the modern sense. Content is in tables or plain divs with borders.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-navy: rgb(0, 0, 102);
  --color-black: rgb(0, 0, 0);
  --color-red-hover: red;

  /* Typography */
  --font-family-primary: Arial, sans-serif;
  --font-size-h1-lg: 19.5px;
  --font-size-h1-sm: 14.04px;
  --font-size-link-lg: 14.04px;
  --font-size-link-md: 13px;
  --font-size-link-sm: 12.87px;
  --font-size-link-xs: 12.35px;
  --font-size-caption: 10.4px;
  --font-weight-bold: 700;
  --font-weight-normal: 400;

  /* Spacing (px) */
  --space-1: 1px;
  --space-1-3: 1.3px;
  --space-2: 2px;
  --space-3-38: 3.38px;
  --space-4: 4px;
  --space-5: 5px;
  --space-9: 9px;
  --space-10: 10px;
  --space-13: 13px;
  --space-14-04: 14.04px;
  --space-16-185: 16.185px;
  --space-22-1: 22.1px;

  /* Borders */
  --border-1px-solid-navy: 1px solid rgb(0, 0, 102);
  --border-2px-inset-black: 2px inset rgb(0, 0, 0);

  /* Breakpoints */
  --breakpoint-sm: 824px;
  --breakpoint-md: 992px;
}

8. AI Coding Assistant Prompt

# Hurricane Electric Design System Specification

You are a Hurricane Electric design expert. Build UIs matching their visual language exactly.

## Brand Context
Hurricane Electric values speed, clarity, and technical precision. The site is functional-first, with minimal styling, no decorative elements, and a focus on accessibility and legibility. This is aimed at technical audiences who care about network tools, not visual trends.

## Color Palette
- White: #ffffff — background, form fields
- Navy: rgb(0, 0, 102) — primary links, borders
- Black: rgb(0, 0, 0) — body text, headings
- Red: red — link hover/focus state

## Typography
Font: Arial, sans-serif

| Element   | Size     | Weight | Use For              |
|-----------|----------|--------|----------------------|
| H1 (large)| 19.5px   | 700    | Main page titles     |
| H1 (small)| 14.04px  | 400    | Secondary headings   |
| Link lg   | 14.04px  | 700    | Primary navigation   |
| Link md   | 13px     | 700    | Inline links         |
| Link sm   | 12.87px  | 400    | Less prominent links |
| Link xs   | 12.35px  | 700    | Compact nav          |
| Caption   | 10.4px   | 400    | Small notes          |
| Link cap  | 10.4px   | 700    | Small bold links     |
| Link capn | 10.4px   | 400    | Small normal links   |

## Spacing & Grid
Base: 4px scale with fine fractional adjustments
Values: 1px, 1.3px, 2px, 3.38px, 4px, 5px, 9px, 10px, 13px, 14.04px, 16.185px, 22.1px

Map:
- 1px: borders, hairline dividers
- 4px: small padding
- 5px: inline spacing
- 9px/10px: component padding
- 22.1px: section separation

## Border Radius
None: 0px — all components have sharp corners

## Shadows & Depth
Flat design — no shadows. Depth via borders only.

## Component Specifications

### Navigation Link
Default:
```css
a {
  color: rgb(0, 0, 102);
  text-decoration: underline;
  font-weight: 700;
}
a:hover {
  color: red;
  text-decoration: underline;
}
```

Alternate black link:
```css
a.black-link {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  font-weight: 700;
}
a.black-link:hover {
  color: red;
}
```

### Input Fields
Use browser defaults, optional border:
```css
input {
  border: 1px solid rgb(0, 0, 102);
  padding: 4px;
  font-family: Arial, sans-serif;
}
```

## Layout & Responsive Rules
Breakpoints:
- ≤824px: mobile
- 825px–992px: tablet
- >992px: desktop

Max widths: fluid, no fixed container widths

## Interaction Rules
- No transitions — instant state changes
- Focus indicators: browser defaults
- Hover: color change to red for links

## DO
- Use navy for links
- Keep underline on all links
- Maintain high contrast text
- Stick to Arial
- Use exact spacing values from scale
- Use borders for separation

## DON'T
- Add gradients or shadows
- Remove underline from links
- Use colors not in palette
- Round corners
- Change default font

## Code Examples

### Navy Link
```css
a {
  color: rgb(0, 0, 102);
  text-decoration: underline;
  font-weight: 700;
}
a:hover {
  color: red;
}
```

### Black Link
```css
a.black-link {
  color: rgb(0, 0, 0);
  text-decoration: underline;
  font-weight: 700;
}
a.black-link:hover {
  color: red;
}
```

### Bordered Div
```css
.div-border {
  border: 1px solid rgb(0, 0, 102);
  padding: 5px;
}
```

9. Summary

TL;DR — Hurricane Electric’s design system is pure utility: Arial fonts, white backgrounds, navy links, zero decoration. It’s flat, fast, and functional. The hierarchy comes from weight and underline, not color complexity.

Brand Keywords:

• infrastructure-first
• no-frills-minimal
• high-contrast-functional
• legacy-web-stable
• engineer-focused