How-tos
Practical step-by-step guides for the most common design and engineering tasks. Each how-to links back to the relevant foundations, components, and patterns.
How to design for dark mode
Apply the Sitka colour token set correctly in both light and dark contexts. Understand surface stepping, elevation without shadows, and contrast validation.
How to ensure colour is accessible
Check that every colour pairing in your designs meets WCAG 2.1 AA. Covers validated token pairings, testing tools, and what to do when the palette doesn't meet the threshold.
How to write clear interface copy
Apply the Sitka writing guidelines to button labels, error messages, empty states, and tooltips. Practical before/after examples for the most common UI copy failures.
How to visualise data accessibly
Choose the right chart type, pick from the accessible series palette, and mark up SVG charts so they work for keyboard and screen-reader users.
How to design an onboarding flow
Structure a wizard, decide what to ask and what to defer, write clear step copy, and give users a satisfying completion moment — all using the Sitka onboarding pattern.