Category: Web Design

  • Designing Fintech Interfaces for UK Regulatory Compliance: FCA Rules Every Product Designer Should Know

    Designing Fintech Interfaces for UK Regulatory Compliance: FCA Rules Every Product Designer Should Know

    There is a version of product design that lives entirely in the aesthetic layer: beautiful gradients, satisfying micro-interactions, typography that makes you feel something. And then there is fintech UX design compliance, which lives in a much more interesting (and considerably more stressful) neighbourhood. In the UK, the Financial Conduct Authority has made it very clear that how you design a financial product is no longer a purely creative decision. It is a regulated one.

    The FCA’s Consumer Duty rules, which came into full force in 2023 and have been actively enforced since, essentially bake good UX into law. If your interface obscures fees, buries risk warnings, or nudges users towards products that are not in their best interests, that is not just a design flaw. That is a compliance failure. For product designers working on UK fintech products in 2026, understanding this regulatory context is not optional. It is part of the job description.

    Product designer reviewing fintech UX design compliance on mobile interface screens in a London office
    Product designer reviewing fintech UX design compliance on mobile interface screens in a London office

    What the FCA Consumer Duty Actually Means for UX Designers

    The FCA’s Consumer Duty framework introduced four outcome areas that financial firms must demonstrate: products and services, price and value, consumer understanding, and consumer support. Each of those maps directly onto design decisions. Consumer understanding, in particular, is where the design team lives.

    The FCA is explicit that firms must ensure communications are understood, not merely provided. That is a significant shift. It means a modal dialogue crammed with 800 words of legal copy does not discharge your regulatory obligation. It just creates evidence that you tried and failed. The regulator expects firms to test comprehension, iterate on clarity, and document the process. If you want to read the full framework, the FCA’s Consumer Duty guidance is dense but worth the effort.

    For designers, this translates into some very concrete constraints. Risk warnings must be legible at the point of decision, not buried in a footer. Fee structures must be presented before a user commits, not revealed in an email receipt. And nudge patterns that steer users towards higher-margin products must be demonstrably in the customer’s interest, not just the firm’s.

    Financial Promotion Rules and What They Mean for UI Copy

    Separate from Consumer Duty but equally relevant is the FCA’s financial promotions regime. Any communication that is an invitation or inducement to engage in financial activity must be fair, clear, and not misleading. That includes the copy on your onboarding screens, your push notifications, and yes, even those little celebratory animations when a user hits a savings goal.

    The practical implication for fintech UX design compliance is that your content design team and your legal team need to be in the same room, or at minimum the same Figma file. Headlines like “Earn 5% on your savings” need qualification. Risk warnings on investment products need to meet the FCA’s prescribed prominence rules, which specify minimum font sizes and contrast ratios relative to surrounding promotional content.

    This is where fintech diverges sharply from other product verticals. A consumer app selling gym memberships can lean on persuasion patterns freely. A trading app cannot use the same playbook without risking enforcement action.

    Close-up of smartphone showing fintech UX design compliance warning text in a banking app interface
    Close-up of smartphone showing fintech UX design compliance warning text in a banking app interface

    How Monzo, Starling, and Revolut Handle This in Practice

    The three most prominent UK challenger banks handle compliance UX in noticeably different ways, and studying their approaches is genuinely instructive.

    Monzo has long been the posterchild for plain-English financial communication. Their overdraft flow, for example, presents the daily fee in pence before a user activates the facility, shown in a large, unambiguous numeral rather than buried in a percentage APR calculation. They also use a colour system that clearly distinguishes between informational states and warning states, making it harder to accidentally miss a risk notice. This is not accidental; it reflects deliberate fintech UX design compliance thinking embedded in their design system.

    Starling takes a slightly more clinical approach. Their investment and savings product flows use a stepped disclosure model: each screen introduces one concept, confirms understanding, then advances. It is slower, and some users find it friction-heavy, but from a regulatory standpoint it creates a clear audit trail of informed consent. Starling also applies consistent typographic hierarchy to risk warnings, using the same visual weight as primary action copy rather than relegating warnings to a smaller grey typeface beneath the CTA.

    Revolut’s approach is more interesting to scrutinise, particularly in their crypto and stock trading features. Their disclaimers appear in full before a first trade and are summarised inline on repeat visits. This progressive disclosure model threads a needle between regulatory obligation and user experience, avoiding the pattern of warning fatigue whilst still meeting FCA prominence requirements. It is clever, though it has drawn some attention from the regulator on specific product categories in the past.

    Dark Patterns Are Specifically on the FCA’s Radar

    The FCA published guidance in 2024 explicitly calling out dark patterns in financial services interfaces. Pre-ticked consent boxes, hard-to-cancel subscriptions, and confirmshaming language on opt-out screens are all cited as potential Consumer Duty breaches. The regulator’s definition of a dark pattern in this context is broadly consistent with the European Data Protection Board’s definition but applied through a financial harm lens.

    For product designers, this means doing a proper dark pattern audit is no longer just an ethical nicety. It is a compliance audit. Tools like the Deceptive Design Pattern Checker can help at the component level, but the real work is in user journey mapping with the question: does this flow serve the user’s financial interests, or ours?

    Interestingly, this regulatory pressure is pushing fintech firms towards something that resembles good business ethics anyway. Firms building a genuine sustainability strategy around long-term customer relationships tend to find that FCA-compliant UX and commercially successful UX are not actually in tension; customers who feel respected and informed tend to stay and spend more.

    Building Compliance Into Your Design System From Day One

    The most common mistake I see in fintech product teams is treating regulatory compliance as a final-stage review process. Legal checks the screens before launch, red-lines three things, the designers groan, and everyone ships something that satisfies neither the regulator nor the user.

    The smarter approach is to build compliance tokens directly into your design system. Create a dedicated risk-disclosure text style with the correct contrast ratio and minimum size baked in. Build a standard warning component that cannot be resized below the FCA’s prominence threshold. Define a colour token specifically for financial risk states that sits outside your brand palette so it cannot be overridden by a well-meaning designer chasing aesthetic consistency.

    Document your rationale. The FCA increasingly expects firms to evidence that their design decisions were made with consumer outcomes in mind. A Figma annotation or a brief design decision record noting “risk warning meets FCA prominence guidelines” is not bureaucratic overhead. It is a defensible paper trail.

    Fintech UX design compliance is one of the few areas where being a nerd about the rules genuinely pays off. The designers who understand the regulatory layer, who can read an FCA policy statement and translate it into component-level decisions, are the ones building products that can actually survive a supervisory review. And in 2026, with Consumer Duty enforcement moving into its active monitoring phase, that is a skill worth having.

    Frequently Asked Questions

    What is FCA Consumer Duty and how does it affect UX design?

    The FCA’s Consumer Duty framework requires financial firms to demonstrate that their products deliver good outcomes for customers, including in the area of consumer understanding. For UX designers, this means interfaces must present fees, risks, and terms clearly and comprehensibly, not just make them technically available. Poor information hierarchy or deliberate obscuration can constitute a compliance failure.

    Do risk warnings need to meet specific visual design requirements under FCA rules?

    Yes. FCA financial promotion rules specify that risk warnings must be given appropriate prominence relative to the promotional content they accompany. In practice, this means risk copy must not be significantly smaller, lower-contrast, or less visually weighted than the positive claim it qualifies. Designers should treat this as a component-level constraint built into their design system.

    Are dark patterns in fintech interfaces illegal in the UK?

    Not automatically illegal, but the FCA has explicitly identified dark patterns as potential breaches of Consumer Duty, which carries significant regulatory consequences including fines and enforcement action. Pre-ticked boxes, hidden cancellation flows, and manipulative opt-out language are specifically flagged in FCA guidance published in 2024.

    How do Monzo and Starling differ in their approach to regulatory UX compliance?

    Monzo tends to use plain-English, single-figure fee presentations at key decision points, with a clear visual distinction between informational and warning states. Starling uses a stepped disclosure model that introduces one concept per screen, creating a clearer audit trail of informed consent. Both approaches are designed to satisfy Consumer Duty’s consumer understanding outcome.

    Should product designers in fintech be involved in legal and compliance reviews?

    Absolutely, and increasingly this is expected rather than optional. The FCA wants firms to evidence that design decisions were made with consumer outcomes in mind, which means designers need to understand the regulatory rationale behind copy and interface constraints, not just receive red-lined screen notes from legal. Building compliance into design systems from the start is significantly more efficient than retrospective review.

  • CSS Grid vs Flexbox in 2026: Which Layout System Should You Actually Use?

    CSS Grid vs Flexbox in 2026: Which Layout System Should You Actually Use?

    Right, let’s settle this properly. The CSS Grid vs Flexbox 2026 debate still surfaces in Slack channels and code reviews on a daily basis, and honestly the confusion is understandable. Both layout systems are powerful. Both are now universally supported across modern browsers. And both, if you use them wrong, will leave you wrestling with alignment bugs at 11pm whilst questioning your career choices. The good news: there is a logical framework for choosing between them, and once it clicks, it genuinely changes how you architect layouts.

    The short version: Flexbox is one-dimensional, Grid is two-dimensional. That single sentence contains about 80% of the decision tree. But the remaining 20% is where things get interesting, so let’s dig in properly.

    Developer's desk with code editor showing CSS Grid vs Flexbox 2026 layout patterns on screen
    Developer's desk with code editor showing CSS Grid vs Flexbox 2026 layout patterns on screen

    What Flexbox Actually Does Well

    Flexbox was designed to distribute space along a single axis, either horizontally or vertically. It excels at aligning items inside a container when you don’t know exactly how many items there will be or how big they’ll be. Navigation bars, button groups, card footers, centering a single element in its container, distributing tags in a pill list. These are all Flexbox’s natural habitat.

    Here’s the classic pattern everyone has written at least forty times:

    .nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

    Crisp, readable, does exactly what you expect. The gap property (finally at 97%+ browser support as of 2026, including all Edge versions) removes the old margin hack workarounds entirely. Flexbox is also incredibly intuitive for responsive component-level work because flex-wrap lets items gracefully collapse to the next line without you needing to define explicit breakpoints.

    Where Flexbox starts to fight back is when you try to make it do two-dimensional work. Ever tried to keep card heights consistent across a row of flex children with varying content lengths? You end up reaching for align-items: stretch and then the footer inside each card refuses to pin to the bottom. You write more CSS to fix the fix. That’s a sign you’ve hit Flexbox’s ceiling.

    Where CSS Grid Changes the Game

    Grid thinks in rows and columns simultaneously. The moment you have a layout where both axes matter, Grid is the right call. Page-level structure, editorial layouts, dashboard panels, image galleries where items need to align both horizontally and vertically. Grid owns these.

    The pattern that converts most Flexbox sceptics is grid-template-columns with repeat and auto-fill:

    .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

    That single declaration creates a fully responsive, self-organising grid. No media queries. No JavaScript. Items wrap onto new rows when the container shrinks, maintaining consistent column widths throughout. It’s genuinely magical the first time you see it work, and it would take a mess of Flexbox code to approximate the same result.

    Subgrid, which landed in all major browsers by late 2023 and is now rock-solid in 2026, makes things even more compelling. It lets child elements participate in the parent grid’s track definitions, solving the card-footer-alignment problem that trips everyone up in Flexbox:

    .card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

    Now every card’s title, body, and footer align perfectly across the row without any height hacks. This is the kind of thing that used to require JavaScript and a ResizeObserver. Browser support for subgrid, according to data tracked on Can I Use, sits at over 93% globally as of early 2026, which is comfortably above the threshold most production codebases accept.

    Close-up of code editor screen with CSS Grid layout declarations, illustrating CSS Grid vs Flexbox 2026 comparison
    Close-up of code editor screen with CSS Grid layout declarations, illustrating CSS Grid vs Flexbox 2026 comparison

    Browser Support in 2026: Is It Actually Safe?

    Both systems are essentially safe to use without fallbacks in any project targeting modern browsers. Internet Explorer is gone. Legacy Edge is gone. The MDN compatibility tables show CSS Grid at 98%+ global support and Flexbox even higher. If you’re building for a corporate intranet that still runs IE11, first: I’m sorry. Second: you have bigger problems than layout systems.

    The one nuance worth noting is that some newer Grid features, like masonry layout (the spec that would let Grid do Pinterest-style staggered layouts natively), are still experimental in 2026. Firefox has it behind a flag, Chrome is trialling it. Don’t ship it in production yet, but do keep an eye on it because when it lands properly, it will eliminate a whole category of JavaScript-dependent layout solutions.

    The Decision Framework (Actual, Usable Advice)

    Here’s how I think about it. Ask yourself one question first: does my layout need to control placement in both rows and columns at the same time? If yes, Grid. If you’re just aligning or distributing items along one direction, Flexbox.

    More specifically:

    • Use Flexbox for: navbars, toolbars, button rows, centring content vertically within a container, tag lists, form rows, media objects (image plus text side by side), any component where the number of items is dynamic and you want them to wrap naturally.
    • Use Grid for: page-level layout structure, card grids, dashboard panel systems, any layout where you need items in different rows to align with each other, magazine or editorial layouts, anything with explicit named areas using grid-template-areas.

    The grid-template-areas syntax deserves a special mention because it’s one of the most readable pieces of CSS ever written:

    .layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

    You can read that CSS like a diagram. A junior developer joining a project can understand the page structure before they’ve even opened a browser. That’s the kind of clarity that saves debugging hours down the line.

    Can You Use Both at the Same Time?

    Absolutely, and most well-built interfaces do. A common pattern in production codebases is Grid for the macro layout (the page skeleton) and Flexbox for the micro layout (the components within each area). Your Grid defines where the sidebar, main content, and header live. Flexbox handles how items inside the navigation bar are distributed. They’re not competitors; they’re collaborators operating at different scales.

    The MDN Web Docs, maintained by Mozilla and consistently one of the most reliable references for front-end developers, has excellent interactive examples of both systems. Worth bookmarking the Grid layout documentation if you’re still getting comfortable with the more advanced features like subgrid and named lines.

    The Bottom Line

    The CSS Grid vs Flexbox 2026 conversation really shouldn’t be an either/or. It’s a question of matching the tool to the problem. Flexbox for one-dimensional, component-level distribution. Grid for two-dimensional, structural layouts. Both are mature, both are safe, and both, when used correctly, produce less CSS than any workaround you’d have needed before they existed. Stop picking a team. Use both. Your stylesheets will thank you.

    Frequently Asked Questions

    Is CSS Grid better than Flexbox in 2026?

    Neither is objectively better; they solve different problems. Flexbox handles one-dimensional layouts (a single row or column), whilst Grid handles two-dimensional layouts where both rows and columns matter simultaneously. Most modern projects use both depending on the context.

    When should I use Flexbox instead of Grid?

    Use Flexbox when you’re distributing or aligning items along a single axis, such as navigation bars, button groups, centring an element in its container, or tag lists where the number of items is variable. It’s best suited for component-level layout rather than page-wide structure.

    Is CSS subgrid safe to use in production in 2026?

    Yes. Subgrid is supported in all major browsers, including Chrome, Firefox, Safari, and Edge, with global support sitting above 93% in early 2026. It’s particularly useful for aligning card contents, like titles and footers, across a row without JavaScript hacks.

    Can you use CSS Grid and Flexbox together in the same project?

    Absolutely, and most well-structured codebases do exactly this. A common approach is using Grid for the macro page structure (header, sidebar, main, footer) and Flexbox for micro-level component layouts within those areas. They complement each other rather than compete.

    What is the browser support for CSS Grid in 2026?

    CSS Grid has over 98% global browser support in 2026, covering all modern versions of Chrome, Firefox, Safari, and Edge. Internet Explorer support is no longer a practical concern for most projects, making Grid entirely safe to use in production without fallbacks.

  • Figma vs Framer in 2026: Which Design Tool Wins for Modern Web Projects?

    Figma vs Framer in 2026: Which Design Tool Wins for Modern Web Projects?

    Right, let’s settle this properly. The Figma vs Framer 2026 debate has been simmering in design Slack channels, Twitter threads, and conference hallways for a while now, and I think it’s finally reached the point where a proper, no-nonsense comparison is overdue. Both tools have evolved dramatically. Both have serious AI features. Both claim to be the one tool to rule them all. Spoiler: neither is perfect, but the right choice depends enormously on how you work and what you’re actually building.

    I’ve spent a good chunk of time in both environments this year, switching between them on different projects, and the experience is genuinely illuminating. So let’s get into it.

    Designer comparing Figma vs Framer 2026 on dual monitors in a modern UK design studio
    Designer comparing Figma vs Framer 2026 on dual monitors in a modern UK design studio

    The Core Difference: Design Tool vs Website Builder

    Here’s the thing most comparison articles gloss over. Figma and Framer are not really the same type of tool wearing different hats. Figma is, at its core, a collaborative design and prototyping environment. Framer is increasingly a website builder with a very design-forward interface. That distinction matters enormously when you’re deciding which one belongs in your workflow.

    Figma excels at being the single source of truth for a design team. Design systems, component libraries, variables, multi-file branching, granular permissions, and a dev mode that engineers actually want to open. It’s built for teams. It’s built for handoff. It’s built for scale.

    Framer, meanwhile, has leant hard into the idea that your design should be the product. Build in Framer, publish from Framer, and the prototype IS the website. There’s a real seductiveness to that pitch. No handoff. No translation loss. No developer going “I can’t replicate that blur” at 11pm on a Monday.

    Prototyping: Where Each Tool Actually Shines

    Figma’s prototyping has improved substantially with the introduction of proper variables and conditional logic. You can now build flows that actually respond to user input, remember state between screens, and simulate real app behaviour without touching a line of code. For UX researchers doing usability testing, this is a genuine step change. It’s still not quite as fluid as some dedicated prototyping tools, but it’s good enough for the vast majority of product design workflows.

    Framer’s prototyping feels different because it is different. When you add an animation in Framer, you’re writing (or generating) actual CSS and JavaScript under the hood. Scroll animations, parallax effects, hover states with spring physics, these all feel eerily real because they basically are real. If your job involves building landing pages or marketing sites that need to impress, Framer’s motion capabilities are genuinely ahead. The gap closes when you look at complex app flows with lots of conditional logic, where Figma’s variable system is more structured and easier to audit.

    AI Features in 2026: Clever Tricks or Actual Workflow Shifts?

    Both tools have gone fairly hard on AI this year, and it’s worth being honest about what’s useful versus what’s just a feature checkbox.

    Figma’s AI additions, including the generate UI from text, auto-layout suggestions, and the renamed Make Designs feature, are genuinely handy for rough exploration. The AI rename layers function alone has saved me more time than I care to admit. The AI feels like a set of useful accelerators woven into an existing workflow rather than a fundamental reinvention of how the tool works.

    Close-up of UI prototyping workflow relevant to Figma vs Framer 2026 comparison
    Close-up of UI prototyping workflow relevant to Figma vs Framer 2026 comparison

    Framer’s AI is more theatrical, but in a good way. The ability to generate entire responsive sections from a text prompt and have them publish-ready is remarkable. It’s not always right, and you’ll spend time cleaning up generated components, but for solo designers or small studios spinning up quick client prototypes, it’s a legitimate time-saver. The AI CMS features, where you can auto-populate content blocks from structured data prompts, are also genuinely novel.

    The honest take: Figma’s AI helps you design faster. Framer’s AI helps you ship faster. Those are different problems.

    Developer Handoff: The Bit That Actually Determines If Anyone Loves You

    This is where the tools diverge most sharply, and where your choice might be made for you by the engineering team rather than by you.

    Figma’s Dev Mode is properly excellent now. Developers get computed CSS, annotated specs, asset exports, variable references, and the ability to compare designs against live implementation. Major UK agencies and in-house product teams at companies like Monzo, Deliveroo, and Babylon Health have been running Figma-centred design systems precisely because the handoff story is robust and repeatable at scale. For anyone working inside a product team where designers and engineers collaborate daily, Figma’s handoff pipeline is currently the most mature in the industry.

    Framer’s answer to handoff is, essentially, to make it irrelevant. If you’re publishing from Framer, there’s nothing to hand off. That works brilliantly when a designer has full ownership of the front end, which is more common in agency and freelance contexts than in product teams. It breaks down when an engineer needs to integrate your work into a React or Next.js codebase, or when you’re working on a design system shared across multiple products. Framer’s generated code is… acceptable, but it’s not the clean, maintainable output an engineering team wants to build on.

    Pricing and the Real Cost of Commitment

    Figma’s pricing in 2026 sits at around £12 per editor per month for the Professional plan, with the Organisation plan climbing significantly higher. Since Adobe’s acquisition attempt fell through (still a wild saga), Figma has remained independent and has actually been fairly reasonable about pricing relative to what it delivers. For teams already paying for it, there’s rarely a compelling reason to leave.

    Framer’s free tier is generous for personal projects, with paid plans starting around £14 per month per site on the Mini plan. For agencies publishing multiple client sites, the costs can stack up, though the per-site model does mean costs stay somewhat predictable. You can read more about how web tools are classified for business use over at HMRC’s guidance on allowable business expenses, which is relevant if you’re a UK freelancer writing these costs off.

    Which Tool Should You Actually Use?

    Here’s my genuinely considered take after living in both tools. The Figma vs Framer 2026 debate doesn’t have a universal winner, but it does have contextual winners.

    Use Figma if you’re in a product team, working with engineers regularly, managing a design system, or your organisation has more than five designers who need to collaborate. The tooling, the handoff, the design system infrastructure, it’s simply more mature for that context.

    Use Framer if you’re a solo designer, part of a small agency, building marketing sites or landing pages, or you want the ability to go from concept to published URL without involving a developer. The motion capabilities alone are worth it for that use case.

    And honestly? The most interesting designers I know are using both. Figma for product design and systems work. Framer for pitching, prototyping high-fidelity motion concepts, and spinning up client-facing demos that actually move. That’s not a cop-out answer, it’s just the reality of a field where the tools have genuinely diverged into different niches while appearing to compete in the same space.

    The Figma vs Framer 2026 conversation is ultimately a question about where your output lives. If it lives in a codebase, use Figma. If it lives on a URL, seriously consider Framer.

    Frequently Asked Questions

    Is Framer better than Figma for building websites in 2026?

    Framer is arguably better if you want to go directly from design to a published website without developer involvement, particularly for marketing sites and landing pages. Figma remains superior for complex product design, team collaboration, and developer handoff into existing codebases.

    Can Figma and Framer be used together in the same workflow?

    Yes, and many professional designers do exactly this. A common approach is to use Figma for design systems, component libraries, and developer handoff, then use Framer for high-fidelity motion prototypes and client-facing demos.

    Which tool has better AI features in 2026, Figma or Framer?

    Both have meaningful AI features, but they serve different purposes. Figma’s AI accelerates the design process with things like auto-renaming layers and generating UI components. Framer’s AI goes further by generating publish-ready responsive sections and populating CMS content, making it more useful for rapid deployment.

    How does Framer handle developer handoff compared to Figma?

    Framer largely sidesteps handoff by making the design the deployable product. Figma has a dedicated Dev Mode that outputs computed CSS, annotations, and asset specs for engineers. For teams working in existing codebases, Figma’s handoff is considerably more practical.

    Is Figma still free to use in 2026?

    Figma offers a free starter tier with limited features and file history. Professional plans start at approximately £12 per editor per month. Framer also has a free tier, with paid plans starting around £14 per month per published site.

  • Glassmorphism Is Back: And This Time It’s Doing It Right

    Glassmorphism Is Back: And This Time It’s Doing It Right

    Glassmorphism UI design had its moment, crashed out spectacularly, and has now quietly climbed back through the window. If you were doing interface work around 2020 and 2021, you remember the carnage: every Dribbble shot was drowning in blurry, frosted-glass panels stacked on top of gradient backgrounds, looking gorgeous in a static screenshot and completely unreadable in practice. Accessibility advocates had a field day. Developers quietly cried into their CSS. Then it died, as trends do.

    Except it didn’t die. It evolved. And in 2026, glassmorphism is genuinely useful, not just pretty. The difference between then and now is the difference between using a power tool to show off and using it to actually build something. Let’s get into why it failed, what’s changed, and how to implement it without breaking your interface or your users’ eyesight.

    Laptop screen showing glassmorphism UI design with frosted glass panels on a gradient background
    Laptop screen showing glassmorphism UI design with frosted glass panels on a gradient background

    Why Glassmorphism UI Design Fell Apart the First Time

    The original wave of glassmorphism had one fatal flaw: it prioritised the aesthetic over the function. The whole appeal is that frosted, translucent layering effect where UI elements feel like they’re floating on frosted glass. Lovely. The problem is that legibility depends entirely on what’s sitting behind that panel, and nobody seemed to care about that in 2020.

    Text contrast ratios plummeted. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text, and a huge proportion of glassmorphism implementations were scoring somewhere around 2:1 on a good day. Throw a dynamic background behind it (a moving video, a rotating gradient, user-generated content) and readability became essentially random. You might be fine. You might not. That’s not a design system, that’s a lottery.

    There was also the performance angle. backdrop-filter: blur() is expensive. On lower-end Android handsets and older MacBooks, layering multiple blurred elements destroyed frame rates. The BBC’s own digital accessibility guidelines, which you can find on bbc.co.uk/accessibility, make very clear that visual presentation must never come at the cost of usability. A lot of glassmorphism implementations in that era simply didn’t hold up.

    What’s Actually Different About Glassmorphism in 2026

    A few things converged to rehabilitate the aesthetic. First, hardware got better. The average GPU in a mid-range mobile now handles backdrop-filter without flinching, which removes the single biggest performance objection. Second, CSS itself got smarter. The @supports rule means you can serve the glass effect only to browsers that can handle it cleanly, with a solid fallback for everything else. No more leaving older devices with a janky, half-rendered mess.

    Third, and most importantly, designers got more disciplined. The glassmorphism UI design that’s making a comeback in serious product work is nothing like the Dribbble excess of 2021. It’s used sparingly, on specific UI components like modal dialogs, notification cards, and navigation overlays, rather than as the entire visual language of an interface. Backgrounds are controlled. The blur radius is modest. Text always sits on a surface with enough opacity to guarantee contrast.

    Apple’s design language has played a significant role here. iOS has used frosted-glass effects in its notification centre and Control Centre for years, and with each iteration the implementation has become more refined. Designers studying those patterns learnt that the glass works when the background context is intentionally designed, not left to chance.

    Close-up of glassmorphism UI design on a smartphone notification card with frosted translucent effect
    Close-up of glassmorphism UI design on a smartphone notification card with frosted translucent effect

    How to Implement Glassmorphism Without Breaking Anything

    The core CSS is actually quite simple. The magic trio is background: rgba() with low alpha, backdrop-filter: blur(), and a subtle border with partial transparency. Something like this gets you most of the way there:

    .glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

    That’s the skeleton. The craft is in what you do around it. Your background layer needs to be a controlled gradient or a static image, not dynamic content. If the surface behind the glass can change unpredictably, your contrast guarantee evaporates. I’d also recommend capping blur values at around 16px to 20px for performance; anything beyond that is rarely perceptible to users anyway and the computational cost climbs sharply.

    For accessibility, wrap your text in an element with a slightly higher background opacity than the card itself. A small inner container with background: rgba(0, 0, 0, 0.35) behind white text can push your contrast ratio back into safe territory without killing the frosted effect visually. It’s a minor cheat, but it works and your users can actually read your content.

    Teams building with design systems, particularly those working on bespoke web software with complex UI requirements, will want to tokenise these values early. A glass surface isn’t just one component; it should be defined as a reusable token set (opacity, blur radius, border alpha, shadow depth) so the effect stays consistent across the product and is easy to adjust globally if your background palette changes.

    Tools That Make Glassmorphism Easier to Get Right

    Figma is still the go-to for prototyping the effect. The background blur property in Figma’s Fill panel mimics backdrop-filter closely enough to communicate intent to developers, though it won’t be pixel-perfect until it’s in the browser. Pair it with Figma’s contrast checker plugin (or the third-party Able plugin) and you can validate your text contrast before a single line of code is written.

    For the CSS side, there are a few generators worth bookmarking. CSS Glass and Glassmorphism.css both let you dial in your values and copy the output directly. They’re not magic, but they’re useful for getting a starting point quickly and adjusting from there rather than tuning values manually in DevTools.

    If you’re working in a component framework like React or Vue, consider wrapping your glass surfaces in a dedicated component that enforces the design token values. Hard-coding blur(12px) directly into a dozen different stylesheets is how inconsistency creeps in. One glass-card component, one place to update, consistent output everywhere.

    Where Glassmorphism Actually Belongs in a Modern Interface

    Not everywhere. That bears repeating. The reason the 2026 version of this trend holds up is because the designers using it well are strategic about placement. Modal dialogs and overlays are the sweet spot; the content beneath is controlled, the blur is contextually meaningful (it signals depth and focus), and users interpret it correctly as a layered surface. Navigation components on hero sections with static backgrounds work well too.

    Where it still struggles is in data-heavy interfaces. Tables, dashboards, and anything with dense information simply doesn’t benefit from a frosted surface. The effect adds visual complexity precisely where you need clarity. Keep glassmorphism UI design for moments of emphasis, transitions, and lightweight UI chrome. Use solid surfaces for the hard work.

    The aesthetic isn’t broken. It never was, really. It was just misused by a generation of designers who discovered a cool effect and applied it everywhere at once. Now that the initial excitement has settled and the tooling has matured, glassmorphism sits comfortably in the modern designer’s toolkit, not as a style statement, but as a genuinely useful approach to visual hierarchy and depth when applied with a bit of restraint and a working knowledge of contrast ratios.

    Frequently Asked Questions

    What is glassmorphism UI design?

    Glassmorphism is a design style that uses frosted-glass-style panels with partial transparency, background blur, and subtle borders to create a sense of depth and layering in interfaces. It became popular around 2020 and is now being used more responsibly in 2026 product design.

    Why did glassmorphism fail the first time round?

    The main issues were poor text contrast ratios, unpredictable readability when placed over dynamic backgrounds, and serious performance problems on lower-end devices caused by heavy use of CSS backdrop-filter. Many implementations failed basic WCAG accessibility standards.

    How do I make glassmorphism accessible?

    Ensure your text always meets WCAG 2.1 contrast requirements (4.5:1 for body text) by using a semi-opaque inner layer behind text elements to boost contrast. Design your background as a controlled gradient rather than dynamic content, so contrast stays predictable. Always check with a contrast-checking tool before shipping.

    What CSS properties do I need for a glass effect?

    The core properties are background with rgba() at low alpha, backdrop-filter: blur() (with the -webkit- prefix for Safari), and a semi-transparent border. Use @supports to provide solid-surface fallbacks for browsers that don’t support backdrop-filter, which covers older devices cleanly.

    Where should I use glassmorphism in an interface?

    Glassmorphism works best on modal dialogs, notification cards, navigation overlays, and hero section UI elements where the background is controlled. Avoid using it on data-dense surfaces like tables and dashboards, where visual clarity is more important than aesthetic depth.

  • Why Your Website’s Core Web Vitals Are Still Broken in 2026 (And How to Actually Fix Them)

    Why Your Website’s Core Web Vitals Are Still Broken in 2026 (And How to Actually Fix Them)

    Right. You’ve run PageSpeed Insights, stared at a wall of amber and red scores, and muttered something unprintable at your screen. Welcome to the club. Despite Google making Core Web Vitals a ranking signal years ago, a staggering proportion of UK small business and e-commerce sites are still failing at least one metric. According to the ONS data on UK internet industry, the number of UK businesses trading online continues to grow, which makes it all the more baffling that so many of them are haemorrhaging rankings because of fixable performance issues. This is your technically grounded guide to the core web vitals fix your UK website actually needs in 2026.

    Developer analysing core web vitals fix for a UK website in 2026 on multiple monitors
    Developer analysing core web vitals fix for a UK website in 2026 on multiple monitors

    What Are Core Web Vitals and Why Do They Still Matter in 2026?

    Three metrics. That’s all Google is officially measuring under Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). INP replaced First Input Delay in early 2024 and it’s been quietly brutalising sites ever since. These aren’t abstract benchmarks invented by committee; they map directly to how a real human being experiences loading a page on a 4G connection on the Tube.

    LCP measures how fast your biggest visible element renders. INP measures how snappy your site feels when someone taps, clicks, or types. CLS measures whether your page jumps around like a nervous ferret while it loads. Fail any of them and you’re not just annoying your users; you’re handing a quiet ranking penalty to competitors who bothered to sort theirs out.

    Why UK SME and E-Commerce Sites Fail More Than They Should

    I’ve looked at a lot of UK business sites over the years and the failure patterns are almost always the same. It’s rarely one catastrophic problem. It’s death by a thousand cuts: a bloated WooCommerce theme, render-blocking Google Tag Manager scripts, hero images served without modern compression, third-party chat widgets loading synchronously. Each one adds a few hundred milliseconds. Collectively they torpedo your LCP.

    UK e-commerce sites in particular tend to inherit technical debt from theme marketplaces. Themes built on Bootstrap 4, autoloading twelve Google Fonts variants, carousels powered by jQuery plugins from 2019. The stacking effect is brutal. A site that looks fine on a developer’s M3 MacBook Pro over fibre will absolutely fall apart for someone browsing on an iPhone SE in a post office queue in Wolverhampton.

    Fixing LCP: The Largest Contentful Paint Problem

    Your LCP target is under 2.5 seconds. Most failing UK sites are sitting between 3.5 and 6 seconds. The biggest culprits are almost always images and render-blocking resources.

    Start with your hero image. If it’s a JPEG or PNG being loaded via a CSS background, that’s two problems at once. Switch to WebP or AVIF (AVIF compression is genuinely remarkable at this point), serve it as an <img> element with proper dimensions declared, and add fetchpriority="high" to the tag. That single attribute tells the browser this image is critical and to fetch it immediately rather than queuing it behind other resources.

    <img
  src="hero.avif"
  width="1200"
  height="630"
  fetchpriority="high"
  alt="Your descriptive alt text"
>

    Next: preload your LCP image in the <head>. This is still criminally underused on UK sites.

    <link rel="preload" as="image" href="hero.avif" fetchpriority="high">

    Finally, audit your render-blocking scripts. Google Tag Manager firing synchronously in the <head> is an LCP killer. Move third-party scripts to load with defer or async wherever possible. GTM itself should load asynchronously; if it isn’t, something has gone wrong with your implementation.

    Chrome DevTools performance panel showing long tasks relevant to core web vitals fix
    Chrome DevTools performance panel showing long tasks relevant to core web vitals fix

    Fixing INP: Interaction to Next Paint Is the Hard One

    INP is the metric that’s caught the most sites off-guard since it replaced FID. The threshold for a good score is under 200 milliseconds. Poor is anything over 500ms. The nuance here is that INP measures the worst interaction across an entire page session, not just the first one. That means a sluggish dropdown menu or a heavy on-click handler buried in a product filter can tank your entire score.

    The main culprit for high INP on UK e-commerce sites is long tasks on the main thread. JavaScript that runs for more than 50ms without yielding blocks the browser from responding to user input. Here’s the pattern to break it up:

    // Instead of one long synchronous function:
function heavyTask() {
  // ...200ms of work...
}

// Yield to the browser between chunks:
async function yieldingTask() {
  for (const chunk of dataChunks) {
    processChunk(chunk);
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

    The scheduler.postTask() API is worth exploring if you’re on a modern stack; it gives you fine-grained control over task priority. For WordPress and WooCommerce sites, the quickest win is usually auditing which plugins are registering event listeners on every page. WooCommerce cart fragments, live chat scripts, cookie consent managers; each one adds JavaScript weight that the browser has to process before it can respond to the next click.

    Use Chrome DevTools’ Performance panel (or the slightly more accessible Web Vitals extension) to identify which interactions are generating the longest tasks. Look for the red triangles. Then work backwards to the script responsible.

    Fixing CLS: Stop Your Page Jumping Around

    Cumulative Layout Shift should be under 0.1. It’s the most visually obvious failure and often the easiest to fix, yet plenty of UK sites are still shipping CLS scores of 0.3 or worse.

    The classic cause: images without declared dimensions. When the browser doesn’t know how tall an image is before it loads, it reserves no space. Then the image appears and shunts everything down the page. The fix is a single line of CSS that’s been good practice for years but somehow still gets skipped:

    img, video {
  aspect-ratio: attr(width) / attr(height);
  height: auto;
  width: 100%;
}

    Always declare explicit width and height attributes on your <img> tags too. The browser uses these to calculate space before the image loads.

    Web fonts are the other sneaky CLS source. When your custom font loads and swaps in, text reflows and shifts the layout. The fix is font-display: optional for non-critical fonts, or font-display: swap combined with a closely matched system font fallback using the size-adjust CSS descriptor. The font matching tools from Malte Ubl’s Fontaine project are genuinely useful here for generating fallback metrics automatically.

    Ad slots, banners, and dynamically injected content are the third category. Reserve space for them explicitly with CSS. A banner that loads after the DOM has painted and pushes your content down by 60 pixels will absolutely destroy your CLS score.

    Measuring the Right Way: Real User Data vs Lab Data

    PageSpeed Insights shows you two sets of data: lab data (simulated, consistent, useful for debugging) and field data from the Chrome User Experience Report (CrUX). Google’s ranking decisions are based on CrUX field data, not lab scores. A site can score 95 in PageSpeed lab conditions and still fail Core Web Vitals in the field if real users on real networks and devices are having a different experience.

    If your site doesn’t yet have enough traffic to appear in CrUX, you’re assessed at the origin level or not at all. But you should still optimise; you’re building the performance foundation for when the data does accumulate. Use the Google Search Console Core Web Vitals report to see page-group level field data for your actual UK users.

    The bottom line for a core web vitals fix on a UK website in 2026 is this: it’s almost never one thing. It’s the compound effect of images, scripts, fonts, and layout choices that were each fine in isolation but terrible together. Audit methodically, fix the highest-impact items first (LCP image delivery and render-blocking scripts will move the needle fastest), and measure with field data, not just lab scores. Your rankings, and your users, will thank you for it.

    Frequently Asked Questions

    What is a good Core Web Vitals score in 2026?

    Google defines ‘good’ as LCP under 2.5 seconds, INP under 200 milliseconds, and CLS under 0.1. All three thresholds need to be met at the 75th percentile of real user page loads to pass. Hitting two out of three still counts as a partial failure.

    How do I check my Core Web Vitals for free?

    Google Search Console gives you real-user field data grouped by page type, which is the most valuable report for UK site owners. PageSpeed Insights (pagespeed.web.dev) gives you both lab and field data for individual URLs. The Chrome Web Vitals browser extension lets you measure in real time as you browse.

    Does fixing Core Web Vitals actually improve Google rankings?

    Yes, though it’s one signal among many. Google uses Core Web Vitals as a tiebreaker when content quality is broadly similar between competing pages. For competitive UK e-commerce and local search queries, the difference between a passing and failing score can visibly shift rankings. More importantly, faster sites convert better.

    Why is my WordPress site failing INP?

    WordPress and WooCommerce sites typically accumulate JavaScript from multiple plugins all registering event listeners and running tasks on the main thread simultaneously. Cart fragment scripts, live chat widgets, cookie consent managers, and page builder scripts are common culprits. Audit your loaded scripts with Chrome DevTools and remove or defer anything not critical to the initial interaction.

    How long does it take to fix Core Web Vitals?

    Technical fixes can be implemented in a day or two for a developer who knows what they’re looking for. However, Google’s CrUX field data updates on a rolling 28-day window, so you won’t see improvements reflected in Search Console immediately. Expect three to four weeks before field data catches up to your fixes.

  • The Best Graphic Design Software in 2026: Figma vs Adobe vs the New Challengers

    The Best Graphic Design Software in 2026: Figma vs Adobe vs the New Challengers

    The graphic design software landscape has shifted more in the past two years than it did in the previous decade. That’s not hyperbole. Between Adobe’s aggressive AI push, Figma surviving its blocked acquisition and coming back swingier than ever, and a wave of genuinely capable AI-native tools muscling into the market, designers in 2026 have more choice than at any point in the industry’s history. Which is brilliant, slightly overwhelming, and occasionally maddening depending on which way you’re leaning on any given Tuesday.

    This is a proper rundown of the best graphic design software 2026 has on offer — from the incumbents defending their territory to the scrappy newcomers that are actually worth your time. Whether you’re a freelancer watching your pennies or an agency looking to standardise a team toolkit, there’s something here for you.

    Designer working with best graphic design software 2026 on a large studio monitor setup
    Designer working with best graphic design software 2026 on a large studio monitor setup

    Figma: Still the Collaborative Powerhouse

    Figma remains the go-to for UI and product design, and with good reason. The browser-based model is just sensible — your team is always on the same version, branching keeps workflows clean, and the component system is genuinely excellent once you’ve invested the time to build it properly. In 2026, Figma has doubled down on its AI features, with smart layout suggestions, auto-generated component variants, and a reasonably impressive natural language design prompt that lets you sketch ideas before committing pixels.

    Pricing sits at around £12 per editor per month on the Professional plan, with organisations paying significantly more for enterprise compliance features. Free tier is still generous, which matters a lot for indie designers just building their process. The one genuine criticism? Figma is still not great for print work. If your output ever ends up on a physical page, Figma is going to leave you a bit cold.

    Adobe Creative Cloud: The Bloated Empire That Still Wins on Raw Power

    Say what you want about Adobe’s pricing strategy (and people do, loudly), the Creative Cloud suite is still unmatched for certain workflows. Photoshop’s generative fill has gone from novelty to actually-useful in the span of eighteen months. Illustrator’s vector tools are still the industry benchmark. InDesign remains the only sensible option for anything involving long-form print layout. And Premiere Pro, if you’re doing motion work, is still the professional standard.

    The all-apps subscription sits at roughly £60 per month for individuals as of 2026, which is the number that makes every freelancer re-examine their life choices. It’s a lot. Adobe knows it’s a lot. They’re betting that Firefly’s AI features and deep integration across apps will justify the cost, and for studios doing varied, high-volume work across print and digital, that bet probably lands. For someone who only needs one or two apps? The maths doesn’t hold up as neatly.

    Adobe Express, their lighter browser-based tool aimed at social and marketing content, has improved substantially and is worth a look if you’re not doing complex work. It’s not Photoshop, but it’s not trying to be.

    Close-up of graphic design tools and tablet used with best graphic design software 2026
    Close-up of graphic design tools and tablet used with best graphic design software 2026

    Canva Pro: The Tool Professionals Love to Dismiss and Keep Using

    The design community’s complicated relationship with Canva is fascinating to watch. Every six months someone writes a serious piece about how it’s ruining the profession; every six months it gains another ten million users. Canva in 2026 is a genuinely capable tool for a specific class of work: fast-turnaround social assets, presentation decks, simple brand collateral, and anything that needs to be handed off to a non-designer without causing chaos.

    At around £13 per month for Pro, the template library, brand kit functionality, and Magic Studio AI tools are all included. It’s not built for pixel-perfect UI work or complex illustration, but for marketing and communications output it’s extremely efficient. Agencies handling content-heavy clients often maintain Canva alongside their heavier tools precisely because it removes the bottleneck of routing every quick social post through a senior designer.

    Businesses in the UK that invest in proper web design and brand software tend to see compounding returns on their marketing efficiency. Mansfield, Nottinghamshire-based digital agency dijitul — which specialises in web design, SEO, and website hosting for businesses across the East Midlands — has noted this pattern consistently across client work. The right software stack (dijitul.uk works with a range of tools depending on client need) reduces friction across the whole business efficiency chain, from brand creation through to published web pages. Their specialism in web design means software choices have a direct bearing on project delivery speed and output quality.

    The AI Challengers: Midjourney, Runway, and Adobe Firefly’s Rivals

    This is where things get genuinely interesting. The best graphic design software in 2026 no longer sits in a tidy bracket of traditional vector and raster tools. A clutch of AI-native platforms are doing real work now, not just demo-reel work.

    Midjourney v7 has reached a level of photographic fidelity and stylistic range that makes it a legitimate part of concepting and mood-boarding workflows. It’s not going to replace a skilled illustrator for anything requiring brand consistency, but for rapid ideation and client presentations where you need to communicate a visual direction quickly, it’s extraordinary. Pricing is around £8–£25 per month depending on usage tier.

    Runway Gen-3 is the motion design wildcard. If you’re doing video content or animated assets for web and social, Runway’s text-to-video and image-to-video capabilities have moved well past the uncanny valley stage for short-form content. Agencies producing branded content have started factoring it seriously into their estimates.

    Recraft is the sleeper pick few people outside the design community are talking about yet. It’s a vector-first AI image tool — proper SVG output, editable paths, brand colour locking — and it solves a genuine problem that Midjourney can’t: getting AI-generated visuals that fit inside a design system. Worth watching closely.

    Affinity Designer 2: The Serious Alternative for Price-Conscious Pros

    Serif’s Affinity suite continues to hold a very solid position as the sensible, one-time-purchase alternative to Adobe. Affinity Designer 2 handles both vector and raster work in a single environment, the performance on Apple Silicon is genuinely quick, and the £69.99 one-off licence (or £16.99/month for the whole suite) is a different conversation entirely to Adobe’s subscription. It lacks some of the ecosystem depth and third-party plugin support of the Adobe suite, but for freelancers doing brand and print work who don’t need the full CC stack, it’s a completely professional-grade option. According to BBC Technology coverage of the indie software market, tools like Affinity have genuinely disrupted the assumption that Adobe is the only credible option.

    Which Tool Actually Wins in 2026?

    There isn’t a clean answer, and anyone who gives you one is probably trying to sell you something. The best graphic design software 2026 has on offer depends almost entirely on what you’re actually building.

    UI and product design: Figma. Print and complex image editing: Adobe CC. Fast marketing content: Canva. Budget-conscious brand and print work: Affinity. AI-assisted concepting: Midjourney. Motion and video assets: Runway. Vector AI output: Recraft. These aren’t arbitrary recommendations; they reflect where each tool genuinely excels rather than where the marketing says it should.

    Agencies and freelancers making software decisions in 2026 increasingly treat their tool stack as an infrastructure choice. The shift matters because, as web design work has grown to encompass content systems, brand assets, and digital marketing material under one roof, the software used upstream affects everything downstream. Teams at digital agencies — the kind of operation handling SEO, web design, and business efficiency for multiple clients simultaneously — often run three or four tools in parallel rather than trying to force a single platform to cover every use case. That’s not inefficiency; it’s the right call given how specialised each tool has become.

    Pick the right tool for the actual job. Audit what you’re actually producing week to week. And probably stop paying for the full Adobe CC stack if you’re only ever opening Photoshop.

    Frequently Asked Questions

    What is the best graphic design software for beginners in 2026?

    Canva Pro is the most accessible starting point for beginners, with an intuitive interface and a massive template library. For those who want to progress toward professional-grade tools, Affinity Designer 2 offers a one-off purchase and a lower learning curve than Adobe Illustrator.

    Is Figma still worth using in 2026 or have competitors caught up?

    Figma remains the strongest option for collaborative UI and web design work. Its browser-based model, shared component libraries, and improved AI layout tools keep it ahead for teams working on digital products. Competitors have narrowed the gap in some areas, but nothing has overtaken it for collaborative interface design.

    How much does Adobe Creative Cloud cost in the UK in 2026?

    Adobe Creative Cloud’s all-apps plan costs approximately £60 per month for individuals in the UK. Single-app plans are cheaper, typically around £23–£28 per month. Adobe also offers discounted plans for students, teachers, and businesses on multi-seat licences.

    Are AI graphic design tools like Midjourney good enough for professional work?

    For specific tasks — mood boarding, concept art, social media visuals, and rapid ideation — AI tools like Midjourney v7 are genuinely professional-grade in 2026. However, they still require human oversight for brand consistency, accuracy, and anything needing precise editable assets. Most professionals use them alongside traditional tools rather than instead of them.

    What is the best graphic design software for freelancers on a budget?

    Affinity Designer 2 offers a one-off licence at £69.99, making it the strongest value option for freelancers who need professional vector and raster tools without a monthly subscription. Figma’s free tier also covers a lot of ground for UI-focused work, and Canva Pro at around £13 per month suits those doing primarily marketing and social content.

  • Variable Fonts in 2026: The Typography Superpower Most Sites Aren’t Using

    Variable Fonts in 2026: The Typography Superpower Most Sites Aren’t Using

    Typography on the web has always been a bit of a faff. You pick a typeface, you download four or five separate font files for the different weights and styles, your page load bloats accordingly, and then your designer asks for a slightly bolder heading variant and the whole cycle starts again. Variable fonts break that cycle completely. And yet, despite browser support being essentially universal since around 2020, a surprising number of live production sites are still serving static font stacks like it’s 2015. In variable fonts web design, there is a genuinely dramatic performance and flexibility win sitting on the table, and most teams still haven’t picked it up.

    Monitor displaying variable fonts web design weight axis specimens in a modern studio
    Monitor displaying variable fonts web design weight axis specimens in a modern studio

    What Are Variable Fonts, Exactly?

    A variable font is a single font file that contains an entire design space rather than a fixed snapshot. Instead of separate files for Regular, Medium, SemiBold, Bold, ExtraBold and so on, you get one file with axes that you can interpolate along continuously. The OpenType variable font specification defines several standard axes: wght (weight), wdth (width), ital (italic), slnt (slant), and opsz (optical size). Typeface designers can also define custom axes, which opens up some genuinely wild creative territory. Recursive, a variable font from ArrowType, has an axis called MONO that lets you slide between proportional and monospaced spacing mid-render. That kind of thing simply does not exist in the static font world.

    The spec is maintained by the OpenType consortium and has been supported in Chrome, Firefox, Safari and Edge for years. The Google web.dev documentation on variable fonts is still one of the clearest technical references going, even if you want to go deeper than this article covers.

    Why Variable Fonts Are a Real Performance Win

    Here is the part that tends to surprise people. A single variable font file is not the same size as all those individual static files added together. It is considerably smaller. A typical type family might ship five or six static weight files totalling 300-400 KB combined. The equivalent variable font file frequently comes in under 100 KB, sometimes much less depending on the character set. That is a meaningful reduction in font payload, and on mobile connections, particularly on 4G in rural areas of the UK where speeds can be inconsistent, that matters to real users.

    Beyond raw file size, there is the HTTP request count. Each static font file is a separate request. A variable font is one request. Fewer round trips, simpler caching strategy, less complexity in your <link rel="preload"> logic. It all compounds.

    How to Implement Variable Fonts in CSS

    Implementation is genuinely straightforward. If you are self-hosting a variable font (recommended for performance over relying on a third-party CDN), your @font-face declaration looks like this:

    @font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2 supports variations'),
       url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

    The font-weight: 100 900 range declaration is what tells the browser this file covers the full weight axis. Once declared, you can use any value in that range in your CSS without downloading anything extra:

    h1 {
  font-weight: 750;
}

.caption {
  font-weight: 380;
}

    That is not a typo. 750 and 380 are valid values. You are no longer constrained to multiples of 100. This is the design flexibility part that typographically-minded developers tend to get quite excited about.

    Developer coding variable fonts web design implementation with CSS font-variation-settings on screen
    Developer coding variable fonts web design implementation with CSS font-variation-settings on screen

    Using Font Variation Settings for Custom Axes

    Standard axes like wght and wdth map to familiar CSS properties. But custom axes require the lower-level font-variation-settings property. Four-letter axis tags in uppercase are custom; lowercase are registered standard axes. Here is an example using a hypothetical font with a custom CASL (casual) axis, which Recursive actually ships:

    body {
  font-variation-settings: 'wght' 400, 'CASL' 0.5;
}

.pull-quote {
  font-variation-settings: 'wght' 600, 'CASL' 1;
}

    One gotcha worth knowing: font-variation-settings does not inherit individual values elegantly. If you set it on a parent and override it on a child, you need to re-declare all axes on the child or the unspecified ones snap to their defaults. It is one of those CSS specifics that bites everyone at least once. The workaround is to use CSS custom properties as axis value holders and reference them inside font-variation-settings:

    :root {
  --font-weight: 400;
  --font-casual: 0;
}

body {
  font-variation-settings: 'wght' var(--font-weight), 'CASL' var(--font-casual);
}

.pull-quote {
  --font-weight: 600;
  --font-casual: 1;
}

    Now the child only overrides the custom property it needs to change, and the rest inherit correctly. Tidy.

    Animating Variable Font Axes with CSS

    Because variable font axes are numerical values, they are animatable. You can transition font-variation-settings in CSS, which opens up some genuinely striking UI effects without a single line of JavaScript. A weight transition on hover, for instance:

    .nav-link {
  font-variation-settings: 'wght' 400;
  transition: font-variation-settings 200ms ease;
}

.nav-link:hover {
  font-variation-settings: 'wght' 700;
}

    That said, animating font axes is GPU-hungry when done carelessly. Stick to will-change: font-variation-settings on elements you know will animate, and avoid triggering reflows on large blocks of body text. Test on a mid-range Android handset, not just your MacBook Pro, because the render cost can be quite visible on lower-powered hardware.

    Where to Find Good Variable Fonts

    Google Fonts now has a solid and growing variable font catalogue, and all fonts are free to self-host. Fontshare, run by Indian Type Foundry, has some excellent variable options at no cost. For commercial projects with stricter brand requirements, type foundries like Dalton Maag (London-based, work with major UK brands) offer premium variable font licences that include the full axis range. It is worth checking licence terms carefully; some variable font licences restrict the number of axes you can use in web contexts, which is an odd quirk of the industry still working itself out.

    Variable Fonts and Optical Size: The Hidden Gem

    The opsz axis is the one most developers overlook entirely, and it is arguably the most typographically valuable. Optical size adjustments change the actual letterform design, not just scale, based on the intended size of use. A 12px caption and a 60px display heading are rendered at different weights and proportions automatically when font-optical-sizing: auto is set in CSS. This is how type was handled in quality print for centuries, and it has only been feasible on screen since variable fonts arrived. It is the kind of detail that makes a design feel expensive without being able to pinpoint exactly why.

    Is the Performance Argument Still Valid in 2026?

    Some engineers push back and argue that with HTTP/2 multiplexing and aggressive browser caching, the number-of-requests argument is less compelling than it used to be. Fair point. But the file size argument holds up even under that scrutiny. And the design flexibility argument has nothing to do with performance at all; it is purely about what you can build. Being able to set font-weight: 467 to hit exactly the visual weight your brand system specifies, without any extra asset, is just a better way to work. The variable fonts web design case was strong in 2020 when this landed; in 2026 it is essentially inarguable. There is no good reason to be shipping five static font files when one variable file does the same job better.

    If your current project is still on static fonts, running a quick audit with Chrome DevTools’ Network tab filtered to font resources will show you exactly what you are dealing with. The migration path is usually a morning’s work, and the performance uplift in Core Web Vitals, specifically the reduction in render-blocking time from font loading, tends to show up clearly in your Lighthouse scores within a few days of deployment.

    Frequently Asked Questions

    What is a variable font and how does it differ from a regular web font?

    A variable font is a single font file that contains an entire range of weights, widths, and other stylistic variations along continuous axes, rather than fixed snapshots. A regular static font file only contains one specific style, so you need multiple files to cover different weights. Variable fonts give you far more design flexibility with fewer files.

    Do variable fonts actually improve website loading speed?

    Yes, in most cases. A single variable font file is typically much smaller than the combined file size of equivalent static font files, and it requires only one HTTP request instead of several. This reduces page weight and simplifies caching, which can noticeably improve font loading performance, especially on slower mobile connections.

    Are variable fonts supported in all modern browsers?

    Browser support is essentially universal. Chrome, Firefox, Safari, and Edge have all supported the OpenType variable font specification for several years. You may encounter issues only with very old browser versions, but a straightforward fallback using the standard font stack handles those gracefully.

    Where can I find free variable fonts to use on my website?

    Google Fonts has a growing selection of free variable fonts that can be self-hosted. Fontshare by Indian Type Foundry also offers high-quality variable fonts at no cost. For commercial work requiring more distinct typography, foundries like Dalton Maag offer premium licensed variable fonts.

    Can I animate variable font axes in CSS without JavaScript?

    Yes. Because variable font axes are numerical values, CSS transitions and animations work on the font-variation-settings property directly. You can animate weight, width, or any custom axis purely in CSS. Be mindful of performance on lower-powered devices and use will-change sparingly on elements you know will animate.

  • Micro-Interactions: The Tiny Design Details That Make Users Trust Your Product

    Micro-Interactions: The Tiny Design Details That Make Users Trust Your Product

    There’s a specific moment, probably too brief to consciously register, when you click a button and it responds with a satisfying little bounce. Or when a form field turns green the instant your postcode validates. Something tiny happens, and your brain quietly files it under this product knows what it’s doing. That’s micro-interactions UX design doing exactly what it’s supposed to. Invisible when they work. Painfully noticeable when they don’t.

    I spend a disproportionate amount of time obsessing over these moments. Not because I have nothing better to do (debatable), but because the evidence is pretty overwhelming: the cumulative effect of well-crafted micro-interactions is a product that users trust before they’ve even consciously evaluated it. Let’s dig into the psychology, the mechanics, and the practical execution of getting them right.

    Designer reviewing micro-interactions UX design patterns on a large monitor in a modern studio
    Designer reviewing micro-interactions UX design patterns on a large monitor in a modern studio

    What Actually Are Micro-Interactions UX Design Patterns?

    Micro-interactions are contained product moments that revolve around a single use case. Dan Saffer, who literally wrote the book on the subject, defined them as having four components: a trigger, rules, feedback, and loops/modes. That framework holds up well. But the way I think about it is simpler: a micro-interaction is any moment where the interface acknowledges the user. It says, yes, I heard you, here’s what happened.

    They live everywhere. The pull-to-refresh gesture on your phone. The unread badge count on an app icon. The subtle colour shift when you hover over a navigation link. The progress bar that ticks along while your file uploads. Each one is a tiny contract between the interface and the human operating it. Break enough of those contracts and trust erodes fast, even if the user couldn’t tell you exactly why they stopped liking the product.

    The Psychology Behind Why These Tiny Details Work

    Humans are pattern-recognition machines. We’re wired to notice cause and effect, and when a digital interface behaves predictably in response to our actions, our nervous systems genuinely relax. This is related to what psychologists call effectance motivation, the intrinsic satisfaction we get from making things happen. A button that visually depresses when clicked isn’t just skeuomorphic nostalgia; it’s confirming the causal loop in a way our brains find deeply satisfying.

    Feedback loops are particularly powerful. When users get immediate, proportionate feedback to their actions, it reduces cognitive load because they don’t have to hold uncertainty in working memory. Did my form submit? Did my item save? Is something loading or has it crashed? Each unanswered question is a small tax on attention and trust. Micro-interactions UX design is, at its core, the business of answering those questions before the user even thinks to ask them.

    There’s also a strong connection to what Nielsen Norman Group describes as visibility of system status, the very first of the ten usability heuristics. If you want a solid grounding in this thinking, their ten usability heuristics are worth bookmarking. Everything from loading spinners to error states maps back to keeping users informed at all times.

    Hover States: The Most Underrated Micro-Interaction

    Designers spend ages on hero sections and almost no time on hover states. Which is baffling, because hover states are often the first interactive feedback a user receives on a page. Get them wrong and the product immediately feels cheap.

    A solid hover state communicates affordance. It tells the user this thing is clickable, and it gives them a moment of anticipation before committing. The best ones do it with restraint: a subtle background fill, a slight scale transform, a colour transition timed at around 150 to 200 milliseconds. Go slower and it feels sluggish. Go faster and it’s jarring. That 150 to 200ms sweet spot is the interface equivalent of a firm handshake.

    Where I see teams go wrong most often is inconsistency. Three different hover treatments across one page is a trust-eroding disaster. If links behave one way in the nav, a different way in the body copy, and a third way in the footer, users unconsciously sense the incoherence even if they never articulate it. Systematise your hover states in your design tokens early and stick to them.

    Smartphone displaying micro-interactions UX design feedback states including inline form validation
    Smartphone displaying micro-interactions UX design feedback states including inline form validation

    Loading Animations: Turning Dead Time Into Active Trust-Building

    Loading states are where a lot of products go catastrophically wrong, mostly by having nothing happen at all. A blank screen or an unresponsive button during a two-second API call is enough to make users tap twice, assume it’s broken, or abandon altogether.

    The research on perceived performance is genuinely fascinating. Studies consistently show that users rate a product as faster when there’s visible progress feedback, even if the actual load time is identical. Skeleton screens (the greyed-out placeholder layouts that appear before content loads) are particularly effective because they set spatial expectations and signal that content is on its way. Compared to a generic spinner, they’ve been shown to reduce perceived wait time noticeably.

    For loading micro-interactions UX design, the key questions are: Is it proportionate? A 200ms action doesn’t need a progress bar; a file upload absolutely does. Is it interruptible? Users should be able to cancel long operations. And does it give accurate feedback? An indeterminate spinner is better than a fake progress bar that stalls at 99% for seven seconds. That specific crime against UX has haunted me since about 2009.

    Feedback Loops That Actually Build Confidence

    The best feedback loops operate at three levels: immediate, short-term, and completion. Immediate feedback is the button press response. Short-term is the inline form validation as you type. Completion is the success state after a transaction finalises.

    Inline validation is worth dwelling on because teams chronically under-invest in it. Telling a user their password is too short after they’ve submitted the form is a UX failure. Telling them in real time, with a clear visual indicator as they type, removes friction and builds confidence simultaneously. A green tick appearing next to a valid email address is a small celebration. It’s the interface saying nice one without being annoying about it.

    Success states are equally neglected. After a user completes a key action (a purchase, a sign-up, a file save), the interface has a brief window to reinforce that they did the right thing. Monzo does this brilliantly with their payment confirmations; the little animation and clear confirmation copy make spending money feel almost pleasant, which is no small feat. It’s not accidental. That’s deliberate micro-interaction design working at full effectiveness.

    The Curious Overlap With Physical Craft

    Here’s a slightly left-field observation. The philosophy behind micro-interactions maps surprisingly well onto the idea that precision and feedback in physical tools build trust in the person using them. A well-calibrated piece of woodworking machinery gives the craftsperson constant feedback through resistance, sound, and result, much like a well-designed interface gives users constant feedback through visual, tactile, and auditory cues. Both create confidence through predictable, proportionate response. It’s the same underlying principle: feedback is what separates a tool you trust from one you fear.

    How to Implement Micro-Interactions Without Overengineering

    The trap is over-animating everything. I’ve seen portfolios where every single element bounces, spins, or fades, and within thirty seconds the site feels like a fever dream. Micro-interactions should be in service of clarity, not applause for the designer’s technical skills.

    Start with the high-stakes moments: form validation, loading states, error messages, and success confirmations. These are the places where the user is most uncertain and where feedback matters most. Once those are solid, look at primary CTAs and navigation. Then, and only then, consider the delightful extras like subtle parallax effects or playful empty states.

    For implementation in CSS, the transition and animation properties cover most hover and feedback states elegantly. For more complex sequenced animations, tools like GSAP (GreenSock) give you precise timing control without wrestling the browser. For React-based projects, Framer Motion handles the physics-based interactions brilliantly and keeps your component logic clean. The right tool depends on the complexity of the interaction, not on which library is currently trending on dev Twitter.

    The principle to carry through every decision: if removing the micro-interaction would make the interface harder to use or understand, it’s load-bearing and should stay. If removing it just makes it slightly less delightful, it’s ornamental. Both have their place. But know which is which before you ship.

    Frequently Asked Questions

    What are micro-interactions in UX design?

    Micro-interactions are small, contained moments in a digital interface that respond to a user’s action, such as a button animation on click, inline form validation, or a loading spinner during a file upload. They communicate system status, confirm actions, and build user confidence through consistent, proportionate feedback.

    Why do micro-interactions improve user trust?

    They work by reducing uncertainty. When an interface immediately acknowledges every user action, it confirms that the product is working correctly and listening. This satisfies a deep psychological need for cause-and-effect confirmation, which lowers cognitive load and builds trust over repeated interactions.

    How long should a hover state animation be?

    The widely accepted sweet spot for hover state transitions is between 150 and 200 milliseconds. Slower than that feels sluggish; faster feels abrupt. For exit transitions (mouse leaving an element), slightly longer durations around 200 to 250ms tend to feel more natural.

    What is the difference between a skeleton screen and a loading spinner?

    A skeleton screen shows a greyed-out placeholder layout that mimics the structure of the content being loaded, setting spatial expectations and signalling progress visually. A loading spinner is a generic rotating indicator with no contextual information. Research consistently shows skeleton screens reduce perceived wait time more effectively than spinners.

    Are micro-interactions bad for performance?

    Not if implemented carefully. CSS transitions using transform and opacity properties are GPU-accelerated and have negligible performance cost. Problems arise when developers animate properties that trigger browser reflows (like width, height, or top/left). Stick to transform and opacity for smooth, performant micro-interactions on any device.

  • Colour Theory for Digital Screens: Why Designing in sRGB Is No Longer Enough in 2026

    Colour Theory for Digital Screens: Why Designing in sRGB Is No Longer Enough in 2026

    For decades, sRGB was the safe bet. Every monitor, every browser, every design workflow assumed it. If you picked a colour in Figma, exported it, and slapped it on a website, it looked roughly the same on every screen. Comfortable. Predictable. Also, increasingly, a bit dull. The honest truth in 2026 is that sRGB covers only about 35% of the colours the human eye can perceive, and modern screens have quietly left it behind. If you’re still designing exclusively in sRGB, you’re essentially handing clients a watercolour painted with three crayons when the full art supply shop is sitting right there.

    The shift to wide-gamut colour spaces isn’t just a trendy designer flex. It’s a genuine, technically significant change in how screens render colour, and understanding it is rapidly becoming essential knowledge for anyone building interfaces or visual assets for modern displays. Let’s get into the weeds on this, because it’s properly fascinating once you see the full picture.

    Graphic designer working with wide-gamut colour spaces on dual studio monitors
    Graphic designer working with wide-gamut colour spaces on dual studio monitors

    What Are Wide-Gamut Colour Spaces and Why Do They Matter?

    A colour space is essentially a defined range of colours (a “gamut”) that a system can represent. sRGB was standardised in 1996 by HP and Microsoft, designed around the limitations of CRT monitors at the time. It was brilliant for its era. That era ended roughly when streaming 4K HDR content on an OLED panel became a Tuesday evening activity.

    Display P3 is the wide-gamut colour space you’ll hear most about right now. Developed by Apple and based on the DCI-P3 cinema standard, it covers roughly 45% more colour volume than sRGB. Practically speaking, that means richer reds, more vivid greens, and a whole spread of deep, saturated tones that sRGB simply cannot express. Apple has shipped P3-capable displays in iPhones since the iPhone 7, and virtually every modern MacBook, iPad Pro, and iPhone 15/16 series screen supports it natively. On the Android side, Google Pixel devices and Samsung Galaxy flagships have shipped with wide-gamut displays for several years now.

    Beyond Display P3, there’s also Rec. 2020, which is used in broadcast and cinema HDR pipelines and covers an even larger portion of human-visible colour. Most consumer screens can’t fully render it yet, but it’s the direction of travel. Designing with awareness of the hierarchy (sRGB inside P3 inside Rec. 2020) helps you make sensible choices today whilst future-proofing your work for whatever lands in 2027.

    How Browsers Now Handle Wide-Gamut Colour

    This is where it gets genuinely exciting for front-end developers and UI designers. CSS Colour Level 4 brought native support for wide-gamut colour spaces directly into the browser. You can now write colours in display-p3, oklch, oklch, lab, and several other modern colour spaces using the color() function. Here’s a quick example:

    /* A vivid red that sRGB simply cannot express */
color: color(display-p3 0.9 0.1 0.1);

/* With sRGB fallback for older browsers */
@supports not (color: color(display-p3 0 0 0)) {
  color: rgb(220, 38, 38);
}

    Safari has supported wide-gamut CSS colours the longest, with Chrome and Firefox catching up properly through 2024 and 2025. As of now, browser support is solid enough to use in production with graceful fallbacks. The MDN Web Docs provide a thorough breakdown of browser compatibility tables for the color() function, which is worth bookmarking.

    The colour space that’s genuinely turning heads amongst designers and developers right now is OKLCH. Unlike HSL, which was designed to be human-readable but is perceptually inconsistent (a yellow at 50% lightness looks dramatically brighter than a blue at the same value), OKLCH is perceptually uniform. Rotating the hue in OKLCH whilst keeping lightness constant actually produces colours that look the same brightness to the human eye. That’s a massive deal for generating consistent palettes algorithmically, building design tokens, or creating accessible colour systems.

    Close-up of screen showing wide-gamut colour spaces versus sRGB colour comparison
    Close-up of screen showing wide-gamut colour spaces versus sRGB colour comparison

    Practical Guidance: Future-Proofing Your Palette as a UK Designer

    Right, so how do you actually incorporate this into a real workflow without throwing away everything you know? Here’s my take, built from going through this transition myself over the past year or so.

    Start with Figma’s Colour Settings

    Figma added Display P3 document colour space support in late 2023. If you’re on a P3-capable Mac display (basically any MacBook Pro from 2016 onwards), you can now enable this in your document settings and actually see the wider gamut as you design. Go to File, then Document Settings, and switch Colour Profile to Display P3. Colours you define in this space will carry through to exports correctly, provided the receiving context supports them.

    A word of caution: if your client’s target audience is primarily using older or budget hardware, the expanded gamut will map back down to sRGB on those screens. That’s not a disaster; browsers handle this reasonably well. But it does mean your gorgeous P3 coral might look like a fairly ordinary sRGB orange on an older laptop. Test across devices before committing a P3-heavy brand palette.

    Adopt OKLCH for Design Tokens

    If you’re building a design system (and you should be, I’ve written about that at length elsewhere on this site), switching your token layer to OKLCH pays dividends immediately. Tools like CSS Colour 4 utilities and the Colour.js library let you interpolate palettes in OKLCH space, which means your generated shades will be perceptually even across the full scale. Paired with a tool like Tokens Studio for Figma, you can define your full palette in OKLCH and have it output correctly targeted CSS variables for production.

    Use SVG and Canvas Colour Profiles Correctly

    SVG files don’t embed colour profile information by default. If you’re exporting illustrations or icons intended for P3 displays, you’ll want to ensure your export pipeline embeds the correct ICC profile or uses CSS colour space declarations where the SVG is inlined. Adobe Illustrator and Affinity Designer both allow you to work in P3 colour space, though workflow specifics vary between them.

    Canvas-based animations and WebGL projects have their own considerations. The colorSpace parameter in the Canvas API now supports display-p3 in modern browsers, which is relevant if you’re building creative coded experiences or data visualisations where colour accuracy genuinely matters.

    The Accessibility Angle You Probably Haven’t Considered

    Wide-gamut colour spaces and accessibility aren’t in conflict, but they do interact in interesting ways. WCAG contrast ratios were defined against sRGB, and the upcoming WCAG 3.0 guidelines are moving towards the APCA (Advanced Perceptual Contrast Algorithm) model, which is designed to work properly across colour spaces. Staying ahead of this means testing contrast not just with standard sRGB tools but with perceptually-accurate calculators that account for your actual gamut.

    It’s a bit like making sure your house is properly insulated before you upgrade the heating system. (Speaking of which, if you’re curious about thermal efficiency in the physical world rather than digital colour theory, loft insulation is one of those foundational investments that genuinely pays for itself.) The point being: you want the fundamentals right before you layer on the advanced stuff. Same logic applies here.

    What This Means for Brand Colour in 2026

    Brand colour is where wide-gamut support becomes a commercial differentiator. A startup launching a new product today, optimising for iPhone and high-end Android users, can define brand primaries that exist outside the sRGB gamut entirely. Those colours will look genuinely more vibrant, more premium, and more distinct on the devices their audience uses daily. In five years, designing brand palettes entirely within sRGB will feel like designing in 8-bit colour looked in the mid-2000s.

    UK agencies and freelancers working with tech clients, consumer brands, and media companies should be having this conversation now. It’s not wildly complex to implement, and the creative payoff is real. Wide-gamut colour spaces are one of those quiet technical shifts that, once you’ve seen what’s possible, you genuinely cannot unsee.

    The tools are ready. The browsers are ready. The screens are ready. The question is whether your workflow is.

    Frequently Asked Questions

    What is the difference between sRGB and Display P3?

    sRGB is the traditional colour space standardised in 1996, covering roughly 35% of human-visible colour. Display P3 is a wider colour space that covers approximately 45% more colour volume than sRGB, enabling richer and more vibrant colours on capable modern screens. Most iPhones from 2016 onwards and many current Android flagships support Display P3.

    Do UK designers need to switch to wide-gamut colour spaces right now?

    It depends on your audience and project type. If you’re designing for modern mobile apps, premium consumer products, or media-forward websites where a significant portion of users will be on high-end displays, adopting wide-gamut colour spaces now gives you a creative and technical edge. For projects targeting older or budget hardware, robust sRGB fallbacks remain essential.

    Which browsers support CSS wide-gamut colour in 2026?

    All major modern browsers now support wide-gamut colour via the CSS color() function, including Chrome, Firefox, and Safari. Safari has had the longest support history, whilst Chrome and Firefox reached solid production-ready support through 2024 and 2025. Always include sRGB fallbacks using @supports for older browser versions.

    What is OKLCH and why are designers talking about it?

    OKLCH is a perceptually uniform colour space, meaning equal numerical steps in lightness or chroma look visually equal to the human eye, which is not the case with older models like HSL. This makes it far better for generating consistent design token palettes, creating accessible colour systems, and interpolating smoothly between colours. It’s natively supported in CSS Colour Level 4.

    How do I set up Figma to design in Display P3?

    In Figma, open your file and go to File, then Document Settings. Change the Colour Profile from sRGB to Display P3. You’ll need a P3-capable display (such as a MacBook Pro from 2016 or later) to actually see the wider gamut rendered correctly. Exports from a P3 document will carry the correct colour profile information for web and app use.

  • How to Design a Brand Identity System From Scratch Using Only Free Tools

    How to Design a Brand Identity System From Scratch Using Only Free Tools

    There is a persistent myth in design circles that a proper brand identity requires a four-figure budget, a senior art director, and a subscription stack that costs more than a monthly rent. Rubbish. Brand identity design free tools have matured enormously, and if you know what you are doing, the output is indistinguishable from something that came out of a boutique studio. This walkthrough covers the entire process, from the first blank canvas to a sharable brand guidelines document, spending exactly £0.

    Before we touch any software, a word on process. Brand identity is not a logo. It is a system: logo, colour palette, typography, tone of voice, spacing rules, and the document that governs all of it. Skipping any of those layers and you end up with a pretty mark that nobody applies consistently. Keep that in mind throughout.

    Designer creating brand identity design using free tools on a large monitor in a modern UK studio
    Designer creating brand identity design using free tools on a large monitor in a modern UK studio

    Step 1: Discovery and Positioning (No Software Needed Yet)

    Open a plain text file or a sheet of paper. Answer these honestly: Who is this brand for? What three words should people feel when they encounter it? Who are the direct competitors, and how should this brand look different? Spend thirty minutes here minimum. Every visual decision later traces back to this foundation. If you skip it, you will redesign the logo three times and still hate it.

    Gather reference material using resources like the BBC’s design coverage to understand how established brands use visual language. Save references to a free Milanote board or even a simple Google Slides deck. You are building a mood board, not a dissertation.

    Step 2: Choosing Your Typography With Google Fonts

    Typography does roughly sixty percent of the heavy lifting in a brand identity, which is a statistic I fully stand behind based on years of watching clients ignore it. Google Fonts hosts over a thousand typefaces, all free for commercial use, and the quality gap between the best of them and a paid font has narrowed considerably.

    Pick a maximum of two typefaces: one for headings (your brand personality) and one for body copy (legibility first). A few combinations that work reliably: Playfair Display + Source Sans 3 for an editorial, trustworthy feel; Space Grotesk + Inter for tech-forward brands; Cormorant Garamond + Jost if you want something with genuine elegance. Download the variable font files where available, they give you far more weight flexibility without loading extra files.

    Document your choices immediately: font name, weights you are using, line height values, and the use case for each. This becomes part of your brand guidelines later.

    Step 3: Building Your Colour Palette

    A functional brand palette needs five slots: one primary colour, one secondary, one accent, one dark neutral (for text), and one light neutral (for backgrounds). That is it. More than that and you are building a paint catalogue, not a brand.

    Use Coolors (free tier is perfectly adequate) or Paletton to generate and test combinations. Once you have a direction, validate every colour pair for accessibility contrast using the free WebAIM Contrast Checker. UK public sector design standards require a minimum 4.5:1 contrast ratio for normal text, and honestly that baseline is worth applying to everything regardless of sector.

    Extract your hex codes, RGB values, and HSL values. Write them down. All three. You will need different formats in different tools and hunting for them mid-project is the kind of thing that erodes your sanity.

    Printed brand identity style guide showing colour palette and typography created with brand identity design free tools
    Printed brand identity style guide showing colour palette and typography created with brand identity design free tools

    Step 4: Logo Design in Penpot

    Penpot is the free, open-source design tool that has been quietly making Figma nervous. It runs in the browser, exports production-ready SVGs, and requires no subscription. For logo work, it is genuinely excellent.

    Create a new project. Set up artboards for each logo variant you will need: primary horizontal lockup, stacked version, icon-only mark, and a monochrome version. Working from day one with multiple variants forces you to design something that actually functions as a system rather than a single clever shape.

    Build your logo using vector shapes and your chosen Google Fonts typeface. Keep it simple. The logos that survive ten years are almost always the ones that could be drawn with a biro from memory. Use Penpot’s component system to store your colours as shared styles so every element references your palette rather than hardcoded hex values. When a client asks to slightly adjust the primary colour six months later, you will thank yourself.

    Export in SVG for digital use and as a high-resolution PNG (transparent background) for applications that cannot handle vector formats. If you need a PDF for print, Penpot handles that too.

    Step 5: Brand Applications in Canva Free

    Penpot is your precision instrument; Canva Free is where you demonstrate the brand in context. Social media headers, email signatures, presentation templates, business card mockups: these are the assets that turn a logo file into a convincing brand system.

    In Canva, set up a Brand Kit using the free tier’s colour palette tool. Enter your hex codes and select your Google Fonts typefaces from their font library (most are available). Now every template you create in Canva will pull from your defined palette automatically. This is the closest thing to a living style guide that non-designers on a team will actually use without breaking everything.

    Create at least three template types: a social post in square format, a landscape presentation slide, and a simple document header. These become your proof-of-concept assets for the guidelines document.

    Step 6: Writing the Brand Guidelines Document

    A brand identity without guidelines is a logo waiting to be misused. Your guidelines document does not need to be a 60-page PDF designed by a luxury consultancy. It needs to be clear, complete, and accessible to someone who has never met you.

    Structure it like this: brand story (one paragraph), logo usage rules (do and do not), colour palette (all values, correct pairings), typography (hierarchy, sizes, line heights), tone of voice (three to five principles), and a page of real-world application examples. Build this in Google Slides or Canva. Export as PDF. Share via Google Drive link.

    A well-structured guidelines document is also the kind of asset that signals professionalism when you are working with external partners. When agencies or developers ask about your brand spec, handing them a coherent PDF saves everyone hours of back-and-forth.

    Making Your Brand Visible Online

    Once the visual identity is sorted, think about what happens when people actually search for the brand. A cohesive identity applied inconsistently across domains, social profiles, and web pages confuses both users and Google’s crawlers. Making sure your brand name, colours, and typography are consistent everywhere is genuinely part of how you show up in search. Tools that let you check your SEO across those digital touchpoints become useful here. Search Engine Tuning, a UK-based service specialising in free SEO checks for websites, is one option worth knowing about when you are setting up or auditing a new brand’s online presence. Visit searchenginetuning.co.uk to run a free SEO check that covers how your domains are performing, whether Google is reading your pages correctly, and where your visibility might be leaking.

    Think of it this way: brand identity design gets people to trust you visually. A free SEO check from a service like Search Engine Tuning tells you whether Google can actually find you. The two problems are not the same, but they are both part of launching a brand that performs rather than one that just looks good on a Behance portfolio. Getting your domains indexed properly, understanding how Google reads your metadata, and confirming that your check your SEO tasks are handled early means you are building on solid ground from day one.

    Free Tools Recap

    To summarise the full stack used in this process: Google Fonts for typography, Coolors or Paletton for colour palette generation, WebAIM Contrast Checker for accessibility validation, Penpot for logo and vector design work, Canva Free for brand application templates and the guidelines document, and Google Slides or Docs for the sharable brand guidelines PDF. Total cost: nothing. Combined capability: more than enough for the vast majority of small business and personal brand projects.

    The honest truth about brand identity design free tools is that the constraint often improves the work. When you cannot rely on a thousand-pound stock illustration library or an overengineered plugin ecosystem, you focus on the fundamentals: clear typography, a coherent palette, a logo that works at 16 pixels and at 160 centimetres. Those are the fundamentals that make a brand identity actually function in the real world, and none of them cost a penny.

    Frequently Asked Questions

    Can you create a professional brand identity using only free tools?

    Yes, absolutely. Tools like Penpot, Canva Free, and Google Fonts provide everything needed for a complete, professional-grade brand identity including logo design, typography selection, colour palette development, and brand guidelines. The results are indistinguishable from paid-tool output when the underlying design thinking is solid.

    What is the difference between a logo and a brand identity?

    A logo is a single mark or wordmark; a brand identity is the full system it belongs to, including colour palette, typography, tone of voice, spacing rules, and usage guidelines. Without the wider system, a logo is just a graphic file that gets applied inconsistently across every touchpoint.

    Is Penpot really a free alternative to Figma for logo design?

    Penpot is fully open-source and free with no subscription tier. It runs in the browser, supports vector editing, shared colour and type styles, and exports to SVG and PDF. For logo and identity work it is highly capable, and the core toolset is genuinely competitive with Figma’s free tier.

    How many colours should a brand identity have?

    A functional brand palette needs five slots: primary, secondary, accent, a dark neutral for text, and a light neutral for backgrounds. More than five and the system becomes difficult to apply consistently. Each colour pair you use should also be validated for accessibility contrast of at least 4.5:1.

    Do I need to pay for fonts for a commercial brand identity?

    Not necessarily. Google Fonts hosts over a thousand typefaces explicitly licensed for commercial use at no cost. Choosing a strong heading font paired with a highly legible body font from the Google Fonts library is entirely sufficient for most brand identity projects, including commercial ones.

The Latest