Case study · 2026

Zions Capital
Markets

Created for Zions Bancorporation, N.A., with GOTHS.

A design system and production front end, brought to life in code and handed off so Zions’ own team could run it.

Delivered: August 2026, through GOTHS
Scope: Responsive front end and a living component system
Role: Design engineering, front-end development, motion
Built with: Semantic HTML, CSS, and a few small scripts

01From design to experience

A sense of place. A considered pace.16s · 60 fps · Silent

The same idea, a different scaleMobile

Responsive pages, scroll-triggered motion and a living component system, delivered at a pace their team could keep.

Through GOTHS, I brought Zions Capital Markets’ designs to life in code, from the first responsive page to the component system their team integrates and publishes with.

Design engineering & implementation: Josh Butner / GOTHS. Visual design, brand & imagery: Zions Capital Markets and contributors.

Delivered reference ↗Published site ↗

02The system behind the site

Zions Capital Markets feature grid: four service descriptions set in Quinn Display and PF Grand Gothik, with fine underlines over the original cream gradient and geometric artwork.

Delivered component · Investment Banking

View the delivered HTML

<section class="zcm-c zcm-ci zcm-c-features zcm-c-features--cream" aria-label="What we do">
    <div class="zcm-c__decor" aria-hidden="true"><!-- full-canvas decoration slice - reference-only, see “Decoration slices” --></div>
    <div class="zcm-c__content">
      <h2 class="zf-vh">Our services</h2>
      <div class="zcm-c-features__grid">
        <div class="zcm-c-features__cell">
          <h3 class="zf-feature-title">Sell-side M&amp;A</h3>
          <p class="zf-feature-body zcm-c-features__body">Selling a business is a significant decision, driven by unique goals&mdash;whether its planning for retirement, de-risking your personal assets, or finding a strategic partner to fuel continued growth. We&rsquo;re here to guide you through the critical steps of this complex process. With a hands-on, focused approach, our team works to maximize value and find the right partner who will honor your legacy and culture.</p>
        </div>
        <div class="zcm-c-features__cell">
          <h3 class="zf-feature-title">Capital Raising</h3>
          <p class="zf-feature-body zcm-c-features__body">Debt, equity, or a hybrid solution, our team provides experienced advice on structuring and sourcing the most suitable capital for your strategic initiatives&mdash;acquisitions, recapitalizations, growth investments, and ownership transitions&mdash;to find an answer that aligns with your long-term objectives.</p>
        </div>
        <div class="zcm-c-features__cell">
          <h3 class="zf-feature-title">Buy-side M&amp;A</h3>
          <p class="zf-feature-body zcm-c-features__body">We partner with companies, private equity firms, and institutional investors to acquire businesses that fit their strategy. Leveraging our deep buy-side experience, we guide you through every step&mdash;from initial evaluation support to managing diligence and leading negotiations.</p>
        </div>
        <div class="zcm-c-features__cell">
          <h3 class="zf-feature-title">Strategic Advisory</h3>
          <p class="zf-feature-body zcm-c-features__body">Working alongside companies, investors, and boards, we help navigate long-term growth plans, capital needs, and M&amp;A strategy, providing the analysis and guidance to support strategic decisions.</p>
        </div>
      </div>
    </div>
  </section>

Built to be built upon.

The handoff included a living design system: reusable components, responsive behavior and embedded HTML examples. This is one of those components, with its original typography, artwork and motion intact.

Typography: Quinn / PF Grand Gothik
Component system: HTML / CSS / JavaScript

Explore the delivered guide