Hire usForge built a 0-to-1 design system for Cruise's 7+ internal autonomous vehicle products — 16 weeks of staff augmentation, one embedded L5 senior designer. Token architecture aligned to Tailwind, three density sub-systems (sizing, density, elevation), light and dark mode.
Design System (Staff Augmentation) · 1 × L5 Senior Design Systems Product Designer · 16 weeks · 2023
Cruise builds the autonomous vehicle platform. Behind every autonomous mile are 7+ internal products: mission control, vehicle dispatch, telemetry monitoring, simulation environments, and the operational tools that keep the fleet on the road. Each was being built by a different team, with major inconsistencies and component duplication across the surface area. The internal tools team operated in dark mode by default and had light mode on the roadmap. The consumer product was on the horizon and would need to adopt the same system.
Design systems, UI/UX, Product design
Design system, Multi-brand design system, Token architecture aligned to Tailwind, Three density options, Elevation system, Light and dark modes, Component library, Documentation with video walkthroughs, Training, Visual review pipeline with Chromatic and Storybook
The top constraint was alignment with code. Cruise's pre-existing components could not break upon implementation of the new system. Whatever Forge built had to land on engineering's existing infrastructure, not require a rebuild of it. Token structures had drifted across products, and the team had started defining semantic naming, but conventions were too vague to use consistently.
Cruise was running 7+ internal products with major inconsistencies. Leadership knew they needed a design system. The opportunity was not to invent novel sub-systems for the build. It was to apply Forge's existing sizing, density, and elevation methodology to an organization struggling with consistency of execution at enterprise scale.
One embedded designer, 16 weeks, repeatable methodology. The sub-systems compounded; a bespoke build would have taken twice as long for half the result.
A staff augmentation engagement. One L5 Senior Design Systems Product Designer embedded with Cruise's in-house engineering team for 16 weeks: one 12-week block plus a 4-week extension to wrap up documentation. Forge's standardized sub-systems (sizing, density, elevation, token architecture aligned to code) applied to Cruise's specific constraints rather than a bespoke build from scratch. This is the staff aug model in its sharpest form: a senior specialist + repeatable methodology + tight integration with an in-house team, not a project handed over the wall.
Result: 7+ internal products unified under a single design system. 16 weeks. One embedded L5 senior designer. Engineering's existing infrastructure — Tailwind, GitHub, Style Dictionary — untouched.
The design language for Cruise's internal tools was generally established but lacked clarity on how it was meant to be used, creating many inconsistencies across their wide range of products. We started by creating color primitives that could support their data visualization needs, defined clearer semantic naming, and structured better spacing and sizing.
The token architecture aligned tightly to Cruise's engineering stack. Tokens Studio in Figma pushes tokens directly to GitHub, where they run through Style Dictionary and integrate with Tailwind CSS. Global token names match Tailwind's naming conventions so the integration lands cleanly. Designers ship tokens; engineering picks them up; nothing translates in between.
We added a supporting color specifically to prevent conflict between Cruise's primary brand red and negative states on input controls.
There was a great need for density options because the internal tools teams deal with large quantities of content while the consumer teams eventually need much more breathing room. We created three density options (condensed, standard, comfort) for a variety of container components to allow for this flexibility. Three y-axis density tokens are applied at the container level. X-axis spacing tokens operate independently to maintain alignment across differently sized components.
The sizing system pairs typography scale with a 4px grid and button heights. Icon instances align with font size. Contained items align with line height. Standalone components contain those nested items with matching y-axis padding. T-shirt sizing within each category holds hierarchy without sacrificing mix-and-match.
Atomic design principles were used to create components for this design system. We avoided the use of unpublished base components whenever possible to allow for a better consumer experience. Smaller components become nested in more complex container components but are still able to be used individually as needed.
A table component is a good example. There are atomic components nested within the header and body cell components: checkbox, text, button groups, and more. Designers can choose to use these to create their tables, but pre-built table rows are also available to get further along in the creation process. These can be broken and customized as needed and beats having to copy and paste a table cell over and over.
Component updates flow through a visual review pipeline using Chromatic and Storybook before pushing to product. Regressions caught before they ship.
We provide all our design system clients with detailed documentation that includes video walkthroughs, instruction on high-level topics, and information about how to use each and every component available. The documentation extension funded the final 4 weeks of the engagement specifically to wrap this work cleanly.
What we learned: Token alignment to engineering's existing naming conventions is the integration that keeps design and code from drifting after the engagement ends. The technical step that mattered most was matching global token names to Tailwind's. Without that constraint, the integration is a bridge that requires maintenance. With it, the integration is invisible. We carry this pattern forward to every system engagement where engineering already has a CSS framework in production.
The internal tools team utilized dark mode by default and wanted to introduce a light mode. With the use of design tokens and the correct token structures, this was quickly implemented. Tokens Studio is compatible with Figma variables, so designers can switch modes via the layers panel directly in Figma's UI, no plug-in interaction required.
The elevation system uses three layers (bg.elevation-base, bg.elevation-one, bg.elevation-two) that mimic paper layering. Lowest is the parent frame, middle is where most UI sits, highest is for popovers like tooltips and sheets. This prevents designers from using background colors to segment content, which produces unnecessary UI chrome.
A Figma-native, platform-agnostic, and multi-brand design system to unify design for one of the fastest growing B2B tech companies and their ever-expanding customer base and suite of products.
Read more