Wildcard design system

We use Wildcard, Sourcegraph’s design system, to create visual design artifacts in Figma. Designers utilize components from Wildcard whenever possible to ensure consistent design across Sourcegraph and efficient development time. We also use Chromatic to manage our storybook.

Figma libraries

The Wildcard Design System is the primary library to use 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:

Colors:

  • There are four groups of colors used in Wildcard: Root, Semantic, Brand, and Open Color (OC).
  • Of these groups, the Semantic colors are the ones to be used in day-to-day design work.
    • Semantic colors control things like background colors, borders, links, and input styles

Spacing:

  • Sourcegraph uses an 8-point grid. Modify your nudge settings accordingly!

Components

Read more about adding and modifying components in using components.

User interface patterns

Read more about different user interface patterns in user interface patterns.

Using Figma

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