This is WP Product Talk’s system.
Tokens, then Every Layout, then proximity. Color and type are the tokens. Layout is the primitives. Pieces put those on controls. Pages compose the controls into landing jobs. Then a real page. Same tokens. No second theme.
Color is a job
Primary, paper, ink. Violet carries the brand. A rebrand changes values, not names.
ColorType and layout
One sans family for titles and reading. Washes reach the edge. Copy stays on a column.
TypeThen a real page
The last item is not another specimen. It is a marketing page built from the page jobs.
The siteUse it
<link rel="stylesheet" href="css/cds.css">
That single import pulls in fonts, tokens, base element styles,
layout primitives, and components. Adopting the kit inside a site
that already styles bare tags? Import tokens.css,
layouts.css, and components.css and leave
out base.css, which is the only file that touches
body, headings, links, and code.
What’s in the kit
| File | Role |
|---|---|
DESIGN.md | Canonical contract: front matter holds values, prose holds rules |
css/tokens.css | Palette, type ladder, space scale, radius, shadows, knobs |
css/base.css | Element defaults. The one file you can skip |
css/layouts.css | Stack, Copy, Center, Cluster, Grid, Split |
css/components.css | Buttons, pills, alerts, surfaces, forms, tables, code, prose |
brand.json | This brand’s values. Maintainers run npm run customize after edits |
css/kit.css | These reference pages only. Not part of the system |
Two knobs worth knowing
Button shape and heading font are single variables, so a large part
of the system's personality changes in one line of
tokens.css.
--cds-button-radius: var(--cds-radius); /* squarer than the default pill */
--cds-heading-font: var(--cds-font-body); /* sans headings, no serif voice */