Connecting the design system

FEWD Studio reads the same globals.css that GenCSS generates and BooshDESIGN draws against.

What that means in practice

A token changed in one place reaches everything built on it. There is no export step between the three apps because there is nothing to convert — they are all reading and writing the same plain CSS file.

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.

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.

Bricks export

For WordPress work, FEWD Studio can export to Bricks.