A Real CSS Design System.
Built Into Your WordPress.
GenCSS for WordPress brings professional CSS custom properties, fluid typography, and a token-based design system directly into your page builder workflow. No framework lock-in. No class soup. Just clean, ownable CSS that stays when the plugin leaves.
Works with your favourite WordPress builders
Bricks Builder
Breakdance
Etch
Page builders give you styling controls.
GenCSS gives you a design system.
Every major page builder lets you set colours, fonts, and spacing — but they store those decisions in scattered settings locked inside their own panels. GenCSS writes a single professional CSS file that your builders consume as CSS custom properties. Change one token, update everything.
OKLCH Colour Palettes
Generate perceptually uniform colour scales with automatic light and dark mode. Set your hue once — GenCSS writes every shade as a CSS custom property your builder can reference directly.
Fluid Typography Scale
A ratio-driven type scale that flows from mobile to desktop using clamp() — no media queries needed. Every size from --text-xxs to --text-xxxl is available anywhere in your site.
Proportional Spacing System
Every spacing value — padding, gap, margin — derives from a single base unit and ratio. Change the base and the whole system rescales. Use var(--space-m) in any custom CSS block and it simply works.
Automatic Dark Mode
GenCSS generates a two-layer token system. Semantic tokens like --background, --color, and --surface switch automatically between light and dark via a single data attribute. No JavaScript required.
Component Foundations
Buttons, form inputs, cards, link states — GenCSS generates pre-built component CSS built on top of your token system. Consistent design from global to component, all in one file.
No Lock-In, Ever
GenCSS outputs a plain CSS file you own. Deactivate the plugin — your design system keeps working. No runtime, no proprietary syntax, no dependency. The CSS belongs to you and your client.
How GenCSS for WordPress works
-
Install the plugin
Purchase GenCSS and install the WordPress plugin on your site. It integrates with your theme's existing CSS file or a dedicated custom styles file — whichever fits your workflow.
-
Configure your design system
Choose your brand colours, type scale ratio, base spacing unit, and component styles through GenCSS's visual interface — directly inside WordPress. Every decision maps to a CSS custom property.
-
Use your tokens everywhere
Your generated tokens —
var(--color-primary),var(--text-l),var(--space-m)— are available in every page builder, custom CSS block, and child theme across your entire WordPress site.
The right CSS framework for WordPress
Most WordPress CSS solutions are either too opinionated or too loose. GenCSS sits in the right place — a structured, professional token system that stays out of your HTML and works with any builder.
- CSS custom properties any builder can read
- Token system lives in your CSS file, not the plugin
- Works in Bricks, Breakdance, Etch, and any builder
- No class names in your HTML — pure semantic CSS
- Remove the plugin, the CSS keeps working
- Fluid typography and spacing built in
- Design decisions live in HTML class names
- Deeply coupled to their own ecosystems
- Poor fit for page builder panels and variable pickers
- CSS bloat without a build pipeline and purge step
- Remove the framework and the site breaks
- Not designed for WordPress-native workflows
- Time-consuming to write and maintain
- No systematic type or spacing scale ratios
- Dark mode requires significant extra work
- Values drift out of sync across the codebase
- No visual preview of the system
- At least the CSS belongs to you
The CSS design system your
WordPress site has been missing.
Get GenCSS for WordPress 14-day refund guarantee. No questions asked.