SDS Design System · Christopher Cifonie

Project Overview

My role: Design system lead
Team: Front-end team
What I led: I led the team in developing the CSS system and took on mapping its foundations into shared Figma libraries.
Status: CSS utilities are deployed and used daily. Figma foundations are in use as the mapping expands.

Why We Built SDS

Problem

Make recurring UI decisions reusable

Color, typography, and layout come up on nearly every page. We wanted a shared way to apply those decisions across projects while keeping control of the styles our team relies on.

Approach

Build a focused set of utilities

Tailwind’s small, composable classes gave us a model for how to apply shared styles directly in the markup. We built the utilities around the styling needs we already had and kept their names and values under our team’s control.

In Production

SDS is deployed to our front end. The team uses its color, typography, and layout classes daily, applying shared styles as we build pages and UI across projects.

Color

Apply palette values through text, background, and border classes.

Typography

Reuse text sizing, weight, and line-height choices.

Layout

Use custom CSS Grid and Flexbox classes to arrange page sections and their contents.

Mapping SDS into Figma

I started with the CSS already in use. In Figma, color variables use the same utility names as the CSS, and text styles document which classes reproduce them.

SDS color primitives and utility aliases, with primary blue mapped to text, background, and border roles. — **Color primitives and utility aliases**One primary blue value feeds the text, background, and border utilities.

Figma specimens for four sizes of body text and four sizes of labels, with CSS class recipes for each. — **Reusable text styles**SDS Foundations pairs body and label specimens with the CSS class recipes that produce them.

Choosing colors with enough contrast

I built contrast maps in Figma so designers can pick text and background colors that meet the WCAG AA contrast minimum for normal text. In the primary palette, white text on shade 500 has a contrast ratio of 5.5:1.

Spacing, shape, and depth

Figma variables carry over the padding, gaps, and corner radii we use in CSS. Shared shadow styles help designers show which surfaces sit above others.

SDS spacing example with 24 pixels of padding and 16 pixels between items, plus corner samples from rounded-7 to rounded-full. — **Spacing and corner radius**The spacing example uses 24 px of padding and a 16 px gap. The corner samples come from the same shared scale used in CSS.

SDS surface samples with no shadow and progressively stronger small, medium, and large shadows. — **Elevation**Figma effect styles match the CSS shadow utilities, from a flat surface to a more prominent layer.

From values to component behavior

The Figma button reference shows how the foundations can support a component. Its state matrix puts default, hover, focus, pressed, and disabled treatments side by side, so designers and developers can compare the choices for each action.

Primary, secondary, destructive, and success buttons across default, hover, focus, pressed, and disabled states. — **Button interaction states**From SDS Components. The focus column shows the ring used for each button treatment.

What’s Next

The next step is to use the mapped variables to build a Figma layout and component library around patterns we’ve already built in code. I want a closer one-to-one match, so a designer can choose a layout in Figma and a developer can find its counterpart in production.

Choose layout patterns already used on the front end.
Rebuild them as Figma components using the shared foundations.
Compare each Figma pattern with its CSS counterpart and document how they map.

SDS Design System: Shared CSS foundations, from production to Figma.