Write like you speak to a thoughtful friend. Prefer short sentences. Avoid jargon, buzzwords, and exclamation points.
Let every element breathe. Hierarchy is built through size and space, not ornament. One accent per view.
Imagery of light, landscape, and quiet scale anchors the brand. Warmth of the natural world, quietness of confidence.
The horizontal lockup is primary: the mark rises diagonally above the final letter, leaves radiating like rays over the horizon of the word. Use the wordmark alone when a second mark would compete on the page (partner logos, photo credits) or when space is tight — email signatures, footer legal, favicon-adjacent moments. The stacked lockup is reserved for centered hero compositions.
Same shape as the primary lockup, tinted with the Horizons palette — the sun takes on golden warmth, the letter reads as a horizon at dawn. Reserve these for editorial moments: cover stories, year-end letters, campaign hero titles. The warmth treatment is a voice, not a workhorse — the primary purple lockup still carries every day.
Seven leaves, seven beats. The mark doubles as a loader when duration is unknown and a determinate indicator when it isn’t — stepping through a form, reading a long document, uploading an asset. Brand presence is progress.
The mark inherits its color from the surrounding text — set the parent’s color and the logo follows. Master vector file available for handoff.
Master vector: Cultura - Icon (final).svg
Coloring: currentColor (set color on parent)Use 500 for brand moments. 600/700 for hover and pressed. 50/100 for surfaces and subtle backgrounds. 800/900 for high-contrast dark UIs.
The ink scale inverts under dark mode — what’s near-white in light becomes near-black in dark, and vice versa — so text and borders flip cleanly when the theme switches.
Four landscape gradients pulled from the savanna — warmth in the foreground, cool in the distance. They support purple rather than compete with it: use them for illustration, mood imagery, section dividers, and quiet surface tints. One horizon per moment, the same way one accent sits per view.
Hover a tile to see its stops. Each palette also ships as a solid version — for type, icons, and UI contexts where a gradient would feel heavy.
Warmth is an accent, not a system. Reserve golden hour for moments that deserve to feel sunlit — a hero line, an editorial callout, a single card on a long page. The hero is still purple; warmth is the light falling on it.
A parchment surface pulled from the daylight palette. Use on cards that carry story, not product UI. Pairs with purple display type.
A thin golden ribbon on the leading edge marks the one thing the reader should not miss. Treat it as you’d treat a primary button: never more than one per view.
Full-bleed gradient tiles work for section breaks, editorial splits, and image placeholders where photography isn’t ready. Keep type weight light; let the gradient carry the mood.
Rubik is Cultura’s display face. Its rounded terminals and geometric core echo the lowercase wordmark, and at medium weight it lands with quiet confidence rather than bravado. Keep it for the top of the visual hierarchy: page heroes, section titles, editorial covers. Inter still carries everything readable.
Space Mono is Cultura’s companion face. Its circular o and even stroke echo the wordmark’s geometry, so switching faces feels like a family resemblance rather than a context switch. Use it anywhere the reader is looking at a value, a key, or literal code — not prose.
.btn-primary {
background: var(--purple-500);
transition: background var(--t-fast) var(--ease-out);
}The top tier of the hierarchy only — page heroes, section titles, editorial covers, pull quotes. Medium (500) is the house weight; drop to 400 for the lightest editorial moments, reach for 600–700 only when a hero truly needs extra presence.
Everything readable: body, subheads, labels, UI chrome, marketing copy. Inter is the default for anything below the display tier; opt out deliberately.
Design tokens, CSS variables, code snippets, hex/RGB/HSL values, keyboard keys, IDs, terminal output, file paths, and tabular numerals where columns should line up.
Use purple on a single element — a heading, a button, or a key visual. Never on all three.
Headings and labels use sentence case. Title Case is reserved for proper names only.
Negative letter-spacing on display sizes; default tracking on body. Let scale create contrast.
24 px gutters on desktop, 16 px on mobile. Content caps at 1120 px for legibility.
Outer margin 96 px. Run running-head, section title, and folio top/bottom as in the logo deck.
Behind content that deserves presence, a gradient expands and contracts in slow, calm breaths. It never asks to be watched — but it's always there, steadying the page and telling the reader there's no rush.
Where the breath holds the room, the wind moves through it. A pale sweep of green drifts across the surface — wind catching the tops of grass, settling, then catching again. The page is still, but never sleeping.
Slower than the grass, heavier than the breath. Warm tones drift like sand reshaping itself under a steady wind — the surface keeps changing, but always quietly. Stillness with a long memory.
Strike · 120 ms — the toggle snap. Micro-interactions, taps, hover flicks, checkbox ticks. Decisive and immediate — the user shouldn’t wait for it.
Fall · 200 ms — the tooltip settle. Menus, tooltips, selects, button state. Long enough to register, short enough to feel unhesitant.
Ripple · 360 ms — the sheet arrival. Modals, drawers, route changes, radiating feedback. Long enough to feel weighty; the ripple curve starts fast and settles slowly.
Default ease-out for any UI that just needs to settle.
Gravity pulling into impact. Use when something is committing to an action.
Quick origin, long quiet tail. Energy radiating outward from a single point.
--ease-out: cubic-bezier(0.2, 0, 0, 1); /* standard UI settle */
--ease-drop: cubic-bezier(0.55, 0, 0.9, 0.2); /* the fall */
--ease-ripple: cubic-bezier(0.16, 1, 0.3, 1); /* the ripple */
--ease-breath: cubic-bezier(0.37, 0, 0.63, 1); /* ambient breath */
--ease-wind: cubic-bezier(0.42, 0, 0.58, 1); /* ambient wind (grass) */
--ease-dune: cubic-bezier(0.45,.05,.55,.95); /* ambient dune (sand) */
--t-fast: 120ms; /* the strike */
--t-base: 200ms; /* the fall */
--t-slow: 360ms; /* the ripple */
--t-dwell: 600ms; /* the pause before acting */
--t-ripple: 1400ms; /* full radiance, origin to edge */
--t-breath: 10000ms; /* one calm breath */
--t-wind: 9000ms; /* one gust through the grass */
--t-dune: 14000ms; /* one drift across the dune */A click is the strike — the moment the drop meets the pool. Concentric rings carry outward from the button using the same curve and duration as the hero’s ripple. A utility class opts any button in without changing its base style.
Two quieter beats live alongside the four: a dwell before an element commits, and a full radiance that reaches from origin to edge. Every motion in the system honors reduced-motion preferences — presence should never require animation.
You can now schedule posts up to 90 days in advance.
Your changes have been published to production.
Your trial ends in 3 days. Review your plan to avoid interruption.
We couldn't process that upload. Try again, or contact support.
Why strategy stalls between the C-suite and delivery — and how to fix it.
The hidden cost of SAFe programmes that skip the human side.
Patterns we see in organisations where IT and the business have drifted apart.
| Project | Owner | Status | Updated |
|---|---|---|---|
| Cultura website | Ryan Mitchinson | Published | 2 days ago |
| Annual report 2026 | Studio team | In review | Yesterday |
| Partner deck | Richard Pearson | Draft | Today |
| Brand guidelines v1 | Ryan Mitchinson | Active | Just now |
Cultura pairs sharp thinking with warm delivery — a consultancy that serves the work, never the other way around.
When a 6,000-person organisation couldn't get a decision made in under six weeks, they called us. Here's how we redesigned the model that was slowing everything down.
Every foreground / background pairing in the core tokens has been computed against both themes. Anything that fails AA body (4.5:1) has been retuned; anything that passes only AA large (3:1) is scoped to large-text or UI-chrome usage.
Ratios computed with the WCAG 2.1 relative-luminance formula. Translucent backgrounds (badges, mood-tile scrim) are first composited onto their canvas before comparison.
Every interactive element shows a 2 px purple halo on keyboard focus, offset by 2 px so it never touches the component edge. Focus never relies on color alone — the ring is paired with a subtle surface lift where the component supports it.
:focus-visible outlines in production.Any element someone can tap, click, or keyboard-activate has a hit area of at least 44 × 44 px, per WCAG 2.5.5. Visual size can be smaller; use padding or ::before spacers to extend the hit region.
.btn-sm) keep the 44 px hit area via vertical padding.aria-label and the 44 px minimum.Every interaction works without a mouse. Custom components (theme toggle, progress demo, ripple buttons) use native elements where possible, with role, aria-pressed, and labeled landmarks only when semantics require it.
tabindex.aria-live where appropriate (progress counts).role="img" and an aria-label; decorative marks use aria-hidden="true".Ambient motion is opt-in for the user. The loader pulse, the ambient breath, and the button ripple all honor prefers-reduced-motion: reduce — falling back to a static dim state so the signal of “loading” or “pressed” remains without sweeping animation.
Success, warning, danger, and info each pair their hue with an icon, a label, and a position in the interface. A user with deuteranopia or protanopia gets the same signal from the icon and wording as from the hue.
The grid uses rem-based spacing so a 200% browser zoom reflows without breaking layout. Body line-height sits at 1.5; line-length is capped around 70 characters.
The one-accent rule isn’t just visual — it reduces decision load. Error messages use plain language, tell the user what happened, and offer a clear next step. No jargon, no buzzwords, no exclamation points.
44 px minimum targets; generous spacing between actions; drag interactions always have a keyboard equivalent. Timeouts extendable or disableable.
Every image carries alt text that describes the purpose, not the decoration. The laurel mark is labeled “Cultura” when it stands for the brand, and aria-hidden when it’s pure ornament beside the wordmark.
Spacing uses logical properties (margin-inline, padding-block) where they matter, so the system reflows cleanly for RTL languages. Type sets are chosen with multi-script fallback stacks.
Before a new component leaves design, run through this list. It takes about ten minutes and catches most issues before engineering sees the file.
aria-label.:focus-visible twin.prefers-reduced-motion.All components below map to standard Ghost theme structures. Use {{#foreach posts}} for post loops, {{navigation}} for nav, and {{#is "tag"}} helpers for tag filtering. CSS tokens from the tokens reference can be dropped into any Ghost theme's screen.css.
Transparent — floats above each page's background colour. The horizontal wordmark lockup is used throughout. On dark surfaces the wordmark and nav links render in white; on light surfaces they switch to the primary purple and dark ink. Apply .ghost-header--light on any page with a pale background.
Dark background
Light background
partials/site-header.hbs Use {{navigation}} to render nav links from Ghost Admin → Navigation. Add .ghost-header--light to the <header> on pages with a pale background. The subscribe button can be a {{#if @site.members_signup_redirect}} conditional pointing to the Ghost Portal.The leading editorial moment on the homepage. Shown only when a post is marked "Featured" in Ghost. Uses the deep-purple canvas with a warm golden glow.
Most transformation programmes fail not because the strategy is wrong, but because no one has designed the operating model that connects intent to execution.
index.hbs Wrap in {{#foreach posts limit="1" filter="featured:true"}}. Access {{title}}, {{excerpt}}, {{reading_time}}, and {{url}} inside the loop. Feature image: {{img_url feature_image size="l"}}.The standard unit for listing articles. Each card carries a feature image, category tag, title, excerpt, and author byline. Three-column on desktop, one-column on mobile.
The design looks right on paper. Here's why it breaks down the moment it meets the organisation.
Culture isn't what organisations say they believe — it's what they reward, tolerate, and repeat every day.
When IT and the business have drifted apart, the symptoms appear long before the post-mortem.
partials/post-card.hbs Use {{#foreach posts}} with {{tags separator=" "}} for the tag pill, {{excerpt words="25"}}, {{primary_author.name}}, {{date published_at format="D MMM"}}, and {{reading_time}}. Feature image: {{img_url feature_image size="m"}}.A horizontal pill strip lets readers browse by topic. The active tag uses the brand purple. In Ghost, each pill links to its tag archive page via {{url}}.
partials/tag-filter.hbs Use {{#get "tags" limit="all"}} inside a {{#foreach tags}} loop. Each tag renders as an anchor link to its archive — no JavaScript required. Mark the active tag by matching {{slug}} against the current page's tag context.A full-width call-to-action for readers to join as members. Conditionally hidden for existing members using Ghost's {{#unless @member}} helper.
partials/membership-banner.hbs Wrap in {{#unless @member}} so existing members don't see it. CTA button: href="#/portal/signup" with data-portal="signup". Manage pricing in Ghost Admin → Tiers.The footer carries the brand, a short tagline, an email subscribe input, and two columns of links. Uses deep purple to close the page with the same visual weight as the header.
partials/site-footer.hbs Secondary nav via {{navigation type="secondary"}}. Subscribe form action: {{@site.url}}/members/api/send-magic-link/. Copyright year: {{date format="YYYY"}}.Dynamic cards an author inserts into a post via the Koenig editor. Each one below is a visual reference — implementations live under assets/built/card-*.css in the theme and are rendered by Ghost's built-in card handlers.
Banner image, kicker, title, and lede bound to the default content column. The everyday post hero.
Why a 12-step sign-off for a £2,000 decision is really a symptom of an operating model that has drifted out of alignment with the work it's meant to support.
card-header Koenig "Header" card, regular width. The background image is set via the card's image picker and extracted by Ghost as a style="background-image:…" on .kg-header-card.Extends past the default content column on desktop. Use for a more cinematic, editorial feel without going full-bleed.
Three years, four release trains, one giant retrospective. What we learned about confusing ceremony for transformation.
card-header (wide) Same card with the Koenig wide size option. Theme handles the break-out via .kg-width-wide on the outer figure element.Edge-to-edge image with the title overlaid. Reserved for landing pages and the occasional marquee post.
card-header (full) Full size option, .kg-width-full. Title and subheading render inside the card, overlaid on the image — theme adds the gradient scrim for AA contrast against any image.Image on one side, copy on the other. Good for case studies that need a distinct subject photo without overwhelming the page.
A redesign of the decision rights map, rolled out in eight weeks without touching the org chart.
ghost/schemas/headerSplit.js) or as a post-level <div class="kg-card kg-header-split"> in the editor's HTML card. Stacks to single column under 900 px.Side by side for paired photos — before/after, two angles of the same subject, or facing quotes.
One hero plus two supporting thumbnails. Good for a case-study lead image with two close-up details.
A 2×2 grid. The default for workshop documentation and project recaps.
Three-column grid, fills in rows. Ghost auto-balances rows to 3 per row and bumps wider tiles at the ends.
card-gallery Koenig gallery card. Ghost renders rows with .kg-gallery-row; images get .kg-gallery-image. Aspect ratios are preserved — the theme only sets max-height and gap.A single image with an optional italic caption. Supports the same regular/wide/full size options as the Hero.
card-image Koenig image card. Caption supports inline markdown (bold, italic, links). Image width honours the data-kg-card-width attribute.A short rule that marks a section break inside a long post. Anchored by purple dots on each end to feel considered rather than a raw <hr>.
card-hr Koenig horizontal rule card. Theme replaces the default <hr> with the dot-ended rule via .kg-card-hr.A centred call-to-action button an author can drop into the flow of a post. Ships with solid and outline variants.
card-button Style is switched via the Koenig colour picker; theme maps --color-primary on the card element to either filled or outline.A rich link preview. Title, description, site favicon, and a thumbnail — pulled from the target page's Open Graph tags when the URL is pasted.
Matthew Skelton and Manuel Pais on stream-aligned, platform, enabling, and complicated-subsystem teams — the four archetypes that underpin most modern operating-model work.
card-bookmark Koenig fetches OG metadata server-side and renders it as a .kg-bookmark-card. Favicon lives in .kg-bookmark-icon, thumb in .kg-bookmark-thumbnail.An aside that lifts a definition, warning, or note out of the main flow. Five tones, each inheriting a status colour.
card-callout Background-colour picker in Koenig maps to the --note / --info / --warn / --danger / --success modifiers. Emoji is author-chosen via the Koenig emoji picker.An inline email-capture block for free-tier membership. Posts the email to Ghost's magic-link endpoint and starts a member session.
Subscribe to get every new Cultura insight in your inbox. Free, and no unnecessary follow-ups.
card-signup Form posts to {{@site.url}}/members/api/send-magic-link/. The {{#unless @member}} helper hides the whole block once a reader is already signed in.A soft gate that reveals the opening of a members-only post to public readers, then fades into a membership CTA.
The decision-rights map is the single most abused artefact in modern operating-model work. Most teams draw one, frame it, and never revisit it — at which point it stops describing how decisions are actually made and starts describing how they wish they were made.
The truth is that a decision-rights map is only useful if it's treated as a living thing. We've run the exercise with more than sixty leadership teams in the last three years, and the pattern is consistent …
Join to read Cultura's full archive — free, forever.
card-public-preview Content above the card renders for everyone; content below is wrapped in {{#unless @member}} … {{/unless}}. The CTA block is only shown to anonymous readers.Collapsed-by-default accordion for FAQs, method footnotes, or appendix-like content. Uses native <details>/<summary> so it works without JavaScript.
card-toggle Renders as a <details> pair; the Koenig "heading" field becomes <summary>, the body is the collapsed content. Native element = no JS required.An uploaded video with a still thumbnail and a centred play button. Tapping swaps in the HTML5 player.
card-video Self-hosted video via Ghost's media upload. The thumbnail is a <img> over a hidden <video>; Koenig's player handler swaps them on play.A full-colour promo block for conversion moments — book a call, request a report, claim a pilot slot. Larger and more visual than the plain Button card.
card-cta Newer Koenig card (Ghost 5.68+). Supports a primary + secondary CTA, author-configurable background colour, and an optional trailing arrow icon on the ghost-button variant.These guidelines apply to Word (.docx), Google Docs, and designed PDFs. When using the system in documents, prioritise legibility over decoration — the design system's role here is to ensure documents feel consistently Cultura, not to reproduce the full richness of the web experience.
A one- to two-page document pitched to contributors or commissioners. Light formatting — wordmark, headline, and body text only. No heavy colour blocks.
Annual or quarterly report for stakeholders and members. Structured with clear sections, pull quotes, and data tables. Purple headers, white body, warm paper callouts.
A formal letter to members from the editorial team. Plain layout with wordmark header, single-column body in Inter, and a purple signature rule.
Documents use a simplified scale compared to the web. Rubik handles all headings; Inter handles body and UI text. Always set body copy in Ink 900 on white — never on a coloured background for long-form reading.
Use colour sparingly in documents. Reserve brand purple for headings, dividers, and pull-quote rules. Avoid full-bleed coloured pages in print-intended documents — ink cost and legibility both suffer.
#e5e5e5)These guidelines apply to PowerPoint (.pptx), Keynote, and Google Slides. Presentations use larger type, more generous white space, and bolder colour than documents — every slide should be readable from six metres away on a projected screen.
Three layouts cover the majority of presentation needs. All slides use a 16:9 canvas (33.87 × 19.05 cm in PowerPoint). The 8px brand-purple rule at the top is the consistent anchor across all layouts.
Sizes below are for a standard 16:9 slide at 1920 × 1080. Never use body text below 18pt on a slide — it becomes unreadable on most projectors and at distance.
Presentations allow more expressive colour than documents. The Horizons palette can appear as full-bleed image backgrounds or data-vis fills. Always ensure text on coloured backgrounds meets WCAG AA (4.5:1 body, 3:1 large text).