ServiceNow: Brand 2.0/Arc EXT Design System
ServiceNow’s customer-facing sites were split across five visual brands, seven backend component systems, and a patchwork of design libraries. I led Arc EXT, a Brand 2.0 design system that created a single token-driven foundation and Tier-1 component set that could span 12 sites. This case study covers how I defined the token and variables architecture, built the Figma foundations, and partnered with internal teams and an agency to ship the first 25 components on the new system.
Overview
ServiceNow’s customer-facing ecosystem had turned into a maze of overlapping systems: different brands, different libraries, and different component stacks for each portal.
Our goal was to consolidate 12 different sites, 5 brand generations, and 7 backend component systems into a single, user-friendly experience.
I led the UX and design-systems side of Arc EXT, a new design system that extends the existing Arc system with:
A full token architecture
A semantic token layer
A Figma variables library (including theming modes)
Arc EXT became the foundation for rolling out Brand 2.0 consistently across portals and making future brand / theme changes token-driven instead of one-off restyles.
Problem
Each major portal (DevPortal, SNU, MyNow, and others) had evolved its own interpretation of “ServiceNow UI”:
Multiple visual dialects across five brand generations
Inconsistent usage of Arc vs. local component systems
Tokens defined differently (or not at all) between design and code
Theming and accessibility handled per-screen, not systematically
This made global changes:
Slow (every portal needed its own work)
Risky (hard to predict side effects)
Expensive (duplicate efforts across teams)
Brand 2.0 needed a single design system that could:
Sit above 7 backend component systems
Safely serve 12 sites
Align with engineering’s now-arc token work and be robust enough that agencies and internal teams could build on it without fragmenting it again.
Process
Discovery across properties: I met individually with Staff Designers for each major portal to walk through real flows and Figma files, ran a visual audit of color, type, spacing, elevation, and radius across portals, and built a cross-system component inventory. From that work we defined a Tier-1 set of roughly 25 high-traffic components (buttons, form controls, alerts, tags, cards, navigation, etc.) that appeared everywhere and became the first wave to redesign and wire to tokens.
From spreadsheet to token system: Engineering shared a large “foundational tokens” spreadsheet using now-arc names, with known issues in the values. I grouped the tokens into clear domains (Color, Type, Space, Radius, Elevation, Layout, Data Viz) and designed a layered token model with primitives (raw values like Wasabi Green, Infinite Blue, neutrals, status colors, SNU colors, data-viz palettes), semantic tokens (text, backgrounds, borders, states, links, focus rings), and only a small number of component-level hooks where absolutely necessary. I captured all of this in a Foundations Figma file that rendered color ramps, type scales, and spacing visually so we could spot contrast problems and scale gaps before anything was codified.
Arc EXT variables in Figma: Once the architecture was stable, I implemented it as Figma variables in a new Arc EXT foundations file. I created a primitives collection (around 268 variables for base colors, core brand colors, neutrals, brand greens and blues, SNU colors, supplementary colors, and roughly 130 data-viz values) and a semantics collection (50+ variables for text, backgrounds, borders and dividers, links, and status surfaces across states). I also set up Base, Light, and Dark modes so the system was theme-ready and aligned with the broader platform theming model. Internally I framed “mapping” very simply: linking tokens across layers (foundation → semantic → component) so a single change can safely ripple through components and portals.
Component foundations and collaboration: With the variable foundations in place, we moved into components. I defined the component anatomy for each Tier-1 pattern so everyone was clear which parts must be token-driven (background, text, icon, border, focus ring, spacing, radius) and then managed both Instrument (our agency partner) and in-house designers to deliver the first wave of Arc EXT components. I reviewed their work for correct use of primitives and semantic tokens, complete state coverage (default, hover, active, focus, disabled, destructive, success, warning), responsive behavior across breakpoints, and accessibility and contrast compliance. By the time I rolled off, the first 25 priority components were designed and built on top of the Arc EXT variable foundations I created, proving that the architecture held up in real, cross-portal components.
Roadmap, governance, and handoff: From the beginning I framed Arc EXT as a multi-phase program and created a roadmap the org could rally around: Foundation (stand up token architecture and variable foundations, design Tier-1 components and validate them in at least one flagship experience), Alignment (expand to a larger core set of components, consolidate divergent patterns across the twelve sites, and establish governance for ownership, intake, change control, versioning, and documentation), and Integration (roll Arc EXT into key properties like SNU, DevPortal, and MyNow, using real flows as adoption and quality gates). I also set expectations for documentation and change management: Figma as the working library, ZeroHeight as the source of truth, and future brand or theme tweaks made through tokens instead of ad-hoc overrides.
My Role
Led the UX and design-systems side of Arc EXT from the very beginning, with the explicit goal of setting up a program that others could scale after I left.
Created and socialized the roadmap and timeline, aligning design, engineering, and PM around phased milestones and adoption goals.
Led cross-portal discovery through designer walkthroughs, visual audits, and a system-wide component inventory.
Designed the token and variable architecture, translating engineering’s spreadsheet into a primitives-plus-semantics model that matched code, and built the Arc EXT foundations file in Figma with Base, Light, and Dark modes.
Managed both Instrument and in-house designers, defined component anatomy for the Tier-1 set, and reviewed all work for token usage, interaction states, responsiveness, and accessibility.
By the time I rolled off, the foundations, first 25 components, and the program roadmap and governance model were all in place, and the team was equipped to continue scaling Arc EXT across the rest of the ecosystem.
Impact
When I transitioned off the project, the Arc EXT variable foundations file (primitives, semantics, modes) was complete and adopted as the base for future work.
The first 25 high-priority components had been designed and built on that foundation under my direction, demonstrating that the token and variables architecture worked in production-quality components rather than just in theory.
The roadmap, governance model, and timelines I created were in place to guide subsequent phases of component expansion and property migration.
Longer term, this work enabled a single shared token system that can span twelve sites, five brand generations, and seven backend component systems, a theme-ready variable architecture so brand and theme changes are made through tokens instead of manual restyling, and a coherent Tier-1 component layer that behaves consistently across portals and is easier to extend.
