F5 Design System Deep Dive

1. Brand Overview

F5’s site feels like a high-performance control panel for serious infrastructure people. This is not a “playful tech startup” design language. It’s tight, functional, and built for clarity under pressure. You can see it in the typography: condensed, uppercase NeusaNextProWide punching out big headings; clean, modern ProximaNova for body and UI copy. The color palette is dark, authoritative, with sharp pops of action color — that signature F5 red (#e4002b) and a controlled, corporate blue (#0072b0 / #1d9cd3).

The vibe is enterprise security and networking. Minimal gradients, mostly flat fills. Shadows are sparse and deliberate, not decorative. The spacing grid is disciplined — 8px base with occasional 4px and 6px adjustments for micro-alignment. Breakpoints at 576px, 768px, 992px — classic responsive tiers, no weird intermediate jumps.

They’re using Tailwind CSS heavily, with Radix UI primitives under the hood. This gives them atomic control over layout and states while keeping accessibility in check. It’s a hybrid of design system rigor and code-first flexibility.

F5’s design philosophy here:

• Clarity over decoration — The interface is stripped down, every pixel serving a purpose.
• Authority through typography — The wide headings command attention, the sans-serif body text keeps it approachable.
• Controlled color accents — Blue for action, red for brand, never overused.
• Flat, solid shapes — Rounded corners are minimal (5px standard), or extreme (full pill radius) for inputs/buttons.

This is a UI for people who care about uptime and security. The design language reflects that — predictable, consistent, and confident.

2. Color System

2.1 Primary Colors

Primary brand color in usage: #222222 (rgb(34, 34, 34)) as a semantic “primary” — interesting choice. Instead of a bright primary, they’ve defined the main semantic color as a deep charcoal, letting functional blues (#0072b0, #1d9cd3) and reds (#e4002b) do the visual signaling.

This works because F5 isn’t trying to be playful — they’re anchoring the UI in a strong neutral, then layering interactive color where needed. The blue family is used for CTAs, links, and focus states; red is used for brand identity and alerts.

Compared to competitors (think Cisco, Palo Alto Networks), F5’s palette is darker, more restrained. No big gradient hero banners here — this is flat, disciplined color application.

2.2 Complete Palette

2.3 Color Relationships

Contrast is strong. #222222 text on #faf9f7 background is well above WCAG AA. Primary buttons (#0072b0 with white text) are fine for accessibility, though blue on white can get tricky if opacity is reduced. Red (#e4002b) is high contrast against light backgrounds — but needs careful handling against dark surfaces to avoid glare.

No explicit dark mode tokens here — but the palette could adapt easily given its range of neutrals and saturated accents.

2.4 Usage Guide

• Primary actions: #0072b0 with white text.
• Secondary actions: Transparent background, #222222 border and text.
• Alerts: #e4002b for critical, #ffd651 for warnings, #1fbf51 for success.
• Backgrounds: #faf9f7 (light), #222222 (dark).
• Avoid using red for non-critical UI — keep it for brand and alerts.
• Don’t mix multiple accent colors in the same component — pick one per context.

3. Typography

3.1 Font Families

Two main families:

• NeusaNextProWide — condensed, wide sans-serif. Used for headings and links. No Google/Adobe source data here — likely a custom licensed font.
• ProximaNova — clean, geometric sans-serif. Used for body text, buttons, captions.

Fallback stacks are minimal — either null or “NeusaNextProWide Fallback” in some contexts.

3.2 Type Scale

3.3 Hierarchy

They use massive headings (56px) to dominate hero areas, then step down quickly to 42px and 28px for subheads. Body text sits in the 16–20px range — readable, not cramped. Buttons are mostly 14–16px, bold enough to stand out without overwhelming.

The condensed heading font makes even large sizes fit comfortably in narrow columns — great for responsive layouts. Uppercase in some contexts (16px heading with 1.6px spacing) adds emphasis without changing weight.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but they allow half-steps (4px, 6px) for fine-tuning.

4.2 Layout

Breakpoints:

• 575px / 576px (mobile)
• 767px / 768px (tablet)
• 991px / 992px (desktop)

Classic Bootstrap-like structure. Likely container widths match these breakpoints — nothing experimental here.

5. Visual Elements

Border radius: 5px is the workhorse — used on buttons, divs, menus. Inputs can go up to 24px for pill shapes. Extreme “full” radius (33,554,400px) applied to pill buttons.

Shadows: Mostly none. When used, it’s soft, subtle — rgba(0,0,0,0.14) 0px 2px 10px. This keeps depth minimal.

Borders: Steel gray (#666) for dividers, silver (#ccc) for inputs, primary blue for active states.

6. Components

6.1 Buttons

Primary:

• Background: #0072b0
• Color: white
• Padding: 4px 24px
• Border radius: 0px (square)
• No box shadow
• Font: 14px, weight 500

Secondary:

• Background: transparent
• Color: #222222
• Padding: 4px 25px
• Border: 1px solid #222222
• Font: 16px, weight 600

States: Hover/active/focus not defined in data — likely handled by Tailwind variants.

6.2 Links

Four variants:

1. #222222 text, no underline.
2. White text, bold.
3. Light background (#faf9f7) text, underline default.
4. Blue (#0072b0), underline.

Hover generally removes underline, changes color to carbon (#222).

6.3 Forms

Text input:

• Border: 1px solid #ccc
• Radius: 24px (pill)
• Padding: 6px 12px 6px 32px
• Focus: border 2px solid var(--color-primary), shadow rgba(29,156,211,0.25) 0 0 0 0.2rem

6.4 Cards

No explicit card data, but likely use neutral backgrounds (#faf9f7 or #e6e6e6), 5px radius, minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #222222;
  --color-secondary: transparent;
  --color-neutral-white: #faf9f7;
  --color-bay-blue: #1d9cd3;
  --color-primary-blue: #0072b0;
  --color-f5-red: #e4002b;
  --color-tangerine: #f29a36;
  --color-bay-200: #66afd7;
  --color-bay-300: #005c8d;
  --color-eggplant: #4a1968;
  --color-river: #0e41aa;
  --color-carbon: #222222;
  --color-jade: #009639;
  --color-lead: #999999;
  --color-f5-red-200: #f06680;
  --color-river-400: #072155;
  --color-stone: #e6e6e6;
  --color-silver: #cccccc;
  --color-steel: #666666;
  --color-jade-400: #004b1d;
  --color-warning: #ffd651;
  --color-raspberry-400: #561441;
  --color-success: #1fbf51;
  --color-bay-100: #b2d7eb;
  --color-raspberry: #ab2782;
  --color-error: #c20025;
  --color-eggplant-100: #cdabe3;
  --color-black: #000000;
  --color-tangerine-400: #794d1b;
  --color-charcoal: #343434;

  /* Typography */
  --font-heading: "NeusaNextProWide", sans-serif;
  --font-body: "ProximaNova", sans-serif;

  /* Spacing */
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14_5: 14.5px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-33: 33px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 12px;
  --radius-pill: 24px;
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.14) 0px 2px 10px;
}

8. AI Coding Assistant Prompt

# F5 Design System Specification

You are an F5 design expert. Build UIs matching their visual language exactly.

## Brand Context
F5’s design language is enterprise-focused, functional, and confident. It uses dark neutrals as a base, with controlled blue and red accents for actions and brand signals. Typography is bold and condensed for headings, clean sans-serif for body and UI text.

## Color Palette
- Primary Neutral: #222222 — body text, icons, base borders
- Secondary (transparent): transparent — placeholder spaces
- Neutral White: #faf9f7 — light backgrounds
- Bay Blue: #1d9cd3 — secondary CTAs, links
- Primary Blue: #0072b0 — primary buttons, active borders
- F5 Red: #e4002b — brand logo, critical alerts
- Tangerine: #f29a36 — warning accents
- Bay-200: #66afd7 — charts, illustrations
- Bay-300: #005c8d — dark blue hover states
- Eggplant: #4a1968 — rare highlights
- River: #0e41aa — deep link color
- Carbon: #222222 — text neutral
- Jade: #009639 — success accents
- Lead: #999999 — captions, placeholders
- F5 Red-200: #f06680 — subtle alerts
- River-400: #072155 — dark backgrounds
- Stone: #e6e6e6 — surfaces
- Silver: #cccccc — borders
- Steel: #666666 — dividers
- Jade-400: #004b1d — success text
- Warning: #ffd651 — warning states
- Raspberry-400: #561441 — dark purple accents
- Success: #1fbf51 — success states
- Bay-100: #b2d7eb — light blue backgrounds
- Raspberry: #ab2782 — magenta highlights
- Error: #c20025 — validation errors
- Eggplant-100: #cdabe3 — light purple
- Black: #000000 — pure black
- Tangerine-400: #794d1b — dark orange
- Charcoal: #343434 — dark neutral

## Typography
- Headings: "NeusaNextProWide", sans-serif
- Body: "ProximaNova", sans-serif

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 700 | 1.25 | Hero titles |
| H1 | 42px | 700 | 1.25 | Section titles |
| Subhead | 28px | 700 | 1.25 | Secondary headings |
| Body-lg | 20px | 700/600 | 1.25/1.50 | Body emphasis |
| Body | 16px | 400-600 | 1.50 | Standard body text |
| Button | 14-16px | 500-700 | 1.43-1.50 | Action labels |
| Caption | 12.8px | 400 | 1.50 | Small annotations |

## Spacing & Grid
Base: 8px. Scale: 3px, 4px, 6px, 8px, 10px, 11px, 12px, 14.5px, 16px, 20px, 24px, 30px, 32px, 33px, 36px, 40px, 48px, 60px, 64px, 80px.

## Border Radius
- sm: 4px — menus
- md: 5px — buttons, divs
- lg: 12px — inputs
- pill: 24px — pill inputs/buttons
- full: 33554400px — extreme pill shapes

## Shadows & Depth
- Minimal use: rgba(0,0,0,0.14) 0px 2px 10px — subtle depth
- Flat design preferred; use borders for separation

## Component Specifications

### Primary Button
Default:
```css
background-color: #0072b0;
color: #ffffff;
padding: 4px 24px;
border-radius: 0px;
border: none;
font-weight: 500;
font-size: 14px;
```

### Secondary Button
Default:
```css
background-color: transparent;
color: #222222;
padding: 4px 25px;
border-radius: 0px;
border: 1px solid #222222;
font-weight: 600;
font-size: 16px;
```

### Navigation Links
Default: no underline, color varies by context  
Hover: remove underline, change color to #222222

### Input Fields
Default:
```css
background-color: transparent;
color: #343434;
border: 1px solid #cccccc;
border-radius: 24px;
padding: 6px 12px 6px 32px;
```
Focus:
```css
border: 2px solid var(--color-primary);
box-shadow: rgba(29,156,211,0.25) 0 0 0 0.2rem;
outline: none;
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: <576px
- Tablet: 576px–768px
- Desktop: >992px

## Interaction Rules
- Transition: 150ms ease on state changes
- Focus: visible outline or shadow per spec
- Disabled: opacity 0.5, no pointer events

## DO List
- Use ONLY palette colors
- Maintain 8px-based spacing
- Use NeusaNextProWide for headings
- Keep borders at 1px unless focus state
- Use pill radius only for inputs/buttons

## DON'T List
- Add unapproved shadows
- Mix rounded and sharp corners
- Use red for non-critical actions
- Change font sizes outside type scale

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#0072b0] text-white py-1 px-6 font-medium text-sm">Click Me</button>
```

Secondary Button:
```html
<button class="border border-[#222222] text-[#222222] py-1 px-6 font-semibold text-base">Secondary</button>
```

Input:
```html
<input type="text" class="border border-[#cccccc] rounded-[24px] px-3 py-1 focus:border-2 focus:border-[#0072b0] focus:shadow-[0_0_0_0.2rem_rgba(29,156,211,0.25)]">
```

9. Summary

TL;DR — F5’s design system is enterprise-grade: dark neutrals, strong accent blues and reds, condensed headings, flat shapes, disciplined spacing. It’s built for clarity and control, not decoration.

Brand Keywords:

• enterprise-confident
• dark-neutral
• condensed-typography
• flat-ui
• controlled-accent