Building Bolt: How We Launched Cinder’s New Design System

Trust and Safety professionals operate in high-stakes environments where every second counts and accuracy is paramount. That’s why Cinder has invested deeply in building Bolt, Cinder’s new design system, with flexibility, scalability, and precision at its core.

Bolt is more than a collection of components; it’s a thoughtful system designed to empower teams to make complex, data-driven decisions quickly and confidently:

• Clarity is everything: We’ve focused on presenting information with precision. Clear data labeling, intuitive color schemes, and strong visual hierarchy all work together to reduce cognitive load and help users zero in on the most critical information. 
• The need for speed: Greater clarity makes for even greater speed. With Bolt, our goal is to help customers see measurable reductions in key metrics like Average Handling Time, which means time sensitive decisions are made fast with accuracy.

‍

‍

The journey of Bolt: from concept to reality

When our design lead Jon joined Cinder, the team saw an opportunity to refine the platform to better convey the professionalism and trust our users expect. That’s where Bolt came in. It wasn’t just a visual overhaul, it was about creating a system that could evolve alongside Cinder’s growing product needs.

One of the biggest design challenges was aligning stakeholders on a shared vision. We needed to define what Bolt would look like, how it would feel, and how it would scale as our product evolved. By iterating quickly and gathering feedback throughout, we shaped a system that met both immediate needs and long-term goals.

A turning point came when we saw Bolt’s flexibility in action. It allowed us to seamlessly update multiple areas of the platform by simply swapping out components. This demonstrated that Bolt wasn’t just about aesthetics; it was a robust tool designed to handle data at scale, essential for high-stakes use cases in Trust & Safety.

‍

Building and scaling faster with Bolt

From an engineering perspective, Bolt enables our developers to deliver new features quickly and efficiently. By streamlining our component library, we’ve reduced variations and focused on core functionality, ensuring flexibility and consistency throughout the system. 

Take our tab component, for example: previously, developers had to manually configure elements like badges, adjusting margins and positioning, which led to increased mental load for developers. Now, with Bolt, we've introduced a leftSection and rightSection property for tabs, allowing developers to easily pass parameters such as rightSection={{type: 'badge', value: 'xyz'}}. This ensures badges are consistently positioned, sized, and spaced, minimizing potential errors.  

We’ve extended this same pattern to buttons, inputs, and menus, creating a unified, cohesive experience across the interface. By simplifying components, we’ve made implementing design specifications faster and more reliable, ultimately supporting scalability and adaptability without compromising quality.

As platforms grow and new threats emerge, Trust and Safety must scale to meet the moment. Bolt’s modular architecture ensures that as your needs grow, whether it’s expanding data sets or integrating new workflows driven by evolving regulations, the system grows with you, without compromising performance or usability. This flexibility allows us to serve a variety of use cases, from complex investigations to real-time content moderation, all within a seamless, adaptable interface.

‍

Design tokens: where consistency meets clarity

Bolt further reinforces consistency via design tokens. Our token library, written in TypeScript and compiled into CSS, defines core properties such as spacing, colors, typography, borders, and input dimensions. 

With design tokens, any adjustment, whether it's changing pixel values or updating color schemes, can be applied system-wide with ease. For instance, updating the height of medium-sized inputs to 36px is as simple as modifying a single token: --bolt-input-height-md: 36px, which then cascades across all inputs for a cohesive interface. 

Likewise, changes to the success surface color and its corresponding text color are controlled through two tokens: --bolt-colors-success-surface and --bolt-colors-on-success-surface, ensuring uniformity across all components, from buttons to notifications. Additionally, our color tokens have streamlined the implementation of dark mode by enabling variant swaps when dark mode is activated. These tokens not only enhance efficiency but also allow Bolt to scale seamlessly while preserving design integrity.

‍

What we learned designing Bolt

When building and designing design systems, one key lesson the team learned was to prioritize early stakeholder alignment and iterate quickly. Testing early versions of Bolt in lower-risk areas allowed us to validate Bolt’s effectiveness before scaling it across the platform. And throughout this process, we saw firsthand that a great design system isn’t just about aesthetics—it’s about creating something adaptable, functional, and scalable that can grow with the product and serve evolving needs.

Purpose-built for Trust & Safety

With Bolt’s launch, we remain committed to continuous iteration and improvement, and we look forward to hearing from our customers to further refine and strengthen the system.

Some of the most advanced safety teams in the world operate on Cinder. How can we help your team?