AT&T Design System Deep Dive

1. Brand Overview

AT&T’s “Currently” site (https://currently.att.yahoo.com/) is an interesting hybrid — it’s AT&T-branded but heavily infused with Yahoo’s product design language. You can see it in the typography stack (YahooSans VF and Yahoo Product Sans everywhere) and in the subtle purple and blue accents that feel more like Yahoo than AT&T’s pure corporate blue. This is not the AT&T you see in store signage; it’s AT&T’s consumer-facing content portal, riding on Yahoo’s UI framework.

The vibe? Functional, dense, a little utilitarian. They’re delivering news, weather, sports, and mail access, so the design isn’t about brand splash — it’s about keeping a lot of information organized and readable. You get a restrained color palette: neutrals like #000000, #5b636a, #232a31, with pops of saturated blue (#0057b8, #324fe1) for interaction. Typography is tight and sans-serif, optimized for small UI elements and link-heavy layouts.

Philosophy-wise, this is “content-first with conservative UI.” The design avoids flashy gradients except where they’re part of a functional indicator (--srch-tn-flame-color has a multicolor gradient for a flame motif). Most components are flat, with minimal shadow (rgba(0, 0, 0, 0.05) soft shadows for cards) and small radii (4px, 8px). When they do go big, it’s consistent — pill shapes (100px radius) for search inputs and certain buttons.

This site is clearly built for high-frequency use — quick scanning, low cognitive load. Links have subtle hover underlines, buttons keep hover/focus states obvious but not disruptive. The 8px spacing grid gives rhythm to layouts, and breakpoints cover an absurd range — from 320px mobile up to 2100px wide screens — making sure the portal works on everything from old phones to ultrawide monitors.

If you’re designing for this ecosystem, you’re working inside Yahoo’s component library with AT&T’s color accents. It’s a brand mashup, but it’s coherent: AT&T’s blue for primary actions, Yahoo’s purple for mail-related states, both sitting on a neutral, slightly cool gray base.

2. Color System

2.1 Primary Colors

The main brand action color here is Blue — specifically #0057b8 (rgb 0,87,184). This is AT&T’s corporate blue, used for buttons, active link states, and CTAs. It’s a strong, saturated hue, leaning towards navy but bright enough to pop against white or gray backgrounds.

There’s also a secondary blue, #324fe1, that reads as a link color. It’s less corporate, more “web blue,” and it’s used for interactive text and some icons. The purple (#6001d2) and darker violet hover (#5015b0) are Yahoo’s fingerprints, showing up in mail-related UI and focus outlines.

Compared to competitors (think Verizon’s red, T-Mobile’s magenta), AT&T’s blue is calmer and less aggressive. It communicates trust and stability, but here it’s paired with Yahoo’s playful purples — giving the portal a little more personality.

2.2 Complete Palette

2.3 Color Relationships

The palette is mostly cool tones — blues, grays, purples — with rare warm accents like #c41522 red. Black text on white is high contrast (passes WCAG AAA easily). Blue on white is fine; blue on dark gray (#232a31) still passes for links.

Dark mode isn’t explicitly implemented here — the palette assumes a light background. The darker grays are used for sections, not as full-page backgrounds.

2.4 Usage Guide

• Best combos: #0057b8 on #ffffff for primary buttons; #324fe1 links on white or light gray.
• Avoid: Blue on purple — low contrast and brand clash.
• Neutral pairing: Grays (#5b636a, #6e7780) work well with both blue and purple accents.
• Red accents: Use sparingly — partner-specific contexts only.
• Accessibility: Keep text colors above 4.5:1 contrast ratio; most primary/secondary combos here meet that easily.

3. Typography

3.1 Font Families

Two main families:

• YahooSans VF — Primary UI font. Variable font, sans-serif. Fallbacks: Helvetica Neue, Helvetica, Arial. Used for headings, buttons, captions.
• Yahoo Product Sans — Secondary font for links, captions. Fallbacks: YahooSans VF, YahooSans, Yahoo Sans, Helvetica Neue, Helvetica, Arial.

No Google or Adobe fonts — these are custom Yahoo-hosted.

3.2 Type Scale

3.3 Hierarchy

They use small jumps in size — 26px to 20px to 18px — for major headings and links. Body and captions cluster between 14px–12px. Weight shifts (400, 500, 600, 700) do a lot of the hierarchy work. This keeps the visual density high but still readable.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

4.2 Layout

Breakpoints: insane granularity — from 320px up to 2100px. This is not a simple 3-tier responsive system; they’re tweaking layouts for dozens of device widths. Expect fluid containers, with max content widths likely around 1440px for desktop.

5. Visual Elements

Border Radius: Mostly small — 4px for cards, headings; 8px for buttons, inputs; 100px for pills and circular elements. A few odd combos (0px 8px 8px 0px) for split controls. This keeps the UI modern but not overly soft.

Shadows: Minimal. Cards get soft shadow stacks like rgba(0, 0, 0, 0.05) 0px 0px 2px plus a 0px 4px 16px for lift. No heavy drop shadows — depth is subtle.

Borders: 1px solid grays (#ccc, #e0e4e9) for inputs and dividers. Some colored borders (#0057b8) for active states.

6. Components

6.1 Buttons

Primary (Search-style pill)

Default:

• Background: #f0f3f5
• Color: #232a31
• Padding: 0px 145px 0px 24px
• Radius: 100px
• Border: none

Hover: Transparent background, no shadow.

Active: Opacity 0.4.

Focus: Blue glow (rgba(82, 168, 236, 0.6) outer).

Secondary (Small blue pill)

Default:

• Background: #0057b8
• Color: #000000
• Padding: 1px 6px
• Radius: 20px

Hover: Transparent bg, slight shadow.

Active: White text, darker blue bg.

Focus: Dark bg, hover text color.

Icon toggle

Default:

• Transparent bg
• Color: #000000
• Border: 2px outset transparent
• Radius: 0

Hover: Gray bg (#e0e4e9).

6.2 Links

Multiple styles:

• Blue (#324fe1) — default link, underline on hover.
• Dark gray (#232a31) — nav links.
• Gray (#5b636a) — secondary nav.
• AT&T Blue (#0057b8) — special links with color swap on hover.
• White (#ffffff) — footer links.

6.3 Forms

Search input — pill shape, same as primary button. Focus: blue glow.

Select — white bg, black text, no border.

6.4 Cards

4px radius, subtle shadows, light gray (#e0e4e9) borders in some cases.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-slate-gray: #5b636a;
  --color-dark-gray: #232a31;
  --color-link-blue: #324fe1;
  --color-medium-gray: #6e7780;
  --color-white: #ffffff;
  --color-light-gray: #e0e4e9;
  --color-att-blue: #0057b8;
  --color-mail-purple: #6001d2;
  --color-rogers-red: #c41522;
  --color-frontier-red: #c41230;
  --color-finance-purple: #7D2EFF;
  --color-badge-bg: #dcf7f2;
  --color-badge-text: #037b66;
  --color-badge-border: #7fcec0;
  --color-highlight-hover: #5015b0;
  --color-search-hover: #5409b2;
  --color-profile-status-bg: rgba(91,99,106,0.1);
  --color-profile-character-bg: rgb(248,244,255);
  --color-sports-dropdown-bg: #ecf8ff;
  --color-unread-bg: rgba(96,1,210,0.05);

  /* Typography */
  --font-yahoo-sans-vf: "YahooSans VF", "Helvetica Neue", Helvetica, Arial;
  --font-yahoo-product-sans: "Yahoo Product Sans", "YahooSans VF", "YahooSans", "Yahoo Sans", "Helvetica Neue", Helvetica, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;

  /* Border Radius */
  --radius-0: 0px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-100: 100px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.05) 0px 0px 2px 0px, rgba(0,0,0,0.2) 0px 4px 16px 0px;
}

8. AI Coding Assistant Prompt

# AT&T (Currently) Design System Specification

You are an AT&T design expert. Build UIs matching their visual language exactly.

## Brand Context
AT&T's "Currently" portal blends AT&T's corporate blue with Yahoo's UI framework. It's dense, functional, and content-first. The design uses a cool-toned palette, sans-serif typography, and an 8px spacing grid. Depth is minimal; focus is on clarity and high-frequency usability.

## Color Palette
- Black: #000000 — primary text, icons
- Slate Gray: #5b636a — secondary text
- Dark Gray: #232a31 — headers, footers, body text
- Link Blue: #324fe1 — default links
- Medium Gray: #6e7780 — borders, muted text
- White: #ffffff — backgrounds, text on dark
- Light Gray: #e0e4e9 — inputs, light surfaces
- AT&T Blue: #0057b8 — primary buttons, active links
- Mail Purple: #6001d2 — mail accents
- Rogers Red: #c41522 — partner branding
- Frontier Red: #c41230 — partner branding
- Finance Purple: #7D2EFF — finance logos
- Badge BG: #dcf7f2 — badge background
- Badge Text: #037b66 — badge text
- Badge Border: #7fcec0 — badge border
- Highlight Hover: #5015b0 — mail hover
- Search Hover: #5409b2 — search hover
- Profile Status BG: rgba(91,99,106,0.1) — account status
- Profile Character BG: rgb(248,244,255) — profile character
- Sports Dropdown BG: #ecf8ff — sports dropdown focus
- Unread BG: rgba(96,1,210,0.05) — unread mail highlight

## Typography
- Headings: "YahooSans VF", Helvetica Neue, Helvetica, Arial
- Links/Captions: "Yahoo Product Sans", YahooSans VF, YahooSans, Yahoo Sans, Helvetica Neue, Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 26px | 700 | 1.30 | Page titles |
| Link-lg | 20px | 600 | 1.20 | Nav links |
| H2 | 18px | 700 | 1.33 | Section headings |
| Link-md | 18px | 700 | 1.33 | Prominent links |
| Body | 16px | 400 | — | Body text |
| ... | ... | ... | ... | ...

## Spacing & Grid
Base: 8px. Scale: 1, 2, 4, 5, 6, 7, 8, 9, 10, 12, 14, 15, 16, 18, 20, 24, 30, 40px.
Use multiples for all padding/margin. Example: button horizontal padding 24px, card padding 20px.

## Border Radius
- none: 0px — flat elements
- sm: 4px — cards, small containers
- md: 8px — buttons, inputs
- lg: 20px — pills
- full: 100px — search fields, pill buttons

## Shadows & Depth
- Soft card shadow: rgba(0,0,0,0.05) 0px 0px 2px, rgba(0,0,0,0.2) 0px 4px 16px
Minimal depth; avoid heavy shadows.

## Component Specifications

### Primary Button
Default: bg #f0f3f5; color #232a31; padding 0 145px 0 24px; radius 100px; border none.
Hover: bg transparent; no shadow.
Active: opacity 0.4.
Focus: box-shadow rgba(82,168,236,0.6) 0 0 8px; outline none.

### Secondary Button
Default: bg #0057b8; color #000000; padding 1px 6px; radius 20px.
Hover: bg transparent; shadow var(--yb-elevation3-box-shadow).
Active: bg #0e5ee6; color #ffffff; opacity 0.5.
Focus: bg #1e1e1e; color var(--yb-text-hover-color).

### Navigation Links
Default: color #324fe1; text-decoration none.
Hover: underline; color var(--yb-text-primary).

### Input Fields
Search: bg #f0f3f5; color #232a31; radius 100px; padding 0 145px 0 24px.
Focus: border-color var(--yb-dirty-seagull); box-shadow rgba(82,168,236,0.6) 0 0 8px.

### Cards
bg #ffffff; radius 4px; padding multiple of 8px; shadow soft.

## Layout & Responsive Rules
Max content width ~1440px; page padding 20px mobile / 40px desktop; grid gaps multiples of 8px.
Breakpoints: from 320px to 2100px.

## Interaction Rules
State changes: 150ms ease; focus indicators visible; hover states subtle.

## DO List
- Use only defined palette colors.
- Maintain 8px grid.
- Use YahooSans VF for headings, Yahoo Product Sans for links.
- Keep shadows subtle.
- Use full-radius pills for search fields.

## DON'T List
- Don't introduce new colors.
- Don't mix sharp and rounded corners in same component.
- Don't use heavy drop shadows.
- Don't reduce contrast below WCAG AA.

## Code Examples

Primary Button (CSS):
```css
.btn-primary {
  background: #f0f3f5;
  color: #232a31;
  padding: 0 145px 0 24px;
  border-radius: 100px;
  border: none;
  font-size: 16px;
  font-weight: 400;
}
.btn-primary:hover { background: transparent; }
.btn-primary:focus { box-shadow: rgba(82,168,236,0.6) 0 0 8px; outline: none; }
.btn-primary:active { opacity: 0.4; }
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.05) 0px 0px 2px, rgba(0,0,0,0.2) 0px 4px 16px;
}
```

Input:
```css
.input-search {
  background: #f0f3f5;
  color: #232a31;
  border: none;
  border-radius: 100px;
  padding: 0 145px 0 24px;
}
.input-search:focus {
  border-color: var(--yb-dirty-seagull);
  box-shadow: rgba(82,168,236,0.6) 0 0 8px;
}
```

9. Summary

TL;DR — AT&T’s “Currently” site is Yahoo’s UI dressed in AT&T blue. Cool tones, functional sans-serif typography, an 8px grid, and pill-shaped search inputs define the look. Depth is minimal; clarity wins.

Brand Keywords:

• cool-functional
• content-first
• yahoo-infused
• pill-radius
• blue-accent