---
version: alpha
name: "AT&T"
website: "https://www.att.com"
description: >-
  A wireless and internet carrier that runs a two-blue system — AT&T's heritage deep navy (#00388f) fills primary CTAs
  and card tints while a sky-blue accent (#009fdb) carries the hero headline text and inline link highlights — on a
  predominantly dark-charcoal-and-white canvas, with AT&T's proprietary font-bold and font-regular sans-serif families
  at tight negative letter-spacing across every display tier. Primary buttons are 28px fully-rounded pills in navy fill;
  hero display sits at 48px / font-bold with -1.44px tracking; the system omits any third accent color entirely,
  making AT&T one of the few major telecom brands whose marketing chrome runs on exactly two blues and no tertiary voltage.

seo:
  title: "AT&T Design System for React — deep navy, AT&T sky blue, 28px pill buttons, 14 components"
  metaDescription: "AT&T's marketing-site design system as DESIGN.md. Deep navy #00388f CTAs, sky-blue hero headline, tight negative tracking on display type, 15 color tokens. For React, Next.js, and AI tools."
  highlights:
    - "Two-blue system — navy #00388f carries all primary CTAs while sky blue #009fdb carries hero headline text; no tertiary voltage exists"
    - "Display in navy-on-white, not on a tinted canvas — the hero headline floats sky-blue on a white background, inverting the telco-tinted-hero convention"
    - "28px pill buttons — the CTA geometry is fully rounded but at 48px height with 32px horizontal padding, making it more substantial than the typical 36px pill"
    - "Tight negative tracking on bold — font-bold runs at -1.44px tracking at 48px display, -0.78px at 26px sub-headings; the tracking tightens at scale"
    - "Dark-charcoal ink (#1d2329) — not pure black; a slightly blue-tinted near-black that echoes the navy system and softens the page"
  tags:
    - "Consumer Electronics"
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.att.com"
      title: "AT&T — official site"
      description: "AT&T's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is AT&T's primary brand color?"
      answer: "AT&T's primary brand color is deep navy (#00388f), appearing 32 times in the captured page — 15 as background fills on primary buttons, 15 as borders, and 2 as text. It is wired directly to the primary CTA button (the 'Shop now' pill in the hero) and to active-state card fills. The sky blue (#009fdb) is the expressive accent rather than the load-bearing primary: it appears only 3 times, most notably as the hero headline color. The navy is the button color; the sky blue is the attention color. Most AT&T design references treat them as equals, but the frequency split — 32 vs. 3 — tells the real story."
    - id: "typography"
      title: "What typeface does AT&T use, and what should I use as a substitute?"
      answer: "AT&T's marketing site runs two proprietary font-faces loaded as 'font-bold' and 'font-regular'. Both load as weight 400 in the CSS (the font file itself contains the bold metrics), but 'font-bold' produces visually-bold text while 'font-regular' produces regular weight. Display headlines (48px) run font-bold with -1.44px letter-spacing; sub-headings (26px) run font-bold at -0.78px; body copy (15-18px) runs font-regular at 0 or -0.48px tracking. The closest open-source substitute is Inter at the matched size — use Inter 700 to approximate font-bold and Inter 400 for font-regular. Preserve the negative tracking values exactly: they are the system's most distinctive typographic move."
    - id: "button-style"
      title: "What does AT&T's primary button look like?"
      answer: "The primary CTA ('Shop now') is a 48px-height fully-rounded pill at 28px border-radius, filled with deep navy (#00388f), white text in font-bold at 14px / 400 (the CSS weight is 400 but the font file provides bold metrics), and a 32px horizontal padding with 0 vertical padding — the height is set explicitly at 48px rather than via padding. The border is navy-colored (matching the fill). Secondary buttons and outline variants follow the same 28px-radius pill geometry with different fills. There is no square or rectangular button in the captured system."
    - id: "card-grid"
      title: "How does AT&T structure its product card grid?"
      answer: "The below-fold product grid runs cards with 16px border-radius, 1px cool-gray hairline borders (#dcdfe3 as shadow color for lifted-card depth), 24px internal padding with 8px top and bottom spacing. The hero carousel shows 2-up device panels on desktop with dot-navigation below. The 'Explore more of AT&T' icon grid uses 6-column layout with icon-plus-label cells. The promotional callout band ('Get AT&T unlimited starting at $30/mo.') is a full-bleed dark-navy section (#002837) with white text and an orange accent image."
    - id: "dark-panel"
      title: "What is the dark promotional panel color?"
      answer: "The dark 'Get AT&T unlimited' promotional section uses a very deep blue-tinted navy (#002837) as its background — classified as a brand-layer color with 2 background occurrences. This is not pure black and not the primary navy; it is a deeper, darker ink that functions as an editorial night-mode band within the otherwise light-canvas page. White text on this surface at large display sizes (font-bold 26-34px) reads as the most editorial moment on the page. The color appears only in this one promotional band, making it a scoped brand surface rather than a system-wide token."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#00388f"
  primary-dark: "#002837"
  accent-sky: "#009fdb"
  ink: "#1d2329"
  ink-soft: "#454b52"
  ink-muted: "#686e74"
  ink-light: "#878c94"
  canvas: "#ffffff"
  surface-tinted: "#f3f4f6"
  hairline: "#dcdfe3"
  hairline-light: "#bdc2c7"
  mid-blue: "#0072b2"
  link-blue: "#0057b8"
  shadow: "#25303a"

typography:
  display-xl:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 55.2px
    letterSpacing: "-1.44px"
  display-lg:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 39.1px
    letterSpacing: "-1.02px"
  heading-md:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 29.9px
    letterSpacing: "-0.78px"
  heading-sm:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 23px
    letterSpacing: "-0.6px"
  heading-xs:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0
  body-lg:
    fontFamily: "\"font-regular\", sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: 0
  body-md:
    fontFamily: "\"font-regular\", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"font-regular\", sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18.4px
    letterSpacing: "-0.48px"
  button-md:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"font-bold\", sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  caption:
    fontFamily: "\"font-regular\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0
  caption-tight:
    fontFamily: "\"font-regular\", sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: "-0.3px"

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  xl: "32px"
  pill: "28px"
  full: "100%"

spacing:
  xs: "4px"
  sm: "8px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 32px"
    height: "48px"
    border: "1px solid {colors.primary}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "0px 32px"
    height: "48px"
    border: "1px solid {colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "16px 24px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "8px 16px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.accent-sky}"
    typography: "{typography.display-xl}"
    padding: "0"
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "48px 32px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
    border: "1px solid {colors.hairline}"
  card-dark:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.none}"
    padding: "48px 32px"
  category-icon-cell:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    padding: "16px 8px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "0px 24px 0px 16px"
    height: "48px"
    border: "1px solid {colors.ink-muted}"
  legal-caption:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.caption-tight}"
    padding: "0"
  platform-badge:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
    border: "1px solid {colors.hairline}"
---

## Overview

AT&T's marketing site runs on a two-blue hierarchy — not a gradient, not a spectrum, but a disciplined split. **Two-blue authority:** deep navy (#00388f) fills every primary CTA button and active card state while sky blue (#009fdb) carries a single expressive role — the hero headline "Great connections start here" in the above-fold panel. The two blues never compete because they never occupy the same visual layer: navy is always an interactive fill and sky blue is always a display-text accent. Where Verizon runs achromatic with a neon deal badge and T-Mobile saturates the hero canvas in magenta, AT&T positions brand color in the button, not the background.

The display type is defined by tight negative tracking: font-bold at 48px sits at -1.44px letter-spacing, pulling the headline characters close without condensing the individual letterforms. This is the system's typographic fingerprint. Smaller headings scale the tracking back in proportion — 26px at -0.78px, 20px at -0.6px — creating a tracking ladder that reads as a coherent system rather than an arbitrary choice. Inter at weight 700 with matched tracking values is the closest open-source analog.

The page canvas is white, and the card grid uses 1px shadow-cast hairlines (#dcdfe3) for separation — no surface color, no depth tinting. The one exception is the full-bleed dark-navy promotional panel (#002837 background) used for the "Get AT&T unlimited" subscription offer, where white text at large display size creates the page's editorial moment.

**Key Characteristics:**
- Dark charcoal ink (#1d2329) — not pure black; a slightly blue-tinted near-black with 1348 total occurrences (680 text, 665 border).
- Sky-blue (#009fdb) hero headline — appears 3 times total, all in the above-fold display tier; no other surface uses this value.
- Deep-navy (#00388f) fills all 15 of the captured primary button backgrounds — consistent, no hover-override visible in the captured surface.
- 28px pill radius on all CTAs — fully rounded at the button height but not styled as a 9999px semantic pill.
- Tight negative tracking cascade: -1.44px at 48px → -1.02px at 34px → -0.78px at 26px.
- Two proprietary font families (font-bold, font-regular), both loaded at CSS weight 400.
- 16px border-radius on product and service cards with 1px cool-gray hairline borders.
- Dark-navy deep panel (#002837) used as the sole full-bleed non-white section — 2 background occurrences.

## Colors

### Brand

- **Primary Navy** (`{colors.primary}` — #00388f): frequency 32. Used as background (15), border (15), text (2). The CTA fill — every "Shop now" pill button, every active-state badge. Wired as a brand-layer color with no CSS custom properties exposed in the captured page.
- **Primary Dark** (`{colors.primary-dark}` — #002837): frequency 2. Used as background only — the deep promotional band. A deeper, colder navy distinct from the primary CTA blue. Brand layer.
- **Sky Accent** (`{colors.accent-sky}` — #009fdb): frequency 3. Used as text (1), background (1), border (1). The hero headline color and inline-link accent. Brand layer.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 95. Used as text (38), background (30), border (25). Page floor, button text, card surfaces.
- **Surface Tinted** (`{colors.surface-tinted}` — #f3f4f6): frequency 13, all as background. Light background fills for icon-cell rows and alternate-stripe sections.

### Text

- **Ink** (`{colors.ink}` — #1d2329): frequency 1348. Used as text (680), border (665), shadow (3). The dominant text and border color — a dark blue-charcoal rather than pure black. 665 border occurrences means it carries the card-hairline system as well as text.
- **Ink Soft** (`{colors.ink-soft}` — #454b52): frequency 120. Used as text (60) and border (60). Secondary running text — body copy within cards and promotional descriptions.
- **Ink Muted** (`{colors.ink-muted}` — #686e74): frequency 1 text, 1 border. Form input border color in resting state.
- **Ink Light** (`{colors.ink-light}` — #878c94): frequency 2. Caption and secondary metadata text.

### Hairline

- **Hairline** (`{colors.hairline}` — #dcdfe3): frequency 7, all as shadow. The card-elevation shadow tone — used as box-shadow rather than border, giving cards a 1px cast appearance without a hard border line.
- **Hairline Light** (`{colors.hairline-light}` — #bdc2c7): frequency 1 border. Used on less prominent dividers.

### Supporting

- **Mid Blue** (`{colors.mid-blue}` — #0072b2): frequency 85. Used as text (42) and border (43). Link text color for inline body links and icon-category labels. A mid-register blue between the navy CTA and the sky-blue accent.
- **Link Blue** (`{colors.link-blue}` — #0057b8): frequency 2. Occasional inline link variant.

## Typography

### Font Families

AT&T's system loads exactly two proprietary families: **font-bold** for every heading, sub-heading, button label, nav link, and emphasized body element; **font-regular** for body copy, legal captions, and secondary text. Both files are loaded at CSS `font-weight: 400` — the weight is embedded in the font file itself rather than controlled by the CSS weight property. This is not standard CSS behavior; it means that `font-weight: 700` does NOT produce the intended bold on a substituted font. When substituting, use Inter at CSS weight 700 for font-bold contexts and Inter at weight 400 for font-regular.

The negative letter-spacing is the system's defining move. AT&T applies tighter tracking than any other telco brand in this directory — -1.44px at 48px is more aggressive than Cloudflare's -1.4px at 56px.

### Hierarchy

| Token | Family | Size | Weight | Tracking | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | font-bold | 48px | 400 | -1.44px | Hero h2 ("Great connections start here") |
| `{typography.display-lg}` | font-bold | 34px | 400 | -1.02px | Section h3 display |
| `{typography.heading-md}` | font-bold | 26px | 400 | -0.78px | Card and feature headings |
| `{typography.heading-sm}` | font-bold | 20px | 400 | -0.6px | Sub-section titles |
| `{typography.heading-xs}` | font-bold | 18px | 400 | 0 | Feature-item headings |
| `{typography.body-lg}` | font-regular | 18px | 400 | 0 | Section lead copy |
| `{typography.body-md}` | font-regular | 15px | 400 | 0 | Default running text |
| `{typography.body-sm}` | font-regular | 16px | 400 | -0.48px | Body with controlled tracking |
| `{typography.button-md}` | font-bold | 14px | 400 | 0 | CTA button label |
| `{typography.nav-link}` | font-bold | 15px | 400 | 0 | Top-nav link labels |
| `{typography.caption}` | font-regular | 12px | 400 | 0 | Caption rows |
| `{typography.caption-tight}` | font-regular | 12px | 400 | -0.3px | Legal disclaimer captions |

### Substitutes

Use **Inter 700** for font-bold contexts (apply negative tracking exactly as specified) and **Inter 400** for font-regular. The -1.44px tracking at 48px is the most important single value to preserve.

## Layout

- **Base unit:** 16px dominant (67 occurrences). Secondary values: 8px (14), 24px (13), 32px (5).
- **Card padding:** 24px internal top, 8px bottom (matching the 24×8px vertical rhythm captured in 31 occurrences of the compound spacing token).
- **Hero section:** white canvas, full-width headline at 48px sky-blue text, below which a 2-up device-panel carousel fills the horizontal.
- **Icon grid ("Explore more of AT&T"):** 6-column with 16px-radius circular icon frames and 12px caption beneath each icon.
- **Dark promo band:** full-bleed dark-navy (#002837) with centered heading at 34px font-bold and a pill CTA in navy.

## Elevation

The system uses shadow-cast elevation rather than border-only cards. The 7 occurrences of `#dcdfe3` are all as shadow fills — used as `box-shadow` with small x/y offsets to create a lifted-card appearance. The `#25303a` shadow (3 occurrences) adds a darker second-layer shadow depth to select promo cards. There are no hard 1px black hairline borders in the AT&T card system; the elevation comes from soft shadow casting, distinguishing it from Verizon's hard-edge card treatment.

## Shapes

The radius scale is modest-to-pill with no extreme values between:

- `{rounded.none}` 0px — hero section, full-bleed bands.
- `{rounded.sm}` 4px — smallest UI surfaces (1 occurrence).
- `{rounded.md}` 8px — form inputs, toggle controls (1 occurrence each).
- `{rounded.lg}` 16px — product and service cards (22 occurrences), the dominant radius.
- `{rounded.xl}` 32px — large feature tile (1 occurrence).
- `{rounded.pill}` 28px — all CTA buttons (22 occurrences), the dominant UI-interactive radius.
- `{rounded.full}` 100% — avatar circles, icon-frame circles (16 occurrences).

## Components

**`button-primary`** — Deep-navy (#00388f) fill, white text in font-bold at 14px, 28px-radius pill, 0×32px padding, 48px height. The "Shop now" canonical instance.

**`button-secondary`** — White fill, navy text, navy border, same pill geometry. Used for secondary and outline actions alongside primary CTAs.

**`top-nav`** — White canvas, charcoal ink text, 64px height, AT&T globe wordmark left-aligned. Contains "TV," "Internet," "Wireless" and account/cart icons right-aligned.

**`nav-link`** — Transparent background, ink text in font-bold at 15px / 400, 8×16px padding. No hover fill visible in the captured surface.

**`hero-heading`** — Sky-blue (#009fdb) text at font-bold 48px / -1.44px tracking. The one expressive color moment in the marketing chrome — appearing on a white canvas ground, not a tinted canvas.

**`hero-section`** — White canvas, 48×32px padding around the centered hero headline + CTA stack.

**`section-heading`** — Dark-charcoal ink text at font-bold 26px / -0.78px tracking. Used for "Explore more of AT&T," "Let's get you connected," and other section titles.

**`body-paragraph`** — Ink-soft (#454b52) text at font-regular 15px / 0 tracking. Secondary body copy within product sections.

**`card`** — White surface, charcoal ink text, 16px corner radius, 1px cool-gray shadow-cast, 24px internal padding. Product and service offering cards.

**`card-dark`** — Deep-navy (#002837) fill, white text at font-bold display sizes. The full-bleed unlimited-plan promotional section.

**`category-icon-cell`** — Transparent background, icon + caption layout, 16×8px padding. Used in the "Explore more" 6-up icon grid (TV, Internet, Wireless, etc.).

**`text-input`** — White surface, charcoal ink text at font-regular 16px / -0.48px, 8px border-radius, 0×24px left/right / 0×16px padding compound, 48px height, 1px ink-muted border.

**`legal-caption`** — Ink-soft text at font-regular 12px / -0.3px. Pricing-plan disclaimer text beneath promotional CTAs.

**`platform-badge`** — White fill, ink text, 28px-radius pill, 8×16px padding, 1px hairline border. Service-tier label chips (e.g., "AT&T Business").

## Do's and Don'ts

**Do** render the hero headline in sky blue (#009fdb) on a white canvas — not on a navy or tinted-canvas background. The system places the expressive accent color against maximum contrast; rendering it on a colored surface reduces both legibility and brand impact.

**Do** apply the negative tracking cascade exactly. The -1.44px tracking at 48px is not decorative; it is the system's most specific typographic move. Substituting a less tight value (e.g., -0.5px) at 48px display produces a markedly different visual rhythm.

**Do** use `{colors.mid-blue}` (#0072b2) for inline body links. This is distinct from both the navy CTA (#00388f) and the sky-blue accent (#009fdb) — using either of those two for inline links blurs the color hierarchy.

**Don't** fill any heading or display text with the primary navy (#00388f). The navy is an interactive surface color; placing it on static display text blurs the button-versus-content distinction. Sky blue (#009fdb) is the correct hero-headline accent.

**Don't** use `{colors.ink}` (#1d2329) for form input borders. The input resting border is `{colors.ink-muted}` (#686e74) — using the full-weight charcoal ink on inputs creates too much visual weight against the card-shadow system.

**Don't** add a third accent color. The two-blue architecture (navy CTA + sky-blue headline) is the system's deliberate constraint. Introducing an orange, green, or red accent in the marketing chrome reads as a sub-brand divergence, not a brand extension.

**Don't** use `{rounded.xl}` (32px) on standard product cards. The 16px radius is the card convention; 32px reads as a promo-tile or pill that breaks the grid rhythm. One occurrence at 32px was captured — it belongs to a single featured promotional tile, not to the repeating grid.

## Known Gaps

- **Hover and focus states:** the captured primary button shows only the resting state; hover fill changes and focus-ring dimensions are not exposed on the static marketing page.
- **Dark mode:** the page is light-only in the captured surface. The `#002837` deep-navy band is a dark section within a light page, not a system-wide dark mode.
- **Carousel pagination:** the hero device-panel carousel uses dot-indicators for navigation; the active-dot fill color is not captured in the static extraction.
- **Motion:** the hero carousel auto-advances; timing curves and transition duration are not captured.
- **AT&T Business and FirstNet sub-sites** carry their own token sets not present in the consumer marketing surface extraction.
- **Icon system:** AT&T uses a custom icon font for the category icons (TV, Internet, Wireless, Mobile Security); these are not captured as SVG tokens.