Themes & plugins Intro
What a design token actually is
A swatch on a mockup and a design token can hold the same value and still be different things. The difference is the name — and the name…
Technote
Planting a design system in WordPress
Stop re-deciding colours and spacing on every page — putting design tokens into a WordPress theme in a way editors cannot accidentally undo.
8 articles
Themes & plugins Intro
Deriving a full colour scale from one brand colour
One brand colour cannot draw an interface. Derive hover, pressed, tint and disabled states by rule and you stop picking new colours on every screen.
Themes & plugins Intro
A spacing scale, and what one exception costs
Eyeballing spacing puts 12, 13, 14 and 15 on the same screen. A scale makes the decision faster and tidies the layout for free.
Themes & plugins Practical
Putting tokens into the theme with CSS custom properties
Declare the tokens in one :root block, have components reference nothing else, and the colour and spacing of the whole site move from a single file.
Themes & plugins Practical
What theme.json does: handing your palette to the block editor
theme.json is not a stylesheet, it is a channel. It hands your palette to the editing screen so editors choose from your system instead of a free colour…
Themes & plugins Practical
Taking the colour picker away from editors
Leave the picker open and in six months the site carries colours a shade off the brand. That is not the editor's fault — the system asked.
Themes & plugins Advanced
Vendor tokens, your tokens, and one bridge file
Modern themes arrive with hundreds of their own tokens. Edit them and updates erase your work; ignore them and the screen splits into two systems. The answer is…
Development workflow Advanced
Documentation that lives with the code
A design document kept elsewhere diverges from the code within two months. What keeps documentation alive is location, not length — and what belongs in it is the…