Pathfinder
Design System

AVANT Communications is a distributor of enterprise technology services — CCaaS, cloud, SD-WAN, UCaaS, security — and Pathfinder is the platform its network of Trusted Advisors lives in: researching technologies, running Intelligent Qualifying Assessments, building quotes, and managing deals from first conversation to signed contract. When I joined in 2021, the platform had grown faster than its design language. Screens built in different eras used different components, different blues, different spacing logic — and marketing was producing assets at high volume with no shared foundations.

In a tool where advisors make six-figure technology recommendations, that isn't cosmetic. Inconsistency reads as unreliability. An advisor comparing carrier quotes doesn't separate "this table looks off" from "can I trust these numbers in front of my client?" — visual coherence is part of the platform's credibility. The data density made it harder: dashboards, assessment builders, and quote tables all competing for hierarchy on dark, information-rich screens.

I started with an interface inventory: screenshotting every distinct screen state across the platform and every active marketing template, then clustering them by pattern. The audit made the fragmentation measurable instead of anecdotal — and gave the system a business case before a single component existed.

Principles only matter if they settle arguments. These four were written to be invoked in reviews — each one traceable back to an audit finding, each one specific enough to say "no" with.

Pathfinder's system is built on a three-tier token architecture: primitives (raw values), semantic tokens (intent — what a value means), and component tokens (where it applies). Engineers consume tokens, not hex codes; when the brand evolves, the system re-themes from the primitive layer without touching components.

Theming was the proof of the architecture. Pathfinder's product surfaces run dark — dense data reads better on dark ground, and advisors live in this tool all day — while marketing and enablement surfaces run light. Both resolve from the same semantic layer: surface.raised and text.heading map to different primitives per theme, and nothing downstream changes.

Every component shipped with documented anatomy, full state coverage, responsive behavior, and accessibility notes — built as Figma components with variables bound to the token tiers, and mirrored by engineering as coded equivalents. The rule: if a state isn't designed, it isn't done. Loading, error, empty, and disabled states were first-class, not afterthoughts — in a platform full of in-progress assessments and pending quotes, the in-between states are the product.

Motion was tokenized like everything else — a small set of durations and easings with assigned intent, so interactions felt consistent without every designer re-deciding timing. The voice of the motion: calm, brief, never decorative. In a tool advisors run their business on, animation exists to confirm and orient, not to entertain.

A design system proves itself in flows, not stickersheets. Pathfinder's proving ground was the project lifecycle — the five-step path every deal travels, from project information through configuration, discovery, registration, and contract. Each step is dense with tools (IQA assessments, research modules, quote builders), and each had to feel like one product.

Prototypes went beyond Figma where it mattered: interaction timing, input formatting, and validation behavior were built in HTML/CSS so we could feel the real thing, not a simulation of it.

Accessibility isn't a checklist run at the end — it's encoded where decisions live. Contrast minimums are enforced in the color token pairings themselves (a real discipline on dark, data-dense surfaces); focus behavior ships inside every component; reduced motion is a theme, not a special case.

The quiet failure mode of design systems is drift between the Figma library and the coded one. Pathfinder's defense was naming parity: the same token name travels from Figma variable to CSS custom property to component prop, so designers and engineers are provably talking about the same thing. Handoff ran through Figma Dev Mode against that shared vocabulary.

The second act of the system extended the same token foundations into a self-serve marketing design library: templates for the highest-volume asset types — partner enablement, campaigns, event material — locked to system foundations but flexible where campaigns needed expression. Marketing stopped rebuilding basics and brand reviews stopped re-flagging the same issues.

I drove adoption the unglamorous way — enablement sessions, documentation written for non-designers, and training across 350+ internal managers. A system nobody uses is a wiki page; this one became the default path because it was faster than the old way.

The outcomes that mattered: the library became the default path for campaign work rather than a mandate; brand reviews shifted from policing basics to discussing ideas; new platform surfaces shipped visually consistent on day one because the foundations were already in the file; and accessibility findings stopped recurring because the fixes lived in the tokens. The system carried Pathfinder from 2.0 through 3.0 without a redesign — the architecture absorbed the evolution.

The honest lesson of three years: when the same feedback keeps arriving, the fix is upstream in the system, not in the individual deliverables. Pathfinder's system was that fix, applied twice — once for product, once for marketing.

Tokens before components, always. Every hour spent on the semantic layer paid back tenfold as the platform evolved — 2.0 to 3.0 was a token remap and component growth, not a redesign.

Adoption is a design problem. The library won because using it was faster than not using it. No governance document survives contact with a deadline — but a better tool does.

Watch the detach rate, not the praise. Usage analytics told the truth about which components actually served people. The data contradicted my intuition more than once; the system got better every time I listened to it.

Where I'd push further today: AI-augmented documentation and contribution patterns — the approach I now use at PBK Studio, where docs stay current because the workflow maintains them, and where I carry prototypes past Figma into working code with Claude Code as a daily tool.