IEEE Design System Deep Dive

1. Brand Overview

IEEE’s visual language is unapologetically institutional. It’s the design equivalent of walking into a conference hall full of engineers — clean, structured, no fluff. This isn’t a brand chasing fashion trends; it’s built for credibility and clarity. They know their audience: electrical engineers, computer scientists, and researchers who don’t need pastel gradients or playful micro-interactions. They need information, fast, and they need to trust it.

The palette is anchored by a deep, clear blue (#00629b) that screams “technical authority.” It’s paired with white for breathing room and black for text clarity. There are hints of accent colors — a bright yellow (#ffd256) and a vivid cyan (#00b5e2) — but they’re used sparingly, almost like highlighters in a technical manual. This restraint keeps the site from feeling chaotic. The blue is doing most of the heavy lifting.

Typography is pragmatic. Open Sans everywhere, with occasional Helvetica or Arial fallbacks. No serif flourishes, no display fonts. Sizes range from large, airy headings at 50px down to tight 10px labels. It’s a utilitarian type scale, built for multi-language, multi-device readability.

Layout sticks to an 8px scale, but with some odd fractional values like 3.75px and 6.75px. This tells me the system has legacy elements or pixel-perfect adjustments for certain components. Breakpoints cover the usual suspects: 376px, 576px, 768px, 992px, 1024px, 1200px — meaning they’ve designed for mobile-first but kept desktop widths generous.

The whole system leans toward flat design. Shadows are almost nonexistent (0px 0px 2px 2px in one case). Depth is conveyed with borders and color changes, not drop shadows. Corners are mostly rounded — 5px, 22px, 25px — with occasional 50% pills for circular buttons.

If I had to sum up IEEE’s design philosophy: functional clarity over visual spectacle. They’ve built a system that feels like technical documentation, and that’s exactly right for their audience.

2. Color System

2.1 Primary Colors

The core brand color is #00629b — a deep, slightly muted blue. It’s a “trust me” color. Banks use variations of this, as do universities and tech institutions. Compared to competitors like ACM (who lean more navy) or Springer (who use orange accents), IEEE’s blue feels cooler and more precise. It’s perfect for interactive elements: links, CTAs, and highlighted states.

Psychologically, blue signals stability, intelligence, and calm. It’s not aggressive; it invites engagement without shouting. The choice to pair it with white backgrounds and black text makes accessibility easy. Dark blue on white? Great contrast. White text on blue? Also solid.

2.2 Complete Palette

2.3 Color Relationships

IEEE’s palette is high-contrast by default. Black text on white backgrounds scores 21:1 contrast ratio — WCAG AAA. White text on #00629b is also AAA. The only caution is #ffd256 (yellow) on white; contrast ratio is poor (~1.5:1) for text. This is fine for accents, but not for body copy.

Dark mode isn’t present. If they were to implement it, #002855 and #003a6b could anchor the background. Cyan (#00b5e2) would pop nicely in a dark theme.

2.4 Usage Guide

• Works well: #00629b on white, black on white, white on #00629b.
• Avoid: Yellow (#ffd256) for text on white — fails accessibility.
• Accents: Use #00b5e2 sparingly for focus or special highlights.
• Hover states: Move from #00629b to #002855 or #003a6b for darker interaction feedback.

3. Typography

3.1 Font Families

Primary: Open Sans (Google Fonts) — sans-serif, humanist, very readable at small sizes.
Fallbacks: Helvetica, Arial for system compatibility.
Special cases: Arial for some buttons/captions, especially smaller UI labels.

No Adobe Fonts. Variable fonts supported.

3.2 Type Scale

3.3 Hierarchy

IEEE’s type hierarchy is subtle. Headings are large but light-weight (300), which keeps pages from feeling heavy. Then they drop quickly into 20px and 18px for subheads. Captions and labels are tight, uppercase, and sometimes bold. This works for technical content where clarity is key and ornamentation is unnecessary.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale, but with fractional exceptions.
Common values:

4.2 Layout

Breakpoints: 376px, 576px, 768px, 992px, 1024px, 1200px.
This covers mobile, tablet, and desktop. Likely max content width around 1200px for main container. Mobile-first approach, scaling up.

5. Visual Elements

• Border Radius:

  • 5px — small buttons, cards
  • 14px — spans (rare)
  • 22px — feature cards
  • 25px — buttons
  • 50% — circular buttons/modals

• Shadows: Minimal. One shadow: 0px 0px 2px 2px #ccc. Flat design dominates.

• Borders:

  • 1px solid #00629b — buttons, links
  • 1px solid #fff — inverted link/button states
  • 0px 0px 0px 1px solid #000 — side dividers
  • Functional borders for inputs (#00b5e2 on focus)

6. Components

6.1 Buttons

Variant 1: Circular Close Button
Default: White background, #00629b text, 50% radius, 2px solid #fff.
Hover: Dark navy (#002855) background, white text.
Focus: Transparent text, background from --gin-bg-app, rotated.

Variant 2: Primary CTA
Default: #00629b background, white text, 25px radius, 1px solid #00629b.
Hover: #002855 background, white text, scale 1.2.
Focus: Background from --gin-bg-app, transparent text.

Variant 3: Video Buttons
Default: Black background and text, 5px radius.
Hover: #002855 background, white text.

6.2 Links

Four styles:

• Primary link: #00629b underline, hover to #002855.
• Black link: Black underline, hover to #002855.
• Legacy blue (#0000ee): hover to #002855.
• White link: No underline, hover adds underline and changes to #002855.

6.3 Forms

Minimal styling. Checkboxes: transparent background, no border. Focus removes outline entirely. Inputs: #00b5e2 border on focus.

6.4 Cards

Card corners: 5px or 22px depending on prominence. Borderless. Padding typically 15px or 25px. No shadow — rely on spacing and background color.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-primary-blue: #00629b;
  --color-white: #ffffff;
  --color-link-blue: #0000ee;
  --color-accent-yellow: #ffd256;
  --color-navy-overlay: #002855;
  --color-deep-blue: #003a6b;
  --color-light-blue-tint: #afcddf;
  --color-pale-blue-tint: #a3c6db;
  --color-bright-cyan: #00b5e2;

  /* Typography */
  --font-primary: 'Open Sans', sans-serif;
  --font-fallback: Helvetica, Arial;
  --font-size-h1-xl: 50px;
  --font-size-h1-lg: 38px;
  --font-size-h1-md: 28px;
  --font-size-button-lg: 24px;
  --font-size-link-lg: 24px;
  --font-size-h1-sm: 22px;
  --font-size-h1-bold-md: 20px;
  --font-size-h1-bold-sm: 18.72px;
  --font-size-link-bold: 18px;
  --font-size-caption-lg: 14px;
  --font-size-caption-sm: 10px;

  /* Spacing */
  --space-1: 1px;
  --space-3-75: 3.75px;
  --space-6-75: 6.75px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-75: 75px;
  --space-125: 125px;

  /* Radius */
  --radius-sm: 5px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 25px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: 0px 0px 2px 2px #ccc;
}

8. AI Coding Assistant Prompt

# IEEE Design System Specification

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

## Brand Context
IEEE values functional clarity, high-contrast accessibility, and technical authority. The design system is built for engineers and researchers — minimal ornamentation, precise typography, restrained color use.

## Color Palette
- Black: #000000 — Body text, icons
- Primary Blue: #00629b — CTAs, nav links, primary buttons
- White: #ffffff — Backgrounds, text on dark backgrounds
- Link Blue: #0000ee — Legacy link color, IEEE logo
- Accent Yellow: #ffd256 — Highlights (non-text)
- Navy Overlay: #002855 — Hover states for dark elements
- Deep Blue: #003a6b — Hover/focus states
- Light Blue Tint: #afcddf — Hover/focus backgrounds
- Pale Blue Tint: #a3c6db — Hover/focus backgrounds
- Bright Cyan: #00b5e2 — Input focus borders, highlights

## Typography
- Font families: 'Open Sans', fallback Helvetica, Arial
- Sizes:
  - H1 XL: 50px, weight 300, line-height 1.20
  - H1 LG: 38px, weight 300, line-height 1.26
  - H1 MD: 28px, weight 300, line-height 1.36
  - Button LG: 24px, weight 400, line-height 1.42
  - Link LG: 24px, weight 400, line-height 1.42
  - H1 SM: 22px, weight 400, line-height 1.45
  - H1 Bold MD: 20px, weight 700, line-height 1.50
  - Link Bold: 18px, weight 700, line-height 1.56
  - Caption LG: 14px, weight 800, line-height 1.14, uppercase
  - Caption SM: 10px, weight 400, line-height 1.80

## Spacing & Grid
Base: 8px scale
Values: 1px, 3.75px, 6.75px, 10px, 15px, 20px, 25px, 30px, 40px, 50px, 75px, 125px
Use multiples for padding, margins, gaps.

## Border Radius
- sm: 5px — buttons, cards
- md: 14px — spans
- lg: 22px — feature cards
- xl: 25px — large buttons
- full: 50% — circular buttons

## Shadows & Depth
Flat design. Single light shadow: 0px 0px 2px 2px #ccc (rare).

## Components

### Primary Button
Default: background #00629b, color #ffffff, padding 11px 12px, radius 25px, border 1px solid #00629b, font-weight 700, font-size 15px.
Hover: background #002855, color #ffffff, transform scale(1.2).
Focus: background var(--gin-bg-app), color transparent.

### Circular Close Button
Default: background #ffffff, color #00629b, radius 50%, border 2px solid #ffffff, font-size 13.33px.
Hover: background #002855, color #ffffff.
Focus: rotate(90deg), background var(--gin-bg-app), color transparent.

### Links
Primary link: color #00629b, underline; hover color #002855.
Black link: color #000000, underline; hover color #002855.
Legacy blue: color #0000ee, underline; hover color #002855.
White link: color #ffffff, no underline; hover underline, color #002855.

### Input Fields
Default: transparent background, no border.
Focus: border-color transparent, outline none.
Special: text inputs use #00b5e2 border on focus.

## Layout & Responsive Rules
Max content width: 1200px
Page padding: 15px mobile, 25px desktop
Breakpoints: 376px, 576px, 768px, 992px, 1024px, 1200px

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: color change or background change
- Hover transforms: scale(1.2) on buttons

## DO List
- Use only colors from the palette
- Maintain 8px grid
- Keep button text white on blue
- Use uppercase for captions
- Keep headings light-weight (300) for large sizes
- Use full-radius only for circular buttons

## DON'T List
- Add custom shadows
- Mix sharp and rounded corners
- Use yellow (#ffd256) for text
- Remove underline from links unless specified
- Use colors outside the palette

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #00629b;
  color: #ffffff;
  padding: 11px 12px;
  border-radius: 25px;
  border: 1px solid #00629b;
  font-weight: 700;
  font-size: 15px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #002855;
  transform: scale(1.2);
}
.btn-primary:focus {
  background: var(--gin-bg-app);
  color: transparent;
}
```

Circular Close Button:
```css
.btn-close {
  background: #ffffff;
  color: #00629b;
  border-radius: 50%;
  border: 2px solid #ffffff;
  font-size: 13.33px;
  transition: all 150ms ease;
}
.btn-close:hover {
  background: #002855;
  color: #ffffff;
}
.btn-close:focus {
  transform: rotate(90deg);
  background: var(--gin-bg-app);
  color: transparent;
}
```

Form Input:
```css
.input-text {
  border: none;
  background: transparent;
  padding: 10px;
}
.input-text:focus {
  border: 1px solid #00b5e2;
  outline: none;
}
```

9. Summary

TL;DR: IEEE’s design system is built for precision and clarity. Blue and white dominate, typography is utilitarian, spacing sticks to an 8px grid, and shadows are nearly absent. It’s the perfect fit for a technical audience.

Brand Keywords:

• technical-authority
• functional-minimalism
• high-contrast
• flat-precision
• engineer-friendly