Case study · 2026

Zions Capital
Markets

Created for Zions Bancorporation, N.A.

A design system and production front end, handed off so Zions' own team could run it inside Adobe Experience Manager.

Launched
August 2026
Scope
Design system and production front end
Role
Design engineering, from Figma to production code
Built with
Semantic HTML, BEM CSS, and a few small scripts
The Zions Capital Markets homepage: a night sky over red rock, the headline “Tailored capital markets solutions,” and the Z-line motif crossing the hero.
Homepage, as deliveredCreated for Zions Bancorporation, N.A.
  • 259design tokens, published as CSS custom properties and JSON
  • 9production pages, built from shared components
  • 0framework or library dependencies
  • AAbuilt to WCAG 2.1 AA, with full rendering when JavaScript is off

The brief

A distinctive identity, with motion that could survive an enterprise pipeline.

The build had to hand off cleanly to Zions' own team, who would integrate it into Adobe Experience Manager. That meant no framework runtime, nothing a security scan would reject, and code their developers could maintain without us.

Design system

One system behind every page.

The style guide's palette: sixteen named color swatches, each with its token name and hex value.
Palette, from the style guide
The style guide's type roles: each role's class, font, size, and tracking above a live specimen.
Type roles, each with a live specimen

  1. Tokens

    259 design tokens for color, gradients, type, layout, and motion, published as CSS custom properties and JSON.

  2. Components

    Every section is one BEM component, instanced everywhere it appears. A variant may change the paint, never the structure.

  3. Scaling model

    One proportional unit per component. At design width it matches the comp pixel for pixel; in any other column it scales. Below 768px, a separately designed phone layout takes over.

  4. Style guide

    Palette, type roles, standards, live component specimens with markup contracts, behaviors, an authoring guide, and implementation notes, so the team can work without us.

Motion

The Z-line

The Z-line motif draws on first, then the headline and copy rise in. Below the fold, sections reveal and the line threads between them as you scroll, and the numbers count up.

It's native CSS, with scroll-driven animation and no animation library. Every motion respects reduced-motion settings, and with JavaScript off, every page still renders complete.

The Z-line's two hairlines leaving the homepage hero and crossing into the trust band below.
The Z-line, threading from the hero into the next band
The By the Numbers page: 320+, $95B+, 1,100+, and 152+ years, staggered along a vertical hairline.
By the numbers, with count-ups
The homepage on a phone: the same hero, reflowed into a single column.
The phone layout

Outcome

A system their team could extend on its own.

The client's team owned the result from day one. Their developers integrated the delivered components into Adobe Experience Manager, and the Z-line motif and component structure run on the live site today.

Back to the work

Contact

Let's fix your hex.

Book a 20-minute call, or send a short note about your team, your stack, and what's breaking. We reply within two business days. Then comes a written scope and price, then a start date.

Book a call