Surely Work is an online freelancing platform that gets people connected to the entertainment industry.
At the genesis of Surely Work I created a basic, website-level design system with a style guide for color and font styles. This worked great for the time because I was the only designer and I was developing the platform.
However, as our platform and team expanded, our design system limited the fidelity of new features. I aimed to build a component-based system that could be understood and utilized by our engineers and increase the efficiency of my (and any future designer’s) process.
To maximize component customization potential, I built everything from scratch to atomic(ish) design principles. This has helped immensely when creating new pages and ideating new features, and the developers have been able to use my Figma file as a near 1:1 guideline for creating the components with Next JS.
Define primitives. A swath of greyscale and our brand colors, inspired by the perceptually linear gradient, Google Turbo.
Build primitives into variable references. Infrared becomes warning, ink becomes text-primary-dark, white becomes text-primary-light, etc. This will allow us to change primary colors across the board by either changing or adding a new set of primitives, which will enable us to easily make a dark mode.
Define text hierarchy. Heading, body, detail, and link styles with colors to match.
Design and build base level components. Text inputs, areas, dropdowns, radio and checkboxes, toggles, custom fields (date, budget, media, links), buttons, tags, and menu items, and all associated default, filled, error, and mobile states.
Cobble components together into kits. Reusable components like nav and footer, listing cards and items, profile badges, and database items.
Cobble kits together into pages. Build pages for responsive development with 12-column desktop layouts on two breakpoints and 6-column mobile layouts.
When necessary, tie pages together into flows. This is especially helpful for our onboarding process which creates a divergent path for employers and freelancers.
