The problem with starting from scratch

Every designer has experienced it: a new project starts, you open a blank Figma file, and you spend two days building a button system before writing a single screen.

We don't do that.

Our design system philosophy

We operate from a set of principles that make design fast without making it generic:

Tokens first. Before any component, we define spacing, typography, color, and radius tokens. These 20–30 values are the DNA of every UI decision. Once set, consistency is nearly automatic.

One typeface, three weights. We almost always use Inter. Regular for body, Semibold for UI elements, Bold for headings. Adding a display typeface is a deliberate choice for brand differentiation — not a default.

8-point grid. Every spacing value is a multiple of 8. 8, 16, 24, 32, 48, 64, 80, 96. This sounds constraining. It's liberating — you never debate whether a gap should be 14px or 16px.

Components we pre-build

For every project we have ready-made, production-quality versions of:

• Button (primary, secondary, ghost, destructive)

• Input, Select, Checkbox, Radio

• Card, Modal, Drawer

• Toast / notification

• Table with sorting

• Empty states

• Loading skeletons

These are built with Tailwind + shadcn/ui and tested across browsers. We plug them in, retheme with the project's tokens, done.

The retheme process

A complete retheme takes 2–3 hours:

1. Set the primary color and derive shades

2. Set the typography scale (usually just adjusting the base size)

3. Set the border radius (sharp, medium, or rounded)

4. Adjust the surface colors (card backgrounds, borders)

5. Smoke test every component in light and dark mode

What this means for speed

When we start a new project, we're not designing. We're making decisions. The components exist — we're choosing how they look for this client, this brand, this audience. Design work on a typical MVP: 1.5–2 days, not 2 weeks.