When we rebranded Crux Labs, we didn't just update the logo and pick new colours. We built a design system that could govern every visual decision — website, proposals, presentations, social content — from a single source of truth. Here's how we approached it and what we'd do differently.

Why Design Systems Matter for Agencies

Agencies face a specific design system challenge: they're simultaneously maintaining their own brand and building components for client projects. Without a clear system, every new project either reinvents the wheel or borrows inconsistently from previous work. The cost accumulates silently in longer design cycles and less cohesive outputs.

The Foundation: Brand Tokens

Before designing anything, we established brand tokens — the atomic values that every design decision references. For Crux Labs, these were: a mint green (#31eaa7) as the primary accent, charcoal (#0d0d0d) for dark surfaces, a cream (#f5f4f0) for light backgrounds, and a specific typographic pairing of a geometric serif for display text and a clean sans-serif for body.

• Colour tokens with semantic naming — 'brand-mint' not '#31eaa7' in component code
• Type scale with consistent size ratios — eliminates arbitrary font-size decisions
• Spacing system based on a base-8 grid — every spacing value is a multiple of 8px
• Motion tokens — defined easing curves and duration ranges for all animations
• Elevation tokens — shadow values for different surface layers

The Tailwind CSS Implementation

We implement design systems in code using Tailwind CSS v4's configuration layer, where brand tokens map directly to utility classes. This means designers and developers work from the same vocabulary: 'use brand-mint at 60% opacity' becomes `text-[#31eaa7]/60` in code without any translation loss.

"

The best design systems collapse the distance between design intent and code implementation. When a designer and a developer use the same token names, the conversation changes.

Component Architecture

Above the token layer, we built a component library covering the patterns we use on every project: hero sections, card grids, accordion lists, feature highlight rows, testimonial blocks, and CTA sections. Each component is built to accept content props and follow the token system — not hardcoded colours or sizes.

What We'd Do Differently

• Start with the component inventory earlier — audit what patterns actually exist in production before designing new ones
• Document the 'why' behind decisions, not just the 'what' — future team members need context, not just values
• Build the dark mode token layer from day one — retrofitting it is expensive
• Version the design system from the start — breaking changes need a migration path
• Set a deprecation policy before you need one — component debt accumulates fast