{"id":11,"date":"2026-08-24T09:59:55","date_gmt":"2026-08-24T09:59:55","guid":{"rendered":"https:\/\/oxyum.pro\/index.php\/variables\/"},"modified":"2026-09-14T06:41:54","modified_gmt":"2026-09-14T06:41:54","slug":"variables","status":"publish","type":"page","link":"https:\/\/oxyum.pro\/index.php\/features\/variables\/","title":{"rendered":"Variables"},"content":{"rendered":"

Variables<\/p>

Change it once. Change it everywhere.<\/span><\/h1>

Colour, type and spacing defined as real CSS custom properties, referenced by every page that needs them.<\/p>

Get it now<\/a><\/div>
See all features<\/a><\/div><\/div><\/div>

A rebrand used to mean a week of find-and-replace and a fortnight of finding the bits I missed. Now it is an afternoon and I trust the result.<\/em><\/p>

Ines Ferreira<\/span>Design systems consultant<\/span><\/div><\/div><\/div>

One source of truth for the whole site<\/h2>

Variables are standard custom properties, not a proprietary wrapper. Edit a value and every page, component and template referencing it updates in the same moment.<\/p><\/div><\/div>

Features<\/p>

Everything in this toolset<\/h2><\/div>
\u25cd<\/span>

Colour, defined once<\/h3>

Brand colours live in one place and get referenced everywhere, including hover states and gradients.<\/p><\/div>

Aa<\/span>

A type scale that holds<\/h3>

Families, sizes, weights and line heights as tokens, so headings stay in proportion at every breakpoint.<\/p><\/div>

\u2194<\/span>

Spacing with a rhythm<\/h3>

One scale for padding and gaps means the hero and the footer feel like they belong to the same site.<\/p><\/div>

\u25d1<\/span>

Light and dark from one set<\/h3>

Swap values under a media query or a class and the entire interface follows without duplicated styles.<\/p><\/div>

{}<\/span>

Nothing proprietary<\/h3>

They compile to plain CSS custom properties. Readable, overridable, and yours to take elsewhere.<\/p><\/div>

\u21c4<\/span>

Portable between projects<\/h3>

Export a token set and start the next build already on your design system.<\/p><\/div><\/div><\/div>

With your agent<\/p>

One edit, not forty-one<\/h2>

Because every element points at the same token, a brand change is a single edit rather than a sweep through the whole site hoping you caught it all.<\/p><\/div>\n

ferreira.systems<\/div>
You<\/span>Our green reads too cold. Warm it up a little.<\/div>
Oxyum<\/span>
updating the palette<\/div>
Adjusted the token itself, so everything referencing it moved at once.<\/div>