Style it, from tokens to motion
The same page, given a design system. Tokens first, then a layout that holds at any width, one component with every state, and motion that respects a preference. The markup does not change — this is the stylesheet, and every check reads what the browser computed rather than what you typed.
Builds on CSS
What you end up with
- A token layer: colour, spacing, radius and a type scale defined once and used everywhere.
- A page that is laid out with grid, holds at 360px and never scrolls sideways.
- A button with three tones, a hover, a real focus ring and a disabled state.
- A dark theme that is one attribute on the root, with no component aware of it.
- Motion with a reason — and a version of the page for people who asked for less of it.
-
Start with the decisions, not the components. Everything below this step reads these variables — which is why a theme, later, is four lines instead of a rewrite.
Not finished yet
-
Two tools, used for what each is good at: grid for the two-dimensional pieces — the page, the product, the cards — and flexbox for the one-dimensional rows. The container is one line and it is the line that stops the page scrolling sideways on a phone.
Not finished yet
-
A component is a base class plus variants, not five unrelated rules. The state everyone forgets is focus: remove the outline without replacing it and the page becomes unusable with a keyboard, which is most people at some point.
Not finished yet
-
The checks here build a copy of your page in a 360 pixel frame and measure it there. Nothing is emulated: it is your stylesheet, at that width, with the browser doing the work.
Not finished yet
-
This is where the tokens pay for themselves: the dark theme is a second
:rootblock and nothing else in the file changes. The motion is the same argument in reverse — one rule at the end turns all of it off for anyone who asked for less.Not finished yet
Last step — finish it and the build is yours.
When it is finished