IETF Design System Deep-Dive

1. Brand Overview

The IETF (Internet Engineering Task Force) site feels exactly like you'd expect from a standards body: functional, clear, and stripped of fluff. This isn't a brand trying to "sell" you—it's here to document, inform, and guide. The design language leans toward technical neutrality, but with subtle cues that say "we're authoritative." The primary blue is firm and confident without being flashy. Typography is clean, sans-serif, and a mix of utilitarian (Inter) and slightly more distinctive (Aktiv Grotesk) for emphasis.

This is a design aimed at engineers, researchers, and policy people—audiences who care more about clarity than visual spectacle. The layout is grid-based with predictable breakpoints. Buttons are rectangular and sharp-cornered (border-radius 0 for most states), which reinforces the "serious, no-nonsense" vibe. Shadows are minimal—only a single subtle drop shadow is used in a few places (rgba(0,0,0,0.15) at 0px 8px 16px). Most depth cues come from borders and color changes.

If you look closely, the site is built on Bootstrap and Vuetify, which means there's a hybrid component approach: Bootstrap for the basic grid and utilities, Vuetify for more complex UI parts. That explains some quirks—like the occasional mismatch in hover behavior or focus styles.

The IETF doesn't go for brand-heavy decoration. Instead, it uses a restrained palette anchored by a strong blue (#1762bb) and a supporting set of greys and off-whites. The typography scale is functional, with multiple heading levels sometimes reusing sizes (there are 16px headings, which is unusual). The spacing system is on an 8px base grid, but some 4px values sneak in—probably for tighter UI elements like icon gaps.

Overall: this is a system where clarity trumps personality. It's built to handle dense content without visual fatigue. The blue is the only real "voice" color; everything else is neutral support.

2. Color System

2.1 Primary Colors

Primary blue: #1762bb (rgb(23, 98, 187)) — This is the anchor. It's used for primary buttons, link text, and borders. The hue is slightly muted compared to a pure "web blue," which helps it feel more professional and less consumer-y. Psychologically, this blue says "trust, stability, authority." It’s not aggressive—no neon saturation—but it’s strong enough to stand out against light backgrounds.

Compared to competitors: W3C uses a softer blue; ICANN's is darker. IETF’s choice sits in between—bright enough for call-to-action, but safe for body links.

2.2 Complete Palette

2.3 Color Relationships

The palette has good contrast between primary blue and white (WCAG AA+ easily met). Blue on white is fine for buttons and links. Blue on light grey (#dee2e6) barely meets AA for normal text—should be reserved for bold or larger sizes. Dark grey (#49555c) on white is comfortable for body copy.

There's no explicit dark mode here—palette is tuned for light backgrounds. Most colors are safe for accessibility except accent purple (#b53cde) on white, which might be borderline for small text.

2.4 Usage Guide

• Use #1762bb for any interactive element that needs attention: links, primary buttons.
• Pair #f8f9fa with dark text (#333741 or #000000) for content areas.
• Hover states often shift from #1762bb to #004f73—cooler, darker blue for feedback.
• Accent purple (#b53cde) is rare—probably for special hover/focus states.
• Avoid mixing multiple blues in the same element; stick to one hue for clarity.

3. Typography

3.1 Font Families

Two main families:

• Aktiv Grotesk — fallback: HelveticaNeue-Light, helvetica, arial. Used for headings, sometimes for links and buttons when more weight is needed.
• Inter — fallback: Helvetica, arial. Used for body text, links, buttons. Weight varies from 300 to 600.

No Google Fonts or Adobe Fonts sources—looks like self-hosted.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle—no giant jumps. Largest heading at 32px, smallest caption at 14px. The mix of families gives emphasis—Aktiv Grotesk signals "heading/important," Inter signals "body/system UI." Multiple heading sizes at 20px and 16px means they rely on weight and spacing more than size for hierarchy. This keeps dense pages from feeling like a wall of text.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px, but with 4px and 6px micro values.

4.2 Layout

Breakpoints: 98px, 440px, 576px, 768px, 992px, 1200px, 1340px. That’s a mix of Bootstrap defaults with a couple of custom small widths. Containers probably cap around 1200–1340px. Mobile-first, with predictable jumps at Bootstrap’s sm, md, lg, xl.

5. Visual Elements

Border Radius: Mostly sharp corners (0px), but there are 5px radii in some elements (buttons, divs) and 5px top-only (5px 5px 0px 0px) for components that need a tab-like look.

Shadows: Single reusable shadow: rgba(0,0,0,0.15) 0px 8px 16px 0px. Used sparingly—cards or dropdowns.

Borders: Many combinations—1px solid #1762bb for buttons, 1px solid #dee2e6 for inputs, subtle rgba borders for cards, bottom-only borders for nav.

6. Components

6.1 Buttons

Outline Primary (btn-outline-primary):
Default: transparent bg, white text, 6px 12px padding, 0px radius, 1px solid #1762bb.
Hover: text var(--color-iab-navy), bg var(--color-iab-blue-2), 0.9 opacity, border var(--color-iab-grey-5).
Active: bg rgba(23,98,187,0.1), color var(--bs-list-group-action-active-color).
Focus: scale(0.85) translateY(-0.5rem) translateX(0.15rem), bg rgba(0,0,0,0.1), color #49555c.

Primary (btn-primary):
Default: bg #1762bb, white text, 6px 12px padding, 0px radius, 1px solid #1762bb.
Hover: bg var(--color-iab-blue-2).
Active: bg var(--bs-btn-active-bg).
Focus: bg var(--bs-btn-hover-bg).

Light (btn-light):
Default: bg #f8f9fa, black text, 6px 12px padding, 0px radius, 1px solid #f8f9fa.
Hover: same as outline primary hover.

6.2 Links

Five styles:

1. Blue underline (#1762bb) — hover to #004f73.
2. Light (#f8f9fa) underline — hover to #004f73.
3. Dark grey (#49555c) no underline — hover to #004f73.
4. White no underline — hover to #004f73.
5. Black no underline — hover to #004f73.

6.3 Forms

Search input:
Default: bg #f3f5f6, text #333741, border #dee2e6, 0px radius, 6px 12px padding.
Focus: bg var(--bs-body-bg), borderColor var(--bs-form-invalid-border-color), box-shadow 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25).

6.4 Cards

No explicit card data here, but borders: 1px solid rgba(0,0,0,0.176) or light grey. Occasional shadow rgba(0,0,0,0.15) 0px 8px 16px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #1762bb;
  --color-transparent: rgba(0,0,0,0);
  --color-bg-light: #f8f9fa;
  --color-grey-light: #dee2e6;
  --color-grey-dark: #49555c;
  --color-black: #000000;
  --color-accent-purple: #b53cde;
  --color-iab-navy: #002d3c;
  --color-iab-grey-5: #cbd2d6;
  --color-iab-yellow: #ffd13e;
  --color-iab-blue-3: #0a77b0;
  --color-iab-blue: #0b8cc5;
  --color-iab-brand-blue: #3e96c8;
  --color-iab-blue-2: #004f73;
  --color-iab-grey-6: #616466;
  --color-body: #333741;
  --color-danger: #dc3545;
  --color-success: #198754;
  --color-code: #d63384;
  --color-warning-bg-subtle: #fff3cd;
  --color-danger-bg-subtle: #f8d7da;
  --color-info-bg-subtle: #cff4fc;
  --color-primary-bg-subtle: #cfe2ff;

  /* Typography */
  --font-aktiv: "aktiv-grotesk", HelveticaNeue-Light, helvetica, arial;
  --font-inter: "Inter", Helvetica, arial;

  /* Spacing */
  --space-4: 0.25rem;
  --space-5: 0.31rem;
  --space-6: 0.38rem;
  --space-8: 0.50rem;
  --space-9_6: 0.60rem;
  --space-16: 1.00rem;
  --space-24: 1.50rem;
  --space-32: 2.00rem;
  --space-48: 3.00rem;
  --space-64: 4.00rem;

  /* Radius */
  --radius-none: 0;
  --radius-5: 5px;
  --radius-5-top: 5px 5px 0 0;

  /* Shadows */
  --shadow-default: rgba(0,0,0,0.15) 0px 8px 16px 0px;
}

8. AI Coding Assistant Prompt

# IETF Design System Specification

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

## Brand Context
IETF's design is technical, authoritative, and minimal. It uses a restrained palette with a single strong blue for interactive elements, plenty of neutral greys, and functional typography. Layout is grid-based with predictable breakpoints, sharp corners, and minimal shadows.

## Color Palette
- Primary Blue: #1762bb — Primary buttons, links, borders
- Transparent: rgba(0,0,0,0) — Transparent backgrounds
- Background Light: #f8f9fa — Page and card backgrounds
- Light Grey: #dee2e6 — Borders, dividers
- Dark Grey: #49555c — Secondary text, icons
- Black: #000000 — Titles, navbar brand
- Accent Purple: #b53cde — Special hover/focus accents
- IAB Navy: #002d3c — Hover/focus text color
- IAB Grey 5: #cbd2d6 — Hover borders
- IAB Yellow: #ffd13e — Highlights
- IAB Blue 3: #0a77b0 — Alternate blue
- IAB Blue: #0b8cc5 — Alternate blue
- IAB Brand Blue: #3e96c8 — Branding accents
- IAB Blue 2: #004f73 — Hover state background
- IAB Grey 6: #616466 — Neutral text
- Body Color: #333741 — Main body text
- Danger: #dc3545 — Validation errors
- Success: #198754 — Success states
- Code Color: #d63384 — Inline code
- Warning BG Subtle: #fff3cd — Warning backgrounds
- Danger BG Subtle: #f8d7da — Error backgrounds
- Info BG Subtle: #cff4fc — Info backgrounds
- Primary BG Subtle: #cfe2ff — Primary emphasis backgrounds

## Typography
Fonts:
- Headings: "aktiv-grotesk", HelveticaNeue-Light, helvetica, arial
- Body/UI: "Inter", Helvetica, arial

Sizes:
| Element | Font | Size | Weight | Line Height | Use |
|---------|------|------|--------|-------------|-----|
| H1 | Aktiv Grotesk | 32px | 600 | 1.20 | Page titles |
| H1 | Aktiv Grotesk | 28px | 600 | 1.20 | Section titles |
| Link | Inter | 24px | 400 | 1.00 | Prominent links |
| H1 | Inter | 20px | 400 | 1.00 | Subheadings |
| Link | Inter | 20px | 400 | 1.50 | Navigation links |
| H1 | Aktiv Grotesk | 20px | 600 | 1.20 | Subsection headings |
| Link | Aktiv Grotesk | 20px | 600 | 1.20 | Emphasized links |
| H1 | Inter | 20px | 300 | 1.50 | Light subheadings |
| Link | Inter | 16px | 400 | 1.50 | Body links |
| Button | Inter | 16px | 600 | 1.50 | Uppercase buttons |
| Caption | Inter | 14px | 400 | 1.50 | Small captions |

## Spacing & Grid
Base: 8px grid. Values: 4px, 5px, 6px, 8px, 9.6px, 16px, 24px, 32px, 48px, 64px.
Map:
- Button padding: 6px 12px
- Card padding: 16px
- Section gaps: 24px–48px

## Border Radius
- none: 0 — Most buttons, inputs
- sm: 5px — Small rounding for containers
- sm-top: 5px 5px 0 0 — Top corners only

## Shadows & Depth
- Default shadow: rgba(0,0,0,0.15) 0px 8px 16px — Use sparingly for dropdowns/cards
- Otherwise use borders for depth

## Component Specifications

### Primary Button
Default: bg #1762bb, color #fff, padding 6px 12px, radius 0, border 1px solid #1762bb.
Hover: bg #004f73, color var(--bs-btn-close-color).
Active: bg var(--bs-btn-active-bg), color var(--bs-btn-active-color).
Focus: bg var(--bs-btn-hover-bg).

### Outline Primary Button
Default: bg transparent, color #fff, border 1px solid #1762bb.
Hover: bg #004f73, color #002d3c, border #cbd2d6.
Focus: scale(0.85) translateY(-0.5rem) translateX(0.15rem), bg rgba(0,0,0,0.1).

### Input Field (Search)
Default: bg #f3f5f6, color #333741, border #dee2e6, padding 6px 12px.
Focus: bg var(--bs-body-bg), border var(--bs-form-invalid-border-color), box-shadow 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25).

## Layout & Responsive Rules
Max content width: ~1340px
Breakpoints: 98px, 440px, 576px, 768px, 992px, 1200px, 1340px
Mobile padding: 16px; Desktop: 24px–48px
Grid gap: multiples of 8px

## Interaction Rules
Transitions: 150ms ease for hover/focus/active
Focus indicators: color and background shifts, occasional scale transform
Loading states: not specified—use opacity reduction

## DO List
- Use only colors from the palette
- Keep spacing multiples of 8px (allow 4px for micro elements)
- Use Aktiv Grotesk for headings, Inter for body/UI
- Keep corners consistent—0px or 5px only
- Use primary blue for interactive elements only
- Keep shadows minimal

## DON'T List
- Don't introduce new blues or greys
- Don't mix rounded and sharp corners in same component
- Don't overuse shadows
- Don't use underlines except for designated link styles
- Don't use accent purple for body text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #1762bb;
  color: #fff;
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid #1762bb;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 400;
}
.btn-primary:hover { background: #004f73; }
.btn-primary:focus { outline: none; background: var(--bs-btn-hover-bg); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Outline Primary Button
```css
.btn-outline-primary {
  background: transparent;
  color: #fff;
  padding: 6px 12px;
  border: 1px solid #1762bb;
}
.btn-outline-primary:hover {
  background: #004f73;
  color: #002d3c;
  border-color: #cbd2d6;
}
```

### Search Input
```css
.input-search {
  background: #f3f5f6;
  color: #333741;
  border: 1px solid #dee2e6;
  padding: 6px 12px;
}
.input-search:focus {
  background: var(--bs-body-bg);
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}
```

9. Summary

TL;DR — IETF's design system is clean, authoritative, and minimal. Strong blue anchors the brand, everything else is neutral support. Typography is utilitarian, spacing is on an 8px grid, corners are sharp, shadows are rare.

Brand Keywords — standards-driven, tech-neutral, clarity-first, minimal-interactive, authoritative