Skip to content
TIM HOSE
Back to work

Whitepaper · Verizon · Foundations

Foundations

Five foundational problems I worked on inside Verizon’s design system: translating web foundations to native, scaling type accessibly, building a data-visualization palette, and specifying accessible interaction.

Scope
  • Design systems
  • iOS + Android + Web
  • Accessibility
  • Tokens

01Foundations · Elevation

Native drop shadow mapping

Web drop shadows don’t translate directly to iOS or Android, so I mapped ours to each platform and produced modified shadow tokens for both. iOS needed blur adjustments. Android was trickier, since the values also have to account for device density. The result is matching shadows across platforms, so a component shows consistent depth on either one.

One source shadow, three resolved tokens

Web

01 Source token

iOS

02 Blur adjusted

Android

03 Blur plus device density

Create later: annotated shadow token translation diagram with the real token values per platform

02Foundations · Type

Dynamic Type

There’s no one-size-fits-all way to handle dynamic type on iOS and Android when your base font sizes run far larger than the platforms expect. We mapped our Feature, Title, Body, and Micro styles to a version for each dynamic type size. Because some of our type runs so large, we also set a cutoff past which the native fonts stop scaling, so layouts don’t break at the extremes.

  • Feature
  • Title
  • Body
  • Micro
Cutoff

A type specimen: four sizes stepping up, a marked cutoff, then two further steps held at the same size.

Create later: specimen showing the real Feature, Title, Body and Micro values at each dynamic type step

03Color · Charting

Data-viz color selection

To build a data-visualization palette, we used Leonardo (created by the lead of Adobe’s Spectrum team) to expand our base colors into a working range that stays legible whether a chart has a few data points or many. From eleven tints and shades per base color, we selected five to anchor the palette, covering both analogous and diverse data sets.

11

tints and shades per base color

5

selected as anchors

The Verizon data-visualization palette: each base color expanded into eleven tints and shades, with five selected as anchors.

04Interaction · Specification

Keyboard interaction · Tiles

Customers navigate our tiles with a pointer, a keyboard, or swipe, so I worked with our accessibility team to map the focus and interaction behavior for each case. The states cover a tile that isn’t interactive, a tile that’s the only target, and tiles with their own clickable elements, including when a tile and its inner control share a destination or lead to different ones.

  1. 01A tile that isn't interactive
  2. 02A tile that's the only target
  3. 03A tile with its own clickable elements
  4. 04A tile and its control sharing a destination
  5. 05A tile and its control going different places
Specification board showing focus and interaction states for tiles across pointer, keyboard and swipe input.

05Color · Status

Notification colors, light and dark

Notification colors had to stay legible and on-brand on both light and dark surfaces. The before-and-after shows the adjusted treatment for each status, so each one reads clearly on either surface.

On light

Notification status colors on a light surface, before and after adjustment.

On dark

Notification status colors on a dark surface, before and after adjustment.

End of whitepaper

Five problems under the components

Shadows, type scaling, color selection, interaction specs and status color. Getting them right is what lets the rest of the system hold together.

PRODUCTS · SYSTEMS · TOOLS · TEAMS

Let’s talk.

If you’re building something that needs thoughtful design and strong foundations, I’d love to hear about it.