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.
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.
- 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
- 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
- Sourcegraph uses an 8-point grid. Modify your nudge settings accordingly!
Read more about adding and modifying components in using components.
Read more about different user interface patterns in user interface patterns.
If you’re new to using Figma, there are some instructions and tips in using figma.