Common ground: documenting shared actions across Buckholt
Not every design system update is about introducing new components. Sometimes the biggest improvements come from documenting the behaviours that already appear everywhere.
The latest addition to the Buckholt documentation is Common actions — a new guidance page that defines how widely used actions should behave and appear across the platform.
Actions like Add, Delete, Edit, and Cancel show up constantly across products, components, and workflows. When these actions behave differently from one place to another, even small inconsistencies can slow users down or introduce uncertainty. This new page aims to remove that friction by setting clear, shared rules.
Why common actions matter
Many components contain actions, but the meaning of those actions shouldn’t change depending on where they appear. Whether a user is adding something to a list, removing an item from a set, or deleting data entirely, the language, emphasis, and behaviour should feel predictable.
The Common actions guidance brings these expectations together in one place. It clarifies how actions should be labelled, what visual treatments they should use, and when additional safeguards — such as confirmations or warnings — are appropriate.
For example, Delete actions now include documented patterns for low-, moderate-, and high-impact scenarios. This helps teams apply the right level of protection depending on what’s being removed and how difficult it would be to recover.
Clearer distinctions between actions
Another focus of the page is improving the distinction between similar actions that often get mixed up.
Delete permanently removes something, while Remove simply takes an item out of a list without destroying it. Clear resets a field or selection, and Cancel stops the current process entirely.
By defining these differences and pairing them with consistent icons, button styles, and placement guidance, the system helps reduce ambiguity both for designers and for users interacting with the interface.
Supporting predictable workflows
The documentation also covers actions that guide users through tasks, such as Continue, which moves someone forward in a sequence, and Close, which dismisses elements like modals or notifications.
Alongside the action definitions, the page includes guidance for handling errors — ensuring messages are concise, honest, and helpful when something goes wrong.
What this supports
This update is about reinforcing one of the quiet foundations of a good design system: predictability.
By documenting how common actions should work, Buckholt reduces the chances of teams reinventing behaviour in slightly different ways across products. The result is a more consistent experience for users and a clearer set of decisions for the people building interfaces.
No new shiny components this time — just a shared language for the actions that hold everything together.
For more information see the common actions page.
The latest addition to the Buckholt design system documentation isn’t a shiny new component — it’s something more foundational. Layout guidance has now landed, bringing clarity to how pages are structured and how content should be grouped inside them.
This update introduces documented layout patterns for pages and main content, built around a simple, repeatable hierarchy: frames, panes, and panels.
Why layouts needed documenting
As the system has grown, one thing became clear: consistency isn’t just about components, it’s about how those components are arranged. Without shared layout rules, pages can quickly drift into one-off solutions, even when they’re built from the same parts.
The new layout section captures the patterns already being used across Buckholt products and formalises them into something reusable, predictable, and easy to apply.
Page layouts
Eight base page layouts are now documented. Each defines the relationship between header, sidebar, main content, and footer, covering common needs like left or right sidebars, full-width headers, and different footer placements.
All layouts are built using CSS Grid, which means the structure can change without touching markup. The main section is the only required area — everything else is optional and should only be used when it genuinely supports the user’s task.
Inside the main: frames, panes, and panels
Inside the main content area, layouts are built using three nested containers:
- Panels group closely related components.
- Panes organise panels into clear sections.
- Frames wrap panes to control spacing and provide visual separation.
This layered approach creates clear hierarchy, improves scanability, and makes layouts easier to maintain over time. It also reduces the need for custom spacing rules and one-off layout tweaks.
Frames can also introduce visual distinction, such as alternative backgrounds, and may include a single frame header to introduce a section of content.
What this supports
This update is about making page building calmer and more intentional. Clear layout rules reduce decision fatigue, improve consistency, and make it easier for teams to assemble pages without reinventing structure every time.
No flying monkeys, no yellow brick road — just a solid path through layout complexity.
Work on the design system continues with a small set of new components. This update isn’t about big visual changes — it’s about filling in gaps that show up when the system is used day to day.
Three new components have now been added and documented: Collapse, Versa-tile, and Summary-meta.
Collapse
Collapse provides a consistent way to show and hide supporting content. It’s useful when information doesn’t need to be visible all the time, helping keep layouts focused while still giving users control.
Versa-tile
Versa-tile is a flexible card component used to display individual items within a collection. Each tile presents key details about an item and can include item-specific actions, such as edit or delete. Versa-tiles are typically stacked together to create clear, scannable layouts for browsing and managing related content.
Summary-meta
Summary-meta combines an icon block with concise text to present key information at a glance. It’s designed for scannable summaries and quick status checks. A stacked variation is also available, allowing the component to draw more focus when used in prominent positions, such as the centre of a card.
What this update supports
These components aren’t flashy additions — they’re practical ones. Each is designed to reduce repetition, improve consistency, and make it easier to assemble clear interfaces using existing patterns.
As with all recent updates, the focus remains on simple content, predictable behaviour, and documentation that’s easy to scan and apply.
Collapse title
Collapse content, in hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
If you’ve ever worked with WordPress long enough, you’ll know this truth: sometimes things change, whether you asked for them to or not.
Recently, a WordPress update altered how Gutenberg block CSS files are handled. Overnight, components that had been happily styling themselves suddenly weren’t. Nothing in the design system had changed. No tokens were tweaked, no patterns were redesigned — but the site that documents the system needed a bit of attention.
That’s just part of working with tools like WordPress.
WordPress is the platform the design system documentation site is built on. It’s the scaffolding, not the structure. The design system itself — the components, patterns, and guidance — remains solid and unchanged. But when the underlying tool updates, maintenance is sometimes required to keep everything displaying as intended.
Following the update, affected components were reviewed and updated to align with WordPress’s newer approach to loading block styles. These changes ensure that components continue to behave consistently, predictably, and performantly across the site. It’s a good reminder that keeping things running smoothly isn’t always about adding new features — sometimes it’s about making sure existing ones continue to work as expected.
New components
Alongside this maintenance work, progress has also continued on Phase 2 of the design system.
Several new components have now been added and documented, expanding the system’s coverage and flexibility:
- Breadcrumbs, to support clearer navigation and hierarchy
- Tabs, for organising related content within the same context
- Key-value pairs, designed to present structured information clearly across a range of layouts
With the updates complete and new components landing, the design system is in a great place — and ready for what WordPress decides to do next.
Examples
We’ve been giving some extra attention to how interactive elements behave and feel across Buckholt, focusing on buttons, cards, and tags. These are some of the most commonly used components in any interface, and we wanted to make sure they look as clickable as they actually are.
A subtle shift in style
This update introduces a more tactile look to clickable components by enhancing their visual affordance, the way something invites interaction. We’ve increased the border thickness on the bottom edge to create a subtle sense of depth. It’s a small detail, but it gives the impression that buttons, cards, and tags can be pressed in, almost like physical controls.
This approach brings a gentle touch of skeuomorphism to the system, a nod to the days when digital elements took cues from the real world, but with a modern, restrained twist. The result is a cleaner, more approachable feel that helps interactive components stand out clearly against surrounding content.
What’s been updated
- Buttons now appear more grounded and responsive, improving their visibility in dense layouts.
- Clickable and selectable cards have clearer separation from non-clickable cards, making actions easier to spot at a glance.
- Selectable tags now have a defined pressable state, supporting consistency across interactive UI patterns.
Why it matters
Visual clarity and usability are at the heart of every update we make to Buckholt. Improving the contrast between static and interactive elements helps users understand where and how they can take action, without needing extra labels or instructions.
This change also supports better accessibility by reinforcing interaction states through visual hierarchy, not just colour.
Examples
Buckholt v1 marks an exciting step forward for the design system – it’s the first release where everything starts coming together in one place.
Alongside the updated documentation, you’ll now find fully built HTML and CSS for our foundational components, making it easier than ever to design consistent, accessible interfaces across products. This release also introduces styling guidance for colour, typography, iconography, spacing, and more, providing the visual backbone for everything built with Buckholt. It’s a solid foundation to build from, and we’ll be continuing to expand the library with new components, patterns, and web-ready elements in the next releases.
Now, here are the release highlights: