Spamhaus Design System Deep Dive

1. Brand Overview

Spamhaus is not a consumer lifestyle brand. It's not trying to be warm and fuzzy. This is a cybersecurity infrastructure player whose audience is technical, serious, and allergic to fluff. The site exists to convey trust, authority, and competence in a space where milliseconds and accuracy matter. That comes through in the design language.

The vibe is functional clarity. A dark, authoritative blue (#142741) anchors the brand. It’s not a playful blue — it’s deep, slightly muted, leaning towards military navy. It says “we take this seriously.” Accents are in a bold yellow (#eec216), which is a high-visibility signal color — think hazard tape or construction signage. That yellow is not pastel and not gold — it’s an alert color. It grabs the eye instantly.

Typography is clean, geometric, and modern: Montserrat from Google Fonts. No serifs, no flourishes. We get a broad range of weights (300 to 700) and sizes from 60px headlines down to 12px captions. This flexibility lets them adapt tone — from big, authoritative hero headlines to compact, dense UI labels.

The layout is built on an 8px scale, but with some pragmatic deviations (10px, 15px) where needed. This isn’t a pure mathematical scale — it’s a system that’s been tuned for real-world UI fit.

Rounded corners are minimal — 4px and 5px in most UI, with occasional 9999px full-round pills for social icons and badges. The restrained use of radius reinforces the “serious tools” feel. Shadows are subtle — low-opacity black at large, soft spreads — used sparingly.

Component design is direct: buttons are solid blocks of color with no gradients, no drop shadows. Inputs are white with 2px solid borders. Links are unadorned by default (no underline), relying on color for differentiation.

Overall: This is a security brand that’s stripped away ornamentation. The design system is built for clarity, speed, and authority. It’s not here to sell you a lifestyle — it’s here to tell you “we know what we’re doing.”

2. Color System

2.1 Primary Colors

The primary brand color is a deep blue: #142741 (rgb(20, 39, 65)). This is the anchor for the entire palette. It’s used in backgrounds, text, and as the base for secondary blues. Psychologically, deep blue conveys trust, stability, and authority — perfect for a security-focused organization.

The accent color is #eec216 (rgb(238, 194, 22)), a strong yellow. This is high energy — it’s used for CTAs, important highlights, and as a counterpoint to the blue. Blue + yellow is a high-contrast, high-visibility combination often used in safety and warning contexts.

2.2 Complete Palette

2.3 Color Relationships

The palette is small but high-contrast. Blue vs yellow is the key relationship: dark, stable base + high-energy signal. White and light gray provide neutral space. Secondary blue (#293f65) is a softer, more muted tone — useful for hover states and secondary emphasis without breaking the palette.

Contrast: White text on #142741 is WCAG AAA compliant. Yellow text on blue can pass if the yellow is bold enough — #eec216 is high luminance, so it works. The one area to watch is gray text (#677692) on white — that’s borderline for AAA, fine for UI chrome but not for body copy.

2.4 Usage Guide

• Primary actions: Use #eec216 on #142741 backgrounds.
• Secondary actions: Use #293f65 backgrounds with white text.
• Backgrounds: #ffffff for main content, #e5e7eb for section breaks.
• Text: White on dark backgrounds, #142741 on light backgrounds.
• Avoid mixing yellow with light gray — it loses contrast.
• Keep the palette tight — no rogue blues or yellows.

3. Typography

3.1 Font Families

All text uses Montserrat (Google Fonts). No fallback stack listed, but browser defaults will apply if Montserrat fails. This is a geometric sans-serif — modern, clean, and versatile. Variable font support is enabled.

3.2 Type Scale

3.3 Hierarchy

They use size + weight shifts to create hierarchy — not color. Big hero headlines are light-weight (300), which gives an airy, authoritative feel. Mid-level headings jump to 700 for emphasis. Body copy stays at 16px, which is readable on desktop and mobile. Captions drop to 12px, but stay crisp with Montserrat’s geometric shapes.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with extra values where needed.

4.2 Layout

Breakpoints: 320px, 560px, 600px, 968px, 990px, 1280px. This is a fine-grained set — they’re optimizing for small device variations. Likely using Tailwind’s responsive modifiers, given the evidence.

5. Visual Elements

Border Radius

Minimal rounding keeps the UI sharp. Full-round is reserved for circular elements.

Shadows

Two shadows:

1. rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px — soft, large drop, used on major surfaces.
2. Smaller variant for subtle lift.

Shadows are rare — flat design dominates.

Borders

Thin 1px borders in light gray (#e5e7eb) for dividers. Occasional semi-transparent yellow borders for accent.

6. Components

6.1 Buttons

Primary (Dark Blue variant)

• Default: bg #293f65, text #ffffff, padding 8px, radius 0px, border none, font 14px / 600.
• Hover: bg inherit, color var(--dp-hover-icon-color).
• Focus: bg rgb(0,150,219) (bright blue).

Secondary (Yellow)

• Default: bg #eec216, text #142741, padding 8px 24px, radius 4px, font 14px / 400.
• Hover: bg inherit, color var(--dp-hover-icon-color).
• Focus: bg rgb(0,150,219).

6.2 Links

Three variants:

1. White text links — for dark backgrounds.
2. Dark blue (#142741) links — for light backgrounds.
3. Secondary blue (#293f65) links — lower emphasis.

No underline by default. Hover states not defined in data.

6.3 Forms

Text inputs:

• Default: bg white, text rgb(24,25,27), border 2px solid rgb(151,157,157), radius 4px, padding 8px 12px.
• Focus: border-color var(--dp-border-color-hover), outline none.

No checkboxes/radios in extracted data.

6.4 Cards

Not explicitly defined, but likely use 5px radius, light gray borders, subtle shadow variant.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-light: #e5e7eb;
  --color-white: #ffffff;
  --color-brand-blue-dark: #142741;
  --color-brand-yellow: #eec216;
  --color-brand-blue-secondary: #293f65;
  --color-gray-steel: #677692;
  --color-ring-blue: rgba(59,130,246,0.5);
  --color-swiper-blue: #007aff;
  --color-ring-offset-white: #ffffff;

  /* Typography */
  --font-family-base: 'Montserrat', sans-serif;
  --font-size-h1: 3.75rem;
  --font-size-h1-alt: 2.75rem;
  --font-size-h1-strong: 2.25rem;
  --font-size-h2: 1.88rem;
  --font-size-h3: 1.50rem;
  --font-size-h4: 1.13rem;
  --font-size-body: 1.00rem;
  --font-size-small: 0.88rem;
  --font-size-caption: 0.75rem;

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-92: 92px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
}

8. AI Coding Assistant Prompt

# Spamhaus Design System Specification

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

## Brand Context
Spamhaus is a cybersecurity authority. The design language is serious, minimal, and functional. Color contrasts are strong, typography is geometric and modern, spacing is disciplined.

## Color Palette
- Light Gray: #e5e7eb — Dividers, section backgrounds
- White: #ffffff — Main background, text on dark
- Brand Blue (Dark): #142741 — Primary brand color, headings, dark backgrounds
- Brand Yellow: #eec216 — CTA buttons, highlights
- Secondary Blue: #293f65 — Secondary buttons, hover states
- Steel Gray: #677692 — Hover/focus borders, secondary text
- Ring Blue: rgba(59,130,246,0.5) — Focus outlines
- Swiper Blue: #007aff — Carousel controls
- Ring Offset White: #ffffff — Focus ring offset

## Typography
Font family: 'Montserrat', sans-serif (Google Fonts, variable font)

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 60px / 3.75rem | 300 | 1.07 | Hero titles |
| H1 Alt | 44px / 2.75rem | 300 | 1.09 | Large headings |
| H1 Strong | 36px / 2.25rem | 700 | 1.11 | Section headers |
| H2 | 30px / 1.88rem | 700 | 1.20 | Subheadings |
| H2 Semi | 30px / 1.88rem | 600 | 1.20 | Subheadings |
| H3 | 24px / 1.50rem | 700 | 1.33 | Smaller headings |
| H4 | 18px / 1.13rem | 500 | 1.56 | Lead text |
| Body | 16px / 1.00rem | 400 | 1.50 | Body copy |
| Body Bold | 16px / 1.00rem | 700 | 1.50 | Emphasis |
| Button | 14px / 0.88rem | 600 | 1.43 | Buttons |
| Caption | 12px / 0.75rem | 400/500/600 | 1.33 | Metadata |

## Spacing & Grid
Base: 8px grid. Scale includes 4px, 8px, 10px, 12px, 15px, 20px, 24px, 32px, 40px, 64px, 92px, 96px, 112px, 128px.
Apply to: Button padding (8/12px), card padding (20px), section gaps (32px+).

## Border Radius
- 4px — Inputs, small buttons
- 5px — Cards, containers
- 9999px — Pills, circular icons

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px
- Small: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px
Use sparingly — flat design preferred.

## Components

### Primary Button (Dark Blue)
Default:
- background: #293f65
- color: #ffffff
- padding: 8px
- border-radius: 0px
- font-size: 14px; font-weight: 600
Hover:
- background: inherit
- color: var(--dp-hover-icon-color)
Focus:
- background: rgb(0,150,219)

### Secondary Button (Yellow)
Default:
- background: #eec216
- color: #142741
- padding: 8px 24px
- border-radius: 4px
- font-size: 14px; font-weight: 400
Hover:
- background: inherit
- color: var(--dp-hover-icon-color)
Focus:
- background: rgb(0,150,219)

### Links
- White (#ffffff), Dark Blue (#142741), or Secondary Blue (#293f65)
- No underline by default

### Input Fields
Default:
- background: #ffffff
- color: rgb(24,25,27)
- border: 2px solid rgb(151,157,157)
- border-radius: 4px
- padding: 8px 12px
Focus:
- border-color: var(--dp-border-color-hover)
- outline: none

## Layout & Responsive Rules
Breakpoints: 320px, 560px, 600px, 968px, 990px, 1280px
Content aligns to 8px grid, with responsive adjustments at each breakpoint.

## Interaction Rules
- State changes: 150ms ease transitions
- Focus rings: Use Ring Blue with Ring Offset White
- No heavy motion — keep interactions snappy

## DO
- Use only palette colors
- Maintain 8px spacing multiples
- Keep button text in Montserrat 14px
- Use full-round radius only for pills/icons
- Keep hover states subtle

## DON'T
- Add drop shadows to buttons
- Use underlines on links by default
- Add new colors
- Mix multiple border radius styles in one component
- Reduce text contrast below WCAG AA

## Code Examples

```css
.btn-primary {
  background: #293f65;
  color: #ffffff;
  padding: 8px;
  border-radius: 0;
  font-weight: 600;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: inherit;
  color: var(--dp-hover-icon-color);
}
.btn-primary:focus {
  background: rgb(0,150,219);
}

.btn-secondary {
  background: #eec216;
  color: #142741;
  padding: 8px 24px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  border: none;
}

.input {
  background: #ffffff;
  color: rgb(24,25,27);
  border: 2px solid rgb(151,157,157);
  border-radius: 4px;
  padding: 8px 12px;
}
.input:focus {
  border-color: var(--dp-border-color-hover);
  outline: none;
}

.card {
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
```

9. Summary

TL;DR — Spamhaus’ design system is security-grade minimalism. Dark blue + yellow, Montserrat everywhere, 8px grid discipline, minimal radius. Buttons are solid color blocks, links are clean, inputs are crisp. The whole thing says “serious, trustworthy, efficient.”

Brand Keywords:

• security-minimalist
• high-contrast
• grid-disciplined
• tool-first
• authority-focused