What is Barclays' primary brand color?

Barclays' brand voltage is Royal Blue (#006de3), wired into the CSS as --scl-brand-blue and duplicated across 37 semantic token names: --tkn-button-primary-background-color-default, --tkn-border-color-interactive-default, --tkn-text-interactive-primary-color-default, --tkn-focus-ring-extended-inner-color-default, --tkn-toggle-track-color-checked-default, --tkn-tab-selected-indicator-color-default, and more. This means that when the design system changes its brand blue, every interactive surface — CTAs, focus rings, toggles, progress bars, tab underlines — updates together. The secondary brand-layer color is a legacy sky blue (#00aeef) wired as --tkn-brand-primary and visible in the Barclays logo mark, but it does not appear on the captured marketing surfaces as a fill or text color.

What typeface does Barclays use?

Barclays runs a single proprietary typeface — Barclays Effra — across every surface from the 80px/700 display headline to the 16px/400 body paragraph. The CSS declares it as 'Barclays Effra', Arial, sans-serif with Arial as the system fallback. There is no secondary family, no mono tier, no serif accent. The weight range spans 400 (body), 500 (section headings, button labels), and 700 (display h1 and section h2). Barclays Effra is not publicly licensed; the closest open-source alternatives are Helvetica Neue at the same weights, or Inter with tighter letter-spacing applied manually to match the display tier's -2.56px and -1.152px tracking values.

What is Barclays' corner-radius approach?

Barclays runs a binary radius scale: 8px on all card surfaces, form fields, and panel containers, and 99px (full pill) on every button. There is no middle tier — 12px, 16px, and 20px are all absent. The CSS exposes --t-border-radius (8px), --t-border-radius-sm (4px), --t-border-radius-lg (12px), and --t-border-radius-xl (16px) as tokens, but the captured components show only the 8px and 99px values in use on the marketing surface. The pill button makes interactive elements feel warmer than the angular card chrome — the binary split reads as a deliberate contrast between structural surfaces (sharp-ish) and interactive ones (fully rounded).

What is the dark navy color (#1a2142) used for?

The deep navy (#1a2142) is a brand-layer color that appears in the extraction as a CSS variable background only — it shows 2 background uses in the captured page with no text or border occurrences. It is the darkest color in the brand palette, distinct from the structural charcoal (#272727) used for headings. The navy likely underlies a dark marketing section or a featured panel that did not fully render in the extraction. The extraction also references --scl-theme-color-10 pointing to an even darker value (#161b2f), which is the true background color for dark-theme panels. Neither should be used for text — charcoal #272727 carries that role.

Can I use this DESIGN.md to build a banking or fintech marketing site?

Yes — the DESIGN.md file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Barclays' specific moves: heavy 80px/700 display heading, Royal Blue as the universal interactive layer across all CTAs and focus rings, binary radius (8px cards / 99px buttons), single Barclays Effra typeface at consistent weights, and hairline-only card surfaces. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The main caveat: Barclays Effra is proprietary. Substitute Helvetica Neue or Inter with manually applied tracking to approximate the display-tier feel.

Barclays Design System

Barclays' corporate site design system as DESIGN.md.

About Barclays DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source home.barclays

Banking & Payments
Fintech & Crypto

Barclays' corporate site lands its authority in the first viewport: an 80px Barclays Effra headline at weight 700 with -2.56px tracking rendered in pure white on a full-bleed dark photography hero — "Q1 2026 Results" set in four words at the heaviest display weight deployed by any bank in this directory. Where Morgan Stanley keeps its heading at weight 500 in a semi-serif editorial family, and where HSBC stays on a conventional 48px display, Barclays goes heavier. The move reads not as a retail bank headline but as a newspaper front page: compressed, declarative, unqualified. Below the photography, the page inverts to a white canvas carrying a substantial 12-card news grid in 32px / weight 500 section headings and 16px / weight 400 body copy — Barclays Effra across every tier without a second typeface.

The DESIGN.md file packages this system for React and AI tools. Inside: 22 color tokens organized around a single Royal Blue (#006de3) interactive layer wired into 37 CSS custom properties — CTA button fill, border, focus ring, toggle track, tab indicator, and progress bar all share the same hex. Structural tokens cover a charcoal near-black (#272727) heading color, a medium gray (#515151) body color, and a light hairline (#e2e2e2) that accounts for 1485 of 1486 captured border occurrences. Twelve typography tokens span Barclays Effra across display (80px / 700), section heading (48px / 500 and 32px / 500), body (16px / 400), and button label (16px / 500) tiers. The radius scale is exactly two values: 8px for cards and form fields, 99px for every button.

Feed this file to Claude or Cursor to reproduce Barclays' specific moves: heavy display weight at near-newspaper scale, Royal Blue concentrated into a single interactive layer rather than distributed as a palette accent, binary radius that makes buttons feel warmer than the card chrome, and hairline-only card surfaces that carry an editorial grid with no decorative depth signals. The one disciplined move worth studying: mapping a single hex to 37 semantic token names — Barclays' CSS variable architecture ensures that the brand blue reaches every interactive surface without ever being hardcoded directly.

What makes it distinct

Single-typeface systemBarclays Effra runs at 80px/700 display down to 16px/400 body with no secondary family
Royal Blue as universal interactive layer#006de3 wired into 37 CSS custom properties covering button fills, focus rings, toggle tracks, and progress bars simultaneously
Binary radius scale8px on all card and form surfaces, 99px full-pill on every button; no middle tier
Dark photography hero with 80px displaythe above-fold h1 sits at -2.56px tracking, the heaviest display weight in the banking category
Hairline-only card grid#e2e2e2 borders carry 1485 of 1486 border occurrences; no shadow, no tonal lift

Live at home.barclays

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

home.barclays

Explore Barclays

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Barclays design system FAQ

Common questions about Barclays's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Barclays — official site

Barclays' public corporate marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.