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.
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 */
--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 */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.
The global navigation bar sits above all content. Uses the deep purple (--purple-800) to anchor the page and contains the wordmark, primary nav links, and a membership CTA.
partials/site-header.hbs Use {{navigation}} to render nav links from Ghost Admin → Navigation. 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"}}.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).