3 weeks ā 3 hours
Campaign launch time, now owned end to end by marketing
40Q Atomic Block System
A governed Gutenberg component library, mapped to your design system and compiled into the theme. Every layout choice an editor can make is one we shipped on purpose. Everything else is not in the interface.
How the system works
Page builders hand editors infinite freedom and return design drift and heavy pages. Locked templates hand them nothing and return a ticket queue. A block system is the third answer.
We read your Figma files, identify which patterns actually repeat, and settle the list with your team before building. Twenty to forty blocks covers most enterprise sites. This one runs on 48.
An editor picks a section background from a dropdown of 17 defined values and vertical padding from 5 steps. There is no color picker and no custom font size field, because theme.json switches them off.
Colors, type scale and spacing exist as tokens generated from the same Tailwind configuration the components compile against, and theme.json tracks the Figma system instead of restating it.
Buttons, links, icons, labels and form inputs exist as components in their own right, each with its hover, active and disabled variants defined. Blocks compose those pieces rather than restyling them, so the same button behaves identically inside a hero, a card and a form.
Blocks store attributes, not HTML. The save function returns null and PHP renders the output at request time. Edit a template and every page using that block updates, with no bulk re-save and no block validation errors after a redesign.
Inner components declare which parent they belong to, so an FAQ item cannot be dropped outside an FAQ block and a column cannot escape its grid. The invalid arrangement is never offered.
Contrast pairing, heading level and keyboard behavior are settled once, inside the block. Sections marked dark switch their text treatment automatically. Our accessibility capability covers the testing behind it.
Proof
Ueno Bank is Paraguay’s leading digital bank. 40Q moved it off Liferay onto WordPress VIP and built the block system as its no-code editorial layer, so marketing could ship campaigns across LATAM without booking engineering time. Brand consistency across those properties is now enforced by the library, not by review.
Campaign launch time, now owned end to end by marketing
Developer dependency once the block system replaced custom page work
Session duration across the new templates, measured in analytics
How we deliver it
The inventory is approved before the first component is written, every block is tested on its own before it enters a template, and the handover includes what a marketing team needs to actually use it.
Block names stay identical in Figma, in the repository and in the documentation, so a conversation about the Hero block means the same thing to all three teams. Naming drift is cheap to prevent and expensive to fix later.
Each block is verified on its own across breakpoints, then inside real templates. Keyboard navigation and screen reader behavior are checked per component, so accessibility becomes a property of the library rather than a page-by-page audit.
Page patterns and templates give marketing a starting point instead of an empty canvas, and handover includes written guides and recorded walkthroughs. A system nobody was taught to use turns straight back into a ticket queue.
Worth reading even if you never hire us.
Related insights
Publishing speed, developer dependency, and what changes when marketing owns the page.
Mar 1, 2026
WordPress
Mar 20, 2026
WordPress
Feb 21, 2026
WordPress
Take the next step
Send us your current block inventory, or a link to a page your marketing team keeps asking developers to change. We will tell you where the system is working against them.