Marketing design language system (DLS)

For our marketing website, we use the Marketing DLS. Designers utilize components from the DLS whenever possible to ensure consistent design across Sourcegraph marketing touchpoints and efficient development time. The DLS is based on the Tailwind CSS framework. When designing our product, we use Wildcard, to create visual design artifacts in Figma. While these are separate design systems, they both inherit the Sourcegraph brand expression to their own degree (product is more subtle in brand expression, marketing is very brand-driven). Whenever new components are added, it’s important for designers to reference both existing libraries to create consistency whenever possible. This ensures a smooth user experience from first site visit to actually using our product.

Figma libraries

The Marketing DLS is the primary library to use for all marketing design in order to have access to all of our components and styles. The Helpers and Tooling also contains useful components like redlines and annotation.

Basic Tokens

Text:

We use Source Sans 3 and Source Code Pro. Download both font families and install it on your system.
- You may also need the Figma font installer if you use Figma in the browser instead of on desktop.
All text styles are available through the DLS typography page

Colors:

The marketing DLS has a single complete palette, based on our core brand colors.
- They can be found on the Colors page
For guidance on how to apply these colors in marketing, reference the Colors section of our Brand Guidelines.

Spacing:

The marketing DLS uses an 8-point scale and adheres to Tailwind’s standard for vertical and horizontal spacing. View the spacing scale and examples of best practices in the DLS Spacing section.

Using Figma

If you’re new to using Figma, there are some instructions and tips in using figma.