Nginx Brand Design System Deep Dive

1. Brand Overview

Nginx is not the kind of brand that spends time on ornamental design. It’s a performance-first, engineer-driven product, and the site reflects that. The visual language is stripped down, functional, and a bit utilitarian — exactly what you’d expect from a web server technology that’s become the backbone of a huge chunk of the internet.

There’s no attempt to woo the casual user with flashy gradients or playful motion. Instead, the design focuses on legibility, speed, and minimal distraction. You land on the page and get straight to the point. Big headings, clear links, and a tight color palette make sure nothing gets between the visitor and the documentation or downloads.

The brand color — that signature green (#00b140) — screams “tech infrastructure” in a way that’s both distinctive and no-nonsense. It’s not the neon greens of consumer tech. It’s deeper, more grounded. Paired with greys and whites, it gives a sense of stability and trustworthiness, keeping the vibe serious and professional.

Typography is pure sans-serif, with no custom typefaces. This choice reinforces the utilitarian aesthetic — it’s browser-safe, loads instantly, and doesn’t break in obscure environments. The type scale is pragmatic: large headings where you need them, and smaller weights for links and body text. Line heights are tight, which makes the site feel compact and code-like.

Layout-wise, it’s an 8px spacing grid, which is the industry’s safe choice for keeping things balanced without going overly airy. The single breakpoint at 750px tells you they care about a mobile-friendly experience but aren’t building elaborate responsive frameworks — again, functional over ornamental.

Overall, Nginx’s site design feels like documentation you can trust: clean, clear, and engineered for speed. If you’re a designer thinking about how to match this vibe, you’ll want to strip away anything non-essential and lean on a disciplined, minimal set of styles.

2. Color System

2.1 Primary Colors

The primary brand color is #00b140 — a strong, saturated green. This works because green in tech often signals “go”, “success”, or “live” — all attributes you want in infrastructure. Compared to competitors like Apache HTTP Server (which doesn’t have a strong visual brand color on its site), Nginx’s green is more assertive and recognizable. It’s used for links and accents, not as a background wash — which keeps it impactful without overwhelming the page.

2.2 Complete Palette

(Note: #0000ee appears in link styles but wasn’t in the palette extraction — we can assign it role from component data.)

2.3 Color Relationships

There’s high contrast between the green and white (#00b140 on #ffffff) — passes WCAG AA for normal text, easily readable. Green on light gray also holds up, but avoid using green on gray for small text; it can drop contrast below accessibility thresholds.

Gray (#808080) is mid-tone — works for secondary text against white but fails for small text against light gray backgrounds.

Blue links (#0000ee) are a browser-default shade, high contrast on white, which reinforces the utilitarian style and ensures accessibility.

2.4 Usage Guide

• Do: Use green for interactive elements (links, accents) and branding. Pair with white or very light gray backgrounds.
• Do: Use neutral gray for secondary text, timestamps, or metadata.
• Avoid: Using green for large text blocks — keep it for emphasis.
• Avoid: Combining gray text on gray backgrounds — contrast will suffer.
• Do: Let blue links stand out in text-heavy contexts — they signal “default HTML link” clearly.

3. Typography

3.1 Font Families

All typography is sans-serif, with no custom or Google Fonts. Likely system fonts (Arial, Helvetica, etc.) for maximum compatibility. No variable fonts detected. Fallback stacks aren’t specified, but the design data shows consistent sans-serif declarations.

3.2 Type Scale

3.3 Hierarchy

The jump from 48px to 32px to 24px keeps headings distinct without excessive size jumps. Tight line heights (like 0.47) make big headings feel dense — almost like code headers in a terminal, which reinforces the engineering aesthetic. Body and link text at 16px is standard, readable, and fits the minimal layout.

4. Spacing & Layout

4.1 Spacing Scale

Base unit is 8px. All spacing values are multiples or fractions of it.

4.2 Layout

Single breakpoint at 750px. This likely switches the layout from multi-column to single-column. No complex grid system in evidence — just straightforward responsive adjustments.

5. Visual Elements

• Border Radius: None detected — likely sharp corners throughout, consistent with the utilitarian style.
• Shadow System: One shadow: rgb(0, 0, 0) 0px 5px 10px 0px. Used sparingly, probably on major containers or modals.
• Borders: One combination: solid black (rgb(0,0,0)) 2px left border on a div. Minimal, functional.

6. Components

6.1 Buttons

No button styles extracted — likely raw HTML buttons with minimal styling. In keeping with the brand’s approach, buttons probably inherit system styles.

6.2 Links

Two link styles:

1. Green Link

   • Color: #00b140
   • Text Decoration: underline
   • Font Weight: 400
   • States: No hover change specified.

2. Blue Link

   • Color: #0000ee
   • Text Decoration: underline
   • Font Weight: 700
   • States: No hover change specified.

Both use underline — no fancy hover transitions. This is intentional: keeps links obvious and accessible.

6.3 Forms

No custom input styles detected — likely defaults.

6.4 Cards

No explicit “card” component detected. Likely containers with white/light gray backgrounds and minimal padding.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-neutral-gray: #808080;
  --color-primary-green: #00b140;
  --color-light-gray: #f2f2f2;
  --color-link-blue: #0000ee;
  --color-black: #000000;

  /* Typography */
  --font-family-base: sans-serif;
  --font-size-h1-lg: 48px;
  --font-size-h1-md: 32px;
  --font-size-h1-sm: 24px;
  --font-size-body: 16px;
  --font-weight-bold: 700;
  --font-weight-normal: 400;
  --line-height-h1-lg: 0.47;
  --line-height-h1-md: 1.13;
  --line-height-h1-sm: 0.93;
  --line-height-body-link: 1.20;
  --line-height-body: 1.40;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4-8: 4.8px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;

  /* Borders */
  --border-left-width: 2px;
  --border-left-style: solid;
  --border-left-color: #000000;

  /* Shadows */
  --shadow-default: 0px 5px 10px 0px rgb(0, 0, 0);

  /* Breakpoints */
  --breakpoint-md: 750px;
}

8. AI Coding Assistant Prompt

# Nginx Design System Specification

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

## Brand Context
Nginx's design is minimal, functional, and performance-oriented. The site is engineered for speed and clarity, with a strict, utilitarian aesthetic. No unnecessary decoration—everything serves readability and usability.

## Color Palette
- Neutral Gray: #808080 — secondary text, UI outlines
- Primary Green: #00b140 — links, highlights, brand accents
- Light Gray: #f2f2f2 — backgrounds, dividers
- Link Blue: #0000ee — default hyperlinks
- Pure Black: #000000 — borders, shadows

## Typography
- Font Family: sans-serif
- Sizes:
  - H1 Large: 48px, weight 700, line-height 0.47 — main page titles
  - H1 Medium: 32px, weight 700, line-height 1.13 — section headings
  - H1 Small: 24px, weight 700, line-height 0.93 — sub-section headings
  - Body: 16px, weight 400, line-height 1.40 — standard text
  - Link Text: 16px, weight 400 or 700, line-height 1.20 — inline links

## Spacing & Grid
Base: 8px
Scale: 1px, 3px, 4.8px, 8px, 12px, 16px, 20px, 32px
Use multiples of 8px for layout spacing; 1px and 3px for borders and micro-gaps.

## Border Radius
- none: 0 — all corners sharp

## Shadows & Depth
- Shadow Default: 0px 5px 10px 0px rgb(0, 0, 0) — used sparingly

## Component Specifications

### Primary Link (Green)
Default: color #00b140; underline; weight 400
Hover: no change

### Secondary Link (Blue)
Default: color #0000ee; underline; weight 700
Hover: no change

### Borders
Left border: 2px solid #000000 — used for emphasis blocks

### Cards
Background: #f2f2f2 or #ffffff
Padding: 16px or 32px based on context
Shadow: optional shadow-default

## Layout & Responsive Rules
Max width: fluid
Breakpoint: 750px — switch to single column
Page padding: 16px mobile, 32px desktop

## Interaction Rules
- No hover color changes for links
- Focus indicators rely on browser default outlines
- No animations; immediate state changes

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid for layout
- Keep corners sharp — no border radius
- Keep shadows minimal and consistent
- Use underline for all links
- Use sans-serif fonts throughout

## DON'T List
- Don't introduce gradients
- Don't round corners
- Don't add hover animations to links
- Don't use colors outside the palette
- Don't apply shadows excessively

## Code Examples

### Green Link
```css
a.link-green {
  color: #00b140;
  text-decoration: underline;
  font-weight: 400;
}
```

### Blue Link
```css
a.link-blue {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 700;
}
```

### Card
```css
.card {
  background: #f2f2f2;
  padding: 16px;
  box-shadow: 0px 5px 10px 0px rgb(0, 0, 0);
}
```

9. Summary

TL;DR — Nginx’s site is a masterclass in functional, minimal design. Sharp corners, no-nonsense typography, and a disciplined green-gray palette keep the focus on content and speed. If you want to match it, strip back to essentials and avoid decorative flourishes.

Brand Keywords:

• performance-minimalist
• utilitarian-tech
• engineer-first
• no-frills