Design System Docs
Design and front-end teams
Design and front-end teams: document components, usage rules, owners and status.
Use this templateDesign System Docs
Documentation for the components people build with. One home for tokens, components and rules. Start from the foundations, find a component, and check its status before using it.
Principles
Foundations
Components
| Component | Category | Status | Owner | Design link | Code link | Tokens |
|---|---|---|---|---|---|---|
| Button | Stable | Benedikt Sorensen | https://design.pebblecraft-demo.net/button | https://code.pebblecraft-demo.net/button | color-brand-500, color-action, radius-card | |
| Text field | Stable | Lola Fashola | https://design.pebblecraft-demo.net/text-field | https://code.pebblecraft-demo.net/text-field | color-surface, font-body, space-2 | |
| Select menu | Beta | Lola Fashola | https://design.pebblecraft-demo.net/select-menu | https://code.pebblecraft-demo.net/select-menu | color-surface, space-4, radius-card | |
| Card | Stable | Benedikt Sorensen | https://design.pebblecraft-demo.net/card | https://code.pebblecraft-demo.net/card | color-surface, radius-card, shadow-raised | |
| Modal dialog | Beta | Quinn Aberdeen | https://design.pebblecraft-demo.net/modal-dialog | https://code.pebblecraft-demo.net/modal-dialog | color-surface, shadow-raised, space-4 | |
| Toast notice | Draft | Yara Delacroix | https://design.pebblecraft-demo.net/toast-notice | https://code.pebblecraft-demo.net/toast-notice | color-danger, shadow-raised | |
| Data table | Stable | Benedikt Sorensen | https://design.pebblecraft-demo.net/data-table | https://code.pebblecraft-demo.net/data-table | font-body, space-2, color-surface | |
| Tooltip | Deprecated | Quinn Aberdeen | https://design.pebblecraft-demo.net/tooltip | https://code.pebblecraft-demo.net/tooltip | font-body |
Tokens
| Token | Layer | Platform | Type | Value | Alias of | Status |
|---|---|---|---|---|---|---|
| color-brand-500 | #3B6FD4 | — | Stable | |||
| color-brand-700 | #274C9A | — | Draft | |||
| color-surface | #FFFFFF | — | Stable | |||
| color-action | Brand 500 | color-brand-500 | Stable | |||
| font-body | Inter, 16px / 24px | — | Stable | |||
| font-heading-large | Inter, 28px / 34px, 600 | — | Stable | |||
| space-2 | 8px | — | Stable | |||
| space-4 | 16px | — | Stable |
Guidelines
| Guideline | Area | Related components |
|---|---|---|
| Use one primary button per view | Button | |
| Label every field and never rely on placeholders | Text field, Select menu | |
| Error messages say what to do next | Text field | |
| Dialogs trap focus and return it on close | Modal dialog | |
| Keep tables to seven columns before offering a column picker | Data table |
Changelog
Button 2.4.0: adds a loading state.
Card 1.8.0: radius now reads from radius-card.
Tooltip deprecated; use the Popover pattern.
Principles settle arguments. When two good ideas collide in a review, the principle higher on this list wins.
Clear before clever: every screen has one obvious next step.
Consistent: the same thing looks and acts the same everywhere.
Accessible by default: contrast, focus and keyboard are part of done.
Flexible: tokens, not hard-coded values.
If a component needs a special case, the system is missing a variant.
Putting them to work
Clear before clever: if a new user cannot tell what to press, the component is not finished.
Consistent: before adding a variant, look for the existing one that almost fits.
Accessible by default: contrast, focus order and keyboard use are checked in the same review as the look.
Flexible: a hard-coded value in a component is a missing token.
Foundations are the smallest agreed pieces. Everything else is made from them, so a change here moves the whole system.
Colour
| Token | Layer | Platform | Type | Value | Alias of | Status |
|---|---|---|---|---|---|---|
| color-brand-500 | #3B6FD4 | — | Stable | |||
| color-brand-700 | #274C9A | — | Draft | |||
| color-surface | #FFFFFF | — | Stable |
Type
| Token | Layer | Platform | Type | Value | Alias of | Status |
|---|---|---|---|---|---|---|
| color-brand-500 | #3B6FD4 | — | Stable | |||
| color-brand-700 | #274C9A | — | Draft | |||
| color-surface | #FFFFFF | — | Stable |
Spacing
| Token | Layer | Platform | Type | Value | Alias of | Status |
|---|---|---|---|---|---|---|
| color-brand-500 | #3B6FD4 | — | Stable | |||
| color-brand-700 | #274C9A | — | Draft | |||
| color-surface | #FFFFFF | — | Stable |
Radius and shadow
Corner radius and elevation follow the same rules as colour: use a named token, never a pixel value. The tokens table above lists them under Radius and Shadow.
What's inside
4 tables · 8 views · 1 form · 3 row actions · 1 agent3 pages
- Design System Docs
- Principles
- Foundations
3 tables
- Tokens2 views · 12 sample rows
- Components4 views · 8 sample rows
- Guidelines1 view · 5 sample rows
Related workspaces
Docs HubTeams that write a lot: every document in one place with status, owner and review.
Release Notes & API DocsProduct and developer teams: release notes, a public changelog and an API reference.
Team Wiki & Company HomeCompanies of 10 to 200: a company home with news, team pages and a wiki that stays fresh.
Tech Spec & RFC LibraryEngineering teams: write technical proposals, get them reviewed and log the decision.
SOP LibraryTeams: write down how work gets done, with owners, approvers and review dates.
Account CRM for ConsultantsConsultants and B2B firms: companies first, then their contacts, deals and follow-ups.