AOL Design System Deep Dive

1. Brand Overview

AOL’s current design language is a far cry from its early-2000s web portal look. The modern site pushes toward a cleaner, modular news and service UI — a mix of utility and content. This is a brand living in the space between a media outlet and a daily-use tool (think email, weather, finance). The vibe is pragmatic: no ornamental fluff, just functional blocks with subtle accents.

The design philosophy feels like: “Keep it legible, keep it clickable, don’t get in the user’s way.” Typography is sans-serif, geometric, slightly humanist. The palette leans on muted darks and soft grays, with splashes of saturated blue and yellow for interaction cues. It's not minimalist in the Apple sense — there’s still texture via borders, pill shapes, and layered shadows — but everything is tamed to fit a consistent rhythm.

Navigation and content modules use a strict spacing scale, and components share rounded geometry — 8px, 12px, 30px, 32px radii — to reinforce a cohesive feel. The grid is responsive, with breakpoints at 601px, 754px, and 899px, suggesting a mobile-first approach with fine-tuned tablet states.

This is not a "brand-as-art" site; it’s a working UI for people checking news, stocks, and mail. The design system supports that: high-contrast link colors (#0000ee, #0f69ff), clear typography hierarchy, and restrained use of shadows. AOL’s UI is built with Tailwind CSS and Vuetify — a hybrid of utility-first and component-driven frameworks — which shows in the arbitrary values and v- prefixed component classes.

The takeaway: AOL’s design system is about trust and familiarity. It’s not trying to be trendy. It’s trying to be recognizable and functional for millions of returning users. And it succeeds by keeping its atomic tokens consistent, its component shapes predictable, and its palette limited.

2. Color System

2.1 Primary Colors

The semantic primary color is rgba(0, 71, 255, 0.08) — a translucent blue used in pill backgrounds and selected states. The accent color #0f69ff (CSS var --accent-color) is the punchy blue for CTAs and active links. This blue is not subtle — it’s fully saturated — which works for AOL’s functional, utility-driven interface. It’s similar in hue to Yahoo’s legacy blue, but a touch lighter and less purple.

Psychologically, blue here signals trust, linkability, and interactivity. Against AOL’s softer grays and charcoal (#232a31), it pops without feeling unsafe or aggressive.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally solid: #0000ee links on white are WCAG AA compliant. Dark text (#12161c) on light backgrounds (#f9f9f9, #ffffff) is AAA. The translucent primary blue (rgba(0, 71, 255, 0.08)) is used over white/near-white, so contrast is low but intentional — it’s background decoration, not text.

No explicit dark mode is present — the palette is tuned for light backgrounds. Dark surfaces (#232a31) are used in headers with white text.

2.4 Usage Guide

• Works: Accent blue (#0f69ff) with white text — high contrast, clear action.
• Avoid: Link blue (#0000ee) on dark backgrounds — fails contrast, feels outdated.
• Best combos: Gray-100 (#c2c9d2) as divider on white; #232a31 text over #e0e4e9 surfaces for subtle sections.
• Highlight: Yellow (#ffd327 from border) is rare — only used as a left border on h2 — so keep it special.

3. Typography

3.1 Font Families

Everything is set in Basis Grotesque Pro — a contemporary sans-serif — with fallbacks to Poppins, OpenSans, Helvetica Neue, helvetica, arial depending on context. No Google Fonts or Adobe kit; likely self-hosted.

This font choice is functional but with personality — geometric shapes, slightly rounded terminals, good screen legibility.

3.2 Type Scale

The extracted styles reveal a dense scale. Here’s the table:

…and many micro-variants with spacing adjustments and text transforms (uppercase, capitalize). This is a utility-first type system — small tweaks per component rather than a rigid scale.

3.3 Hierarchy

They rely on weight more than size for hierarchy. 28px at 900 weight is a headline; 18px at 700 is a strong subhead. Captions drop to 13px/12px but often jump to 900 weight for emphasis. This works for a dense UI — you can have small text that still commands attention.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — but with occasional 4px steps and odd halves (5.5px). Common values:

Count shows frequency — 24px is the workhorse (cards, section gaps).

4.2 Layout

Breakpoints: 601px, 754px, 899px. Likely:

• <601px: mobile single column
• 601–754px: tablet narrow
• 754–899px: tablet wide

• 899px: desktop

No max-width given, but component padding follows multiples of 8px.

5. Visual Elements

Border Radius

AOL loves rounded shapes. Values:

• 8px — cards, lists
• 12px — list items, divs
• 30px/32px — tabs, search
• 50px — pill buttons
• 9999px — avatars, email fields
• Asymmetric radii — e.g., 24px 0 0 24px for split buttons

Shadows

Sparse use:

• rgb(225, 229, 234) 0.2px 0.5px 0.5px 0.2px — subtle divider shadow
• rgba(0,0,0,0.1) 0px 4px 8px — soft elevation
• Occasional heavy rgba(0,0,0,0.5) for overlays

Mostly flat — shadows are light and functional.

Borders

Dividers dominate — 1px solid #c2c9d2 on list items. Blue borders (#0047ff) for primary pills. Yellow left borders on headings.

6. Components

6.1 Buttons

Variants:

1. Autocomplete Split Button

   • BG: #fff
   • Color: #000
   • Padding: 0 0 0 20px
   • Radius: 24px 0 0 24px
   • Font: 14px, weight 500

2. Flyout Button

   • BG: #ffd327
   • Color: #000
   • Padding: 12px 16px 12px 14px
   • Radius: 50px
   • Border: 1px solid transparent

3. Mail Button

   • BG: transparent
   • Color: #0000ee
   • Padding: 4px 28px
   • Radius: 50px
   • Hover: color #000

4. Mobile Slide Button

   • BG: rgba(255,255,255,0.9)
   • Color: #000
   • Padding: 0 9px 0 0
   • Radius: 0 40px 40px 0
   • Shadow: subtle twin shadows

5. Location Pill

   • BG: rgba(0,71,255,0.08)
   • Color: #000
   • Padding: 10px 16px 10px 13px
   • Radius: 32px
   • Border: 1px solid #0047ff

6. Active Tab

   • BG: #ebf0ff
   • Color: #232a31
   • Padding: 0 7px
   • Radius: 30px
   • Border: 1px solid #0047ff

6.2 Links

Styles range from legacy #0000ee underline to modern no-underline dark grays. Weight varies from 400 to 700. Hover states are mostly undefined — possibly handled globally.

6.3 Forms

Inputs:

• Text: white BG, black text, 24px split radius
• Email: white BG, gray text (#6b7885), 9999px radius
• Search: white BG, black text, 30px radius, 1px solid #e0e4e9

No fancy focus states extracted — likely handled via border color changes.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-bg: rgba(0, 71, 255, 0.08);
  --color-accent: #0f69ff;
  --color-hover: #0e5ee6;
  --color-gray-100: #c2c9d2;
  --color-gray-800: #232a31;
  --color-link-blue: #0000ee;
  --color-gray-500: #687078;
  --color-gray-900: #12161c;
  --color-gray-200: #e0e4e9;
  --color-black: #000000;
  --color-gray-600: #464e56;
  --color-mail-bg: #f9f9f9;
  --color-mail-bg-new: #ffffff;
  --color-mail-hover: #f5f8fa;

  /* Typography */
  --font-family-primary: "Basis Grotesque Pro", Poppins, "_OpenSans", "OpenSans", "Helvetica Neue", helvetica, arial;
  --font-size-h1: 44px;
  --font-size-h2: 28px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-44: 44px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 30px;
  --radius-xl: 32px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: rgb(225, 229, 234) 0.2px 0.5px 0.5px 0.2px;
  --shadow-medium: rgba(0,0,0,0.1) 0px 4px 8px 0px, rgba(0,0,0,0.1) 0px 0px 1px 0px;
}

8. AI Coding Assistant Prompt

# AOL Design System Specification

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

## Brand Context
AOL’s design is functional, utility-driven, and familiar. It uses a restrained palette, geometric sans-serif typography, and pill-shaped components to create a consistent, trustworthy interface. Shadows are minimal, borders define structure.

## Color Palette
- Primary Background: rgba(0, 71, 255, 0.08) — selection highlights, pill backgrounds
- Accent Blue: #0f69ff — primary buttons, active links
- Hover Blue: #0e5ee6 — hover state for links/buttons
- Gray-100: #c2c9d2 — dividers, list borders
- Gray-800: #232a31 — header backgrounds
- Link Blue: #0000ee — legacy link color
- Gray-500: #687078 — logo tint
- Gray-900: #12161c — dark text
- Gray-200: #e0e4e9 — light background surfaces
- Black: #000000 — body text, outlines
- Gray-600: #464e56 — secondary dark UI elements
- Mail BG: #f9f9f9 — mail surface
- Mail BG New: #ffffff — new mail surface
- Mail Hover: #f5f8fa — hover surface

## Typography
Font family: "Basis Grotesque Pro", Poppins, "_OpenSans", "OpenSans", "Helvetica Neue", helvetica, arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 44px | 500 | — | Page titles |
| H2 | 28px | 900 | 1.14 | Section headings |
| Body LG | 18px | 700 | 1.33 | Links, subheads |
| Body | 16px | 400 | — | Paragraphs |
| Button | 16px | 700 | 1.00 | CTAs |
| Caption | 14px | 500 | — | Labels |
| Caption SM | 12px | 400 | 0.67 | Metadata |

## Spacing & Grid
Base: 8px grid. Common: 2px, 4px, 6px, 8px, 12px, 14px, 16px, 18px, 20px, 24px, 28px, 44px.

## Border Radius
- sm: 8px — cards, list items
- md: 12px — small containers
- lg: 30px — tabs
- xl: 32px — search bars
- pill: 50px — buttons
- full: 9999px — avatars, round inputs

## Shadows & Depth
- Subtle border shadow: rgb(225, 229, 234) 0.2px 0.5px 0.5px 0.2px
- Medium elevation: rgba(0,0,0,0.1) 0px 4px 8px

## Component Specifications

### Primary Button
Default:
```css
background: #0f69ff;
color: #fff;
padding: 12px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 16px;
border: none;
transition: background 150ms ease;
```
Hover: background: #0e5ee6  
Focus: outline: 2px solid #0f69ff; outline-offset: 2px  
Disabled: opacity: 0.5; cursor: not-allowed

### Secondary Button (Location Pill)
Default:
```css
background: rgba(0, 71, 255, 0.08);
color: #000;
padding: 10px 16px 10px 13px;
border-radius: 32px;
border: 1px solid #0047ff;
font-size: 16px;
```

### Navigation Link
Default: color: #0000ee; text-decoration: underline;  
Hover: color: #000; text-decoration: underline

### Input Field (Email)
Default:
```css
background: #fff;
color: #6b7885;
border: 1px solid #000;
border-radius: 9999px;
padding: 12px 24px;
```
Focus: border-color: #0f69ff; outline: none

### Card
```css
background: #fff;
border-radius: 8px;
padding: 24px;
box-shadow: rgba(0,0,0,0.1) 0px 4px 8px;
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: <601px
- Tablet Narrow: 601–754px
- Tablet Wide: 754–899px
- Desktop: >899px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus indicators: 2px solid accent
- No loading spinners; use skeletons

## DO List
- Use only colors from palette
- Maintain 8px grid spacing
- Use Basis Grotesque Pro for all text
- Keep buttons pill-shaped
- Use subtle shadows only

## DON'T List
- Don’t invent new blues
- Don’t mix sharp and rounded corners
- Don’t overload with heavy shadows
- Don’t stretch icons

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0f69ff;
  color: #fff;
  padding: 12px 16px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
}
.btn-primary:hover { background: #0e5ee6; }
```

Card:
```css
.card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.1) 0px 4px 8px;
}
```

Input:
```css
.input-email {
  background: #fff;
  color: #6b7885;
  border: 1px solid #000;
  border-radius: 9999px;
  padding: 12px 24px;
}
.input-email:focus {
  border-color: #0f69ff;
  outline: none;
}
```

9. Summary

TL;DR: AOL’s design system is a practical, utility-first setup built for daily-use content and tools. Blue is the action color, gray defines structure, and Basis Grotesque Pro keeps text clean. Pills, soft shadows, and 8px spacing hold it together.

Brand Keywords: utility-first, pill-shaped-consistency, trusted-blue, content-driven