GROUNDWORK
Groundwork CSS
The parts I kept rewriting from scratch: buttons, cards, navigation, forms, whole sections of a page. Copy the one you want, paste it, and change a few colour variables when you want it to look like yours.
HTML and CSS, all the way down. No React, no Vue, nothing to hydrate. Whatever you build with stays your choice.
Not one media query in the component layer. Sizes interpolate with clamp() and grids reflow with auto-fit, so a part works out its own size from the column it lands in.
The type scale is in cqi rather than vw, so a card in a 280px sidebar sets itself for the sidebar and not for your monitor.
There is no blue in here. There is an accent, a rule and the steps of ink. Change those and the rest follows.
A theme is a block of variable overrides, so it works on a subtree as well as on a whole document. The two blocks below carry identical classes. The one on the right sits inside an element that redefines four --ds-* values.
DEFAULT
The shipped theme, reading the values in themes/portfolio-dark.css.
RETHEMED
Four variables changed inline. No rebuild, and no class here that the block beside it does not also have.
Atoms and primitives hold from 200px, sections and modules from 280px — a 320px phone minus its gutters. A check runs on every build so those two numbers stay true.
Press EDIT under the first example on any page and the source becomes an editor. Type into it and the demo above redraws as you go. RESET puts it back; COPY hands you whatever is there now.
No iframe and no sandbox. The page already has the stylesheet loaded, so the preview is your fragment put back in the same box. Nothing is saved or sent anywhere.