AT&T Design System

AT&T's marketing site is defined by a two-blue split: deep navy (#00388f) carries the load-bearing brand surface — every primary CTA button, every active state, every "Shop now" pill — while sky blue (#009fdb) handles expressive moments, most notably the hero headline "Great connections start here" rendered at 48px in sky blue on a white ground. The rest of the page is dark charcoal (#1d2329) on white, with hairline-bordered cards and a remarkably sparse use of color for a consumer carrier at this scale. Where Verizon is achromatic with a neon accent and T-Mobile is saturated magenta, AT&T commits to two blues and lets them divide typographic and interactive labor.

This DESIGN.md file captures 15 color tokens from the system, covering the two-blue primary tier, the charcoal ink ladder (dark charcoal, mid-charcoal, and muted-gray), white canvas and tinted-canvas surfaces, and two shadow tones. Fourteen typography tokens span font-bold and font-regular (AT&T's proprietary families) at sizes from 48px display down to 12px caption, all with the negative letter-spacing AT&T applies at scale. Thirteen components cover the navy pill button, the sky-blue hero heading, hairline-bordered service cards, the deep-dark promotional callout panel, and the white text input with 8px corner radius.

Feed this file to Claude or Cursor and it will reproduce AT&T's disciplined moves: navy-fill pill CTAs instead of colored-canvas heroes, sky-blue reserved for hero headline emphasis only, tight-tracked font-bold at every heading tier, and a card grid that uses 1px cool-gray hairlines for separation without any surface color. The two-blue structure is the system's teaching: color contrast can carry typographic hierarchy without requiring a third accent.