Design tokens & components

A step of the Cloud application tree on Gradus, in the Frontend area: Second app, UI, browser tests.

Put colours, type and spacing into tokens with a light and a dark theme, and build the few components the journey needs from them.

Usually comes after: The first journey in the browser.

Leads to: Accessibility pass.

Prompt for your AI assistant

Read the frontend decision record in docs/decisions and the screens of the first journey. Collect every colour, font size, spacing and radius the screens use into one set of design tokens as CSS custom properties or the framework's equivalent, with a light theme and a dark theme that follows the system setting and that the user can override. Check the contrast of every text and background pair in both themes against WCAG AA. Build the five or so components the journey repeats, such as button, field, card, dialog and notice, from the tokens alone, replace the copies in the screens with them and document the tokens and components in docs/.

This is https://gradus.kazet.blog/tree/cloud-application/step/design-tokens as plain HTML. In a browser the page also lets you mark the step forged and copy a message for your AI assistant.