Bringing the ATLAS component library back in sync with the product.

Design Systems

Component Audit

Design-Engineering

Project

ATLAS Design System Alignment

Client

NYC Public Schools

Role

Product Designer, supporting the Senior UX Designer

Timeline

August 2025 to February 2026

Scope

50+ components · foundation styles

Tech

Figma · Telerik Kendo UI · ThemeBuilder · CSS

ATLAS design system component library cover

What's out of sync?

One component, three conflicting sources.

While working on the next ATLAS feature, I noticed that the Figma library, the newer Kendo UI Kit, and the product itself no longer matched. I started a focused audit before moving on.

The Notification below is one example. Switch between the sources to see where the details drift, then compare them with the version I landed on.

Source references

Resolved system

Live component Upgraded Result

Notification

The version I kept: Kendo underneath, with the product behavior that still mattered.

Carry

Status edge

Keep a customization when it solves a real product or business need.

Adjust

Color value

Keep the intent, but update the value for the newer Kendo foundation.

Default

Spacing base

Use the Kendo default when the old choice only worked around a limitation in the previous kit.

The full story

How I turned conflicting sources into a repeatable audit.

This short deck focuses on the audit itself: how I compared the evidence, worked through ambiguous calls with design, engineering, and product, and documented the reasoning for future work.

Context

ATLAS Design System01

ATLAS Design System

Upgrading a drifting design foundation for cleaner feature delivery.

Product Designer supporting the Senior UX DesignerSelf-initiated design-system alignmentFigma · Kendo UI · production styles

Current State02

The foundation had split before the next feature work started.

The internal library still carried older Kendo-era decisions. Engineering had moved to a newer foundation, while implemented screens retained a mix of legacy and updated patterns. New feature work could inherit that mismatch from day one.

Design source

Old internal DS

Legacy patterns and customizations designers still referenced in Figma.

Engineering source

Newer Kendo UI Kit

Updated base components, tokens, states, and default styling.

Version drift

Example04

What did that mismatch look like?

Existing references

Old internal library

Production-used success color, stronger left edge, and larger spacing.

Legacy patternStrong edge

New Kendo default

New kit default with a smaller footprint and lighter visual weight.

Default kitCompact style

Designed result

Upgraded library

Built on the new kit while preserving the useful product pattern.

Adjusted colorAligned variants

Decision Rule05

I tested every mismatch against three possible answers.

The goal was not to redesign everything, and it was not to copy either source blindly.

Carry

Keep the old customization when it represents a real product or business need.

Adjust

Preserve the intent, but update the value for the newer Kendo foundation.

Default

Return closer to Kendo when the old change was only an older-kit workaround.

Method06

Turn 50+ component drifts into trackable decisions.

Item

Old DS pattern

New Kendo

Production

Decision

Notification component

Custom status colors, stronger edge

Softer default, different spacing

Mixed status behavior

Adjust

Core colors

DOE color family

Kendo scale + swatches

DOE colors still active

Adjust

DOE-specific pattern

Business-specific behavior

Generic kit behavior

Custom app behavior

Carry

Component states

Incomplete coverage

Available states

Partial implementation

Adjust

More components...

Inputs, dropdowns, tables

Same source check

Production spot-check

...

Why This Worked07

Evidence showed where each mismatch came from.

My engineering background helped me read CSS, ThemeBuilder configuration, and Figma variables directly. That turned visual disagreements into traceable questions about values, intent, and implementation instead of preference debates.

notification.status.warning {
  background: palette.warning.20;
  border-left: status.warning.90;
  padding: spacing.16 / 24;
}

Process08

When sources disagreed, I turned the mismatch into a decision record.

Compare evidence

Old Figma library, new Kendo UI Kit, and production app styles.

Find the reason

Business-specific need, usability adjustment, or old-kit workaround?

Align if ambiguous

Make edge cases visible to design and engineering leads.

Document

Capture the decision so future work does not rely on memory.

Result09

The output was an upgraded foundation, not just a cleaner Figma file.

The active component set became easier to design from, easier to hand off, and easier to explain.

50+components in the scoped foundation

Variantscore color and state updates included

Recorddecision logic documented for future work

Upgraded library overview for the active component foundation.

Impact11

Less drift, fewer handoff questions, more trust.

~50%

Fewer handoff questions

IHMS questions shifted from style mismatches to actual product behavior.

~96%

Design-to-code fidelity

Cleaner specs and component choices helped the build match the intended UI.

Shared decision record

The change log made foundation decisions reusable for future ATLAS features.

Bringing the ATLAS component library back in sync with the product.

Design Systems

Component Audit

Design-Engineering

Project

Client

Role

Timeline

Scope

Tech

One component, three conflicting sources.

Status edge

Color value

Spacing base

How I turned conflicting sources into a repeatable audit.

ATLAS Design System

Thanks for reading! 🙇🏻

Back to Home ➔

Huchong Jin