Braid Design System
👋 Welcome to Braid, the themeable design system for the SEEK Group. Braid aims to make cross-brand UI development as fast as possible while maintaining a high level of quality and accessibility. In order to achieve this, Braid provides as a set of React components and CSS variable-based styling themes using vanilla-extract.
What makes Braid different
As much as possible, we want Braid code to make sense to non-developers. We’re aggressively focused on the simplicity and composability of its API.
Along with our work on Playroom, our goal is to empower designers and developers to iterate together in the same medium using the same components, reducing the need for high fidelity mock ups before development starts. We want to allow you to spend less time polishing mock ups and more time polishing the product. For more information about our philosophy, check out our design workflow guide.
Getting started
Next, you should read our layout guide. This goes into detail about how we manage component composition and layout, which forms the backbone of our system. Then, read our tones guide to get an understanding of the common set of tones (positive, critical, etc.) used throughout Braid. Finally, there’s really no substitute for looking at all the available components, so just jump right in and start looking around. As you explore, you should familiarise yourself with our Braid Playroom which allows you to try out the components without requiring a development environment.
Support
If you work at SEEK, we have a couple of internal Slack channels dedicated to support. For design related questions, head to #braid-design-support. For more technical questions, direct them to #braid-support. We try to respond to everyone as quickly as we can, and we’re always happy to help.