One config.
Every section follows.
Tokens define your brand. Blocks are the building components. Patterns are pre-designed sections made from blocks. Together, they form a design system where everything stays consistent — automatically.
How the pieces fit together.
Three layers, one system. Each layer builds on the one before it.
01
Design Tokens
The foundation. Colors, typography, spacing, border radius, shadows — defined once. Every block and pattern reads from these tokens.
Your design system isn't a
Figma file. It's the actual code.
Most design systems live in a document that developers interpret. Spacing gets approximated. Colors drift. Fonts don't match. After a few months, the live site looks nothing like the original design.
RockitWP's design tokens are the actual source of truth. The rendering engine reads the same config you defined. No interpretation. No drift. What you set is what gets rendered — on every page, every section, every device.
Change a color — every button, link, and accent updates
TOKEN CONFIGURATION
Set these once.
Everything follows.
Six token categories control every visual decision across your entire site.
Colors
Grayscale palette + single-letter accent system. One accent color powers the entire site.
FOR AGENCIES
New client. Change tokens. New brand.
The same 260+ patterns work for every client. Swap the color palette, change the fonts, adjust the radius — and the entire library becomes a different brand. No redesigning sections from scratch. Project after project, faster.
Client brand applied in minutes, not days
Your design survives
content editing.
Content editors work within the system you set up. They add content, rearrange
sections, and publish — but they can't change the typography scale, break the
spacing, or go off-brand. The tokens are the guardrail.
Typography is locked
Editors choose heading levels, not font sizes. The type scale enforces consistent hierarchy across every page.
