AT&T BusinessEnterprise Design systemShippedCase study

300+ components, from XD to Figma. AT&T Business’s design system, rebuilt for a team new to Figma.

AT&T Business’s design system lived in Adobe XD, with no responsive behavior and no guidance on using it. I rebuilt it in Figma as three libraries, with a guide for the designers building with it.

Role
Product Designer
Company
AT&T Business, via CGI
Year
2023
Scope
Design system migration
The typography page The color page The accessibility page The buttons page The file status page

300+styles & components

3libraries

37documented pages

01 · Architecture

One foundation, two stacks.

The team shipped on two platforms: AEM for wireline and marketing pages, Azure for wireless. So the system became a shared foundation with a component library for each.

8Global StylesTypeColorGridSpacingIconsButtonsAccessibility
16AEM · wireline & marketingMarqueesTeasersComparison tablesAccordionsTabsLegal
13Azure · wirelessInputsModalsDevice listCartCheckoutPlans
Pages per library
02 · Foundations

Every value comes with a rule for using it.

Type, color, grid, spacing, icons and buttons each got a page that says when to use a value, not just what it is.

The typography page: a responsive type scale
Type
The color page: primary, functional, secondary and interface palettes
Color
The grid page: column overlays at three breakpoints
Grid
The spacing page: heading and section padding per breakpoint
Spacing
The iconography page: the functional icon library
Icons
The buttons page: styles by breakpoint by state
Buttons
03 · Accessibility

Contrast decided before anyone opens a file.

Every brand color is rated against every background it can sit on, for small and large text. Designers pick from a list instead of running a checker.

The accessibility page: contrast charts for text on white, on five background colors and on six secondary colors, then rules for icons
Use at any size · large text only · do not use
04 · The guide

A guide built inside Figma, for designers new to it.

Much of the team hadn’t used Figma. The guide builds a component in seven steps, with live components you can edit on the page that teaches you.

The first part of the guide: finished state, auto layout, breaking a component down, and variants
Anatomy
The middle of the guide: properties and a component to test them on
Properties
The end of the guide: breakpoint behavior and testing the finished component
Breakpoints
05 · Governance

Every page says what changed this sprint.

Revision history, status stickers and an “Edited this sprint” tag keep the file current, so the team trusts it without checking with whoever made it.

The file status page: a revision history table, milestone and status stickers, content flags, and edited this sprint tags
The file status page
06 · Outcome

Published, and filled in from live pages.

We audited live pages for components teams used but the system lacked, and built them in.

One was the mobile plan comparison table, which turned into its own project.

The full design system canvas: three horizontal bands of documentation pages for Global Styles, Azure and AEM

300+styles & components, published across three libraries