Connecting the design system
How FEWD Studio reads the same globals.css as GenCSS, and what that gets you.
FEWD Studio reads the same globals.css that GenCSS generates.
What that means in practice
A token changed in one place reaches everything built on it. There is no export step between the apps because there is nothing to convert — they are all reading and writing the same plain CSS file.
Connect it in the Globals pane and it is the project’s single source of truth.
The two-layer arrangement
The file is split into primitives and tokens:
- Layer 1 — primitives hold the actual values:
--primary: oklch(…),--space-m: clamp(…). - Layer 2 — tokens point at the primitives:
--color-cta: var(--primary),--padding-m: var(--space-m).
Your project’s CSS should reference Layer 2 only. Remap a token and the theme follows, with no selector edits anywhere.
This is also why tokens are named for their role rather than their appearance.
--color-bg-surface survives a change of palette; --background-grey becomes a
lie the first time the site goes dark.
Generated and user blocks
Sections marked FEWD:* are regenerated by GenCSS on every save. Sections marked
USER:* are preserved.
Anything you add by hand belongs in a USER:* block. Editing a generated block
works right up until the next save, at which point it does not.
There is more on this in Editing a generated globals.css safely.
Where GenCSS runs
GenCSS is its own application. The paint-palette button in the Globals pane bar launches it and hands it the file you have connected; if it is not installed, it offers it.
It used to live inside FEWD Studio as a modal. Splitting it out means the same generator serves FEWD and anything else pointed at the same file, rather than being one app’s private feature.
The styling panel reads these tokens
Every control in the styling panel that takes a length, a colour or a size offers your project’s tokens first.
That is the payoff for having the file: you pick from your own scale rather than typing a number that happens to look right today.
HTML Export
For WordPress work, FEWD Studio exports clean HTML ready to import into Bricks and similar builders — the HTML Export button in the sidebar.
It needs a licence.