From principle to practice
One component. A shared contract.
Change the theme and inspect how a stable semantic token changes the button. This small, framework-free example connects the naming, documentation and governance practices in the playbook.
Save your preferences
A primary button commits an immediate action. Its label explains the outcome.
Demo only — no personal data is saved.
The decision behind the colour
Global values feed semantic roles, which feed the component contract. The label and background change together to keep the action readable. The table reflects the selected theme.
| Layer | Token | Value / reference |
|---|---|---|
| Global | ds-blue-700 | #2457A7 |
| Semantic | ds-colour-background-interactive | ds-blue-700 |
| Component | ds-button-background-primary | ds-colour-background-interactive |
Behaviour & accessibility
- A native button supports Enter and Space.
- Tab to the button to see its focus indicator.
- Hover changes the fill; focus uses a separate outline.
- The disabled state prevents activation and leaves the tab order.
- Action feedback is announced through a status region.
- The target is at least 44 pixels tall.
These are specific design decisions, not a claim of a complete accessibility audit.
How this change gets accepted
- Propose: explain the repeated user need and why existing controls cannot meet it.
- Review: design and engineering agree labels, states, tokens and keyboard behaviour.
- Validate: check both themes in a real product scenario, including contrast and focus.
- Release: publish code, usage notes and migration guidance together.
This is a sample contribution process for the demo.
A deliberately small contract
Use this button for an immediate action. Use a link for navigation. This demo supports default, hover, focus and disabled states; a production component would also document any loading behaviour and error handling required by its product.
Download the example contract (JSON) · Download the working tokens (CSS)
Read the token strategy →