Reef Design System

Since we're building a design system of a startup that's still finding its product market fit, it's good to know that product or feature could change quickly. Therefore it's crucial to define the minimum viable product that can adapt to this flexibility.

I started by auditing existing interfaces of the application. Aside from the common UI such as buttons, inputs, breadcrumbs, etc; we see a unique subset that are highly related to the company's core offering of code documentations.

1. editor blocks - elements user can freely add into a doc
2. sync statuses - visual representation for a referenced code or token

The editor contains different block elements that could be included. Headings, text blocks,

We want to showcase the status of the code, whether it is the same as your current code, or whether something was modified. This was accomplished by applying color theory and side-by-side comparison.

We set a weekly sync with the devs so we can catch discrepancies early on.

We decided to sent out a company-wide event to nominate and vote for our design system before we even build it out. Our developers were quite engaged since they had authority over a small decision that is usually coming from the design team.