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:
- We use SF Pro for all text. Download SF Pro 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 Wildcard text styles page
Colors:
- There are four groups of colors used in Wildcard: Root, Semantic, Brand, and Open Color (OC).
- They can be found on the colors page
- 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.