Crown Equipment

Crown’s design system, Core-UI, was already in use, but it lived across multiple tools, Sketch for design assets and InVision for documentation. This created friction: files were fragmented, updates were difficult to track, and collaboration between designers and developers was limited.

For this engagement, we had two main priorities. The first was migrating Core-UI into Figma. That meant more than just moving files over, we manually rebuilt components from Sketch, improving them as we went. In a short amount of time, we audited and documented the library, re-created components in Figma, and centralized everything into one source of truth to support faster, more consistent design work.


The second was laying the foundation for a documentation site. We defined the site’s structure and design, connected it to the Figma API to keep content current, and shaped it into a space where designers and developers could collaborate and share guidance.


Together, these efforts began to shift Core-UI from a simple component library into a scalable system, one designed to support consistency, accessibility, and flexibility while equipping Crown’s digital product teams for success now and in the future.

We began by building out a new foundations system in Figma, color tokens, typography, spacing, and grids. This wasn’t just a straight migration; we redesigned elements like the color palette to meet accessibility standards and improve the overall user experience.

Each component was rebuilt from Sketch directly in Figma, with improvements layered in as we went. This approach allowed us to eliminate inconsistencies, refine interactions, and create more flexible, reusable assets.

With the core components ready, we started pulling them together into patterns, common combinations teams could drop in to solve their specific UI needs. Having these patterns documented gave product teams a quicker, more reliable way to build consistent screens.

We started with information architecture and wireframing to shape the documentation site’s structure. The goal was to make navigation feel intuitive so designers and developers could quickly find what they needed, whether that was a foundation style, a component spec, or usage guidance.

Alongside the structural work, we defined the visual direction for the docsite’s UI. We explored concepts with the Crown team to strike a balance between a modern, engaging experience and their established brand tone. By leveraging Core-UI’s own styles and components, refining color, typography, and layouts, we created a look that felt approachable and digital-first, elevating the docs beyond reference material into a product the team was proud to use and maintain.

To make sure the documentation stayed consistent as it grew, we created templates and best practices for how content should be written. We defined a clear writing tone and guidance that other designers could follow, keeping the language approachable and consistent across the site.

We developed templates and guides for imagery, covering things like component anatomy, usage examples, and do’s and don’ts. These templates gave the team a repeatable way to produce visuals, so any future documentation could be created quickly and consistently. By setting this up, we streamlined their workflow and made it easier to keep the design system evolving without extra overhead.

The documentation site was designed to be more than a reference, it became a shared space where designers, developers, and product teams could work together. By housing guidance and best practices, it encouraged cross-disciplinary collaboration and clear communication, transforming Core-UI from a component library into a living system teams could contribute to and rely on.