Building JamCrew's Design System from Scratch

When we set out to build JamCrew, we had a 59-page brand foundation document and zero lines of code. The brand identity was rich: a carefully curated palette of ten colors, three typefaces, an 8px spacing grid, and a status system with six defaults and a custom-color palette for admins. The challenge was translating all of that into a living, breathing component system that would work across a mobile PWA, a desktop dashboard, and a marketing site.

Tokens Before Components

We started with design tokens, not components. Every color, font, spacing value, and border radius was defined as a CSS custom property in a Tailwind v4 theme file. Midnight, cream, honey, sage, coral, sky, ink, smoke, stone, slate: each one mapped to a semantic variable that described its purpose, not just its value. This meant we could swap the entire palette for dark mode by overriding a single layer of tokens.

The font stack followed the same principle. Bricolage Grotesque handles display type (headlines, section titles), DM Sans covers body text and UI labels, and Space Grotesk is reserved for data, numbers, and code. Each font has a corresponding Tailwind utility class, so developers never have to remember which font goes where.

The Status System

JamCrew's status system was the most complex piece of the design system. Six default statuses (New, Pending, Confirmed, In Progress, Cancelled, Completed) each have a fixed color. But admins can also create custom statuses and assign them colors from a curated 10-color palette. The badge rendering uses color-mix() to generate a 15% tinted background from any status color, which means custom statuses get the same visual treatment as defaults without any additional CSS.

Component Architecture

With tokens in place, components came together quickly. Button, Card, Input, Badge, StatusBadge, and SkeletonLoader formed the initial set. Each component is a server-compatible React component that accepts a minimal prop surface. Buttons have four variants (primary, secondary, ghost, destructive) and two sizes. Cards use the token system for backgrounds and borders, so they automatically adapt to light and dark modes.

The icon system uses Lucide icons embedded as an SVG sprite sheet. No CDN dependency, no runtime fetching. Every icon inherits currentColor and can be referenced with a simple <use href="#i-name" /> pattern.

Lessons Learned

The biggest lesson was that constraints accelerate design. Having a fixed 8px grid, a limited palette, and strict font assignments eliminated the "what should this look like?" question for nearly every component. When you remove choice, you remove hesitation. The design system is not a set of rules that slows you down. It is a set of decisions already made so you can move faster.