Karat Design System

I joined Karat last February to implement a component library in Figma, revamp our codebase, and write supporting documentation. Here are the results:

1 design guide

A single starting point for anyone to find what they need.

Three screenshots of pages from our design guide. First page is Accessibility—it outlines best practices and has a checklist for both designers and developers. The other two pages are for two components: Media Card and Layout. For each component, there’s a completion status, examples, and links where you can find it in Figma or in code.

37 check-ins

We used a dedicated design systems channel to share the roadmap, post weekly updates, and get feedback.

Two screenshots from our check-ins in Slack. In these updates I share what I’ve been working on (for example, breakpoints or loading states) and add links to corresponding documentation or screencasts.

2-3× output

Figma component library allowed our designers, Mark and Cecilia, to work 2-3× faster. They could spend more time thinking about the problem and less time on mundane technicalities.

A compilation of components and examples from our Figma library.

~100,000 lines of code removed

56 pull requests made, each removing on average ~2,000 lines of repetitive code and replacing it with ~300 lines.

Two screenshots. First screenshot shows a longer block of code that has multiple repetitive lines. Second screenshot shows the same block of code, but it’s cleaned up and much smaller.

~ 2,000 dev hours saved

At least. This calculation is based on just the following 10 components from our codebase:

component	# instances so far	hours saved
Alert message	25	85
Button	370	181
Card	135	397
Input	212	100
Layout	47	168
Modal	55	263
Page header	60	58
Table	70	338
Tabs	10	72
Toast	143	283

These hours could then be spent on launching our new Books product and enhancing our internal tool with nifty features (like a custom CMS or underwriting improvements).

Note: I used Knapsack's calculator as inspiration.

8.2 / 10 happiness score

At the end of 2022, we ran a desisgn systems survey with designers and developers. Here's the full report.

Two screenshots from the design systems survey. First screenshot shows responses to the question ‘On a scale of 1 to 5 (with 1 being not useful and 5 being very useful), how do you find the design system documentation?’ and the answer is 4.4. Second screenshot shows responses to the question ‘On a scale of 1 to 5 (with 1 being very difficult and 5 being very easy), how easy it is for you to find and use components whenever you need them?’ and the answer is 3.9.

3 buckets of (happy) tears

The amount I cried after I read my manager Mark's LinkedIn recommendation.

Screenshot of Mark's very flattering LinkedIn recommendation.

We did so much and yet, there was still so much to be done... (a better system for emails, more consistent loading states, design tokens, and much more). 💙