Marketing Design language system for Sourcegraph

Sourcegraph has a pretty robust design system “Wildcard”, but it was built primarily for the product itself, leaving marketing efforts largely without guidance and susceptible to inconsistencies. When I joined, there were a lot of high-priority web pages that needed to be designed and built, so it was the perfect opportunity to set standards and clean up the myriad of one-off styles that existed. 

Constraints

⏰ Time

We needed to work quickly in order to meet the timeline goals of our Product Marketing stakeholders. This meant starting with a template (we chose Flowbite's Tailwind system).

🧑‍💻🧑‍💻 Headcount

Being the only Brand Designer in the company (all other designers were dedicated Product Designers), my bandwidth was limited.

Measuring success

⏱ Faster spin-up time

Creating standard definitions for things like typography, colors, spacing, and even entire section components could ultimately speed up the design, review, and implimentation process.

✨ Fewer one-off styles

The existing website had 60+ different color values, 25 heading styles, and no clear naming conventions. Having a global set values for colors and a global typescale would reduce and hopefully eliminate these one-offs, which reduced performance and complicated the design process.

Primary users

– Design partners (contractors) and future internal designers. 

Needs: Reusable set of components that follow the brand style guidelines, a consolidated workspace to house all design artifacts that are specifically for the marketing website.

– Content Platform Team developers. Needs: Easy-to-reference source of truth for style rules, a system that is aligned with Tailwind-CSS, ability to easily collaborate with designers throughout process.

A living source of truth

The DLS template we selected came from Flowbite, as it integrates perfectly with Tailwind CSS. It features style guidelines, component variants, website sections, auto-layout, grid layout, and even a playground when building new pages. After 6 weeks of reskinning and tweaking to fit our brand guidelines, the Marketing DLS was fit for duty. Check out the preview of the custom page section components below!