Code-design Alignment

August 10, 2025 (3w ago)

Software will reflect the shape of the team that builds it - Conway's Law.


After moving away from Bootstrap, we skipped a full audit of our design system. Instead, we layered new style guides onto old code, mixing fresh patterns with legacy styles for the sake of speed.

Over time, design and code discrepancies grew more visible.

When information is siloed, the user experience breaks.

This time, we chose a different path. Rather than invent a new design system from scratch, we audited both design and code, moving toward a unified, code-based system.

The Goal
  1. Ensure cohesive experience for our users
  2. Achieve design consistency for the design team
  3. Improve design-code efficiency for the front-end team
  4. Enable faster prototyping for the product team
  5. Exclude brand customization from this project
The Process
  1. Design audit
  2. App & code audit
  3. Documentation
  4. Dev Review
  5. Build
To Reflect
  1. Start with the code, not the style. By starting with the coded components, every new design becomes a natural extension of the established patterns.
  2. Code and design must evolve together: having both design and development skills allowed me to create components that are both beautiful and technically sound.
  3. Documentation is as important as the system: A design system is only as good as its documentation. I spent significant time creating clear guidelines, usage examples, and best practices that the entire team could follow.
The Documentation

Design System Documentation