Barclays' corporate site: Royal Blue #006de3 on every control, Barclays Effra from 80px down, 8px cards and full pills. Tokens for React and AI tools.
Curated by Dov Azencot, updated May 19, 2026. Source home.barclays (opens in a new tab).
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: 20 colors 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.
5 highlights
Barclays in production, as captured. Scroll the window to see the whole page.
Barclays's system runs on #006de3 as its primary voltage, used in 4 of 15 components. Type is set in Barclays Effra across 10 tokens from 12px to 80px, weights 400–700. Shape language is soft — components average 51px corner radius, with no sharp interactive edges.
Sparing, CTA-only voltage · 3
Page and card backgrounds · 2
Headlines, body, captions · 4
Dividers, outlines, rules · 1
Status, errors, success, links · 7
Specialty colors · 3
Set in Barclays Effra across 10 tokens, from 12px to 80px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
5 corner radii and 9 spacing values. Shape language: soft, on a 8px base radius.
Each rendered from its tokens (color, type, radius, padding) on Barclays's own canvas.
Barclays's tokens on the kind of product it builds.
Money that moves as fast as you do
Send, save and spend with an account built for the way you live and work.
What higher rates mean for your money
Rates have moved three times this year. Here is what that means for your savings, your loans and your plans.
Barclays staff · 6 min readThe best time to review your savings is before you need them. The people who build the places we live are starting to plan for decades, not seasons, and the work is already changing what gets made.
Barclays's tokens, its components and how to use this DESIGN.md in your project.
Specs, directories and component libraries that pair with this design system.
One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of Barclays.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Barclays's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
Barclays' corporate site does not ease into its subject matter. Editorial weight: the page opens on an 80px Barclays Effra headline at weight 700 with -2.56px tracking — "Q1 2026 Results" — rendered in pure white on a full-bleed aerial photography hero. No bank in this directory deploys a heavier or larger display heading on its primary marketing surface; the weight is a declarative institutional statement, not a consumer-brand invitation. Where Morgan Stanley keeps its display at weight 500 in a semi-serif editorial family to suggest financial-publication gravitas, Barclays presses to 700 to assert corporate magnitude directly.
Below the photography band, the page inverts to a white canvas running a substantial editorial grid — twelve news and insights cards organized under "Our Sustainability Insights," "Our UK Unlocked Insights," and "Investment Bank Insights" headers in 48px / weight 500 section headings. The chromatic vocabulary across the entire page resolves to one decision: Royal Blue (#006de3) as the universal interactive layer. It is wired into 37 CSS custom properties simultaneously — button fill, border, focus ring, toggle track, tab indicator, and progress bar all share the same hex. Unlike Cloudflare's single orange or Stripe's single indigo, Barclays' blue does not appear as a page-level brand accent in hero sections or surface fills; it appears precisely where interaction occurs.
The shape language is exactly binary. Binary radius: card and form surfaces use 8px rounding, every button uses 99px (full pill). The CSS exposes additional radius tokens (4px, 12px, 16px) but the captured marketing surface shows only these two values in use. The pill button makes the interactive layer feel warmer than the card chrome — it is the only curved surface in an otherwise angular editorial grid.
Key Characteristics:
{colors.hairline} (#e2e2e2) accounts for 1485 of 1486 captured border occurrences; zero shadow.{colors.primary} — #006de3): frequency 80. Used as text (35), background (5), border (40). The universal interactive layer — wired into --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 31 more. The page's single chromatic decision point.{colors.primary-hover} — #005bbe): frequency 0 in rendered capture. Wired as --t-color-interactive-alt — the press/hover variant of the Royal Blue, one stop darker. Used in the focus-hover box-shadow token.{colors.primary-light} — #00aeef): frequency 1, border only. Wired as --tkn-brand-primary, --t-color-primary, --t-brand-logo-color. The Barclays eagle logo renders in this sky blue. Not used on interactive surfaces.{colors.canvas} — #ffffff): frequency 63. Used as background (38), text (15), border (10). The below-fold page floor, button text on blue fills, and inverse text elements.{colors.surface-1} — #f6f6f6): wired as --tkn-background-color-default and --tkn-toggle-track-color-unchecked-default. The subtle tinted surface for disabled states and section backgrounds.{colors.midnight} — #1a2142): frequency 2, background only. The hero photography fallback surface — the dark navy behind the above-fold band.{colors.midnight-deep} — #161b2f): wired as --scl-theme-color-10, --t-color-sacred-dark. The darkest available surface, used for dark-panel editorial sections.{colors.info-tint} — #e7f0fb): wired as --tkn-background-color-info-default and --tkn-status-info-secondary-color-default. The pale blue tint used for informational alert backgrounds and subtle hover fills.{colors.ink} — #272727): frequency 287. Used as text (153), border (134). The dominant heading color — wired as --t-type-heading-color, --tkn-text-color-heading, --scl-theme-heading-color. Not pure black; the charcoal warmth softens the contrast with the white canvas.{colors.ink-mid} — #515151): frequency 152. Used as text (76), border (76). The body-paragraph color — wired as --tkn-text-color-default, --t-type-color, --scl-theme-text-muted. The workhorse running-text tone.{colors.ink-muted} — #8e8e8e): wired as --tkn-button-disabled-secondary-foreground-color, --tkn-icon-color-disabled, --tkn-text-color-disabled. Used for disabled states and the input border in resting state.{colors.hairline} — #e2e2e2): frequency 13 as border. Wired as --tkn-border-color-default, --tkn-seperator-primary-color-default, --tkn-button-disabled-primary-background-color. The dominant border tone — 1485 of 1486 captured border occurrences use this value.{colors.error} — #e3000f): wired into 24 error-state custom properties. Error button backgrounds, error borders, error text.{colors.success} — #09821f): wired into 8 success-state properties. Success borders, success text, progress indicators.{colors.warning} — #ffba00): wired into 6 warning-state properties. Warning borders, warning icons.{colors.error-tint} — #fde7e9): error alert background.{colors.warning-tint} — #fff8e7): warning alert background.{colors.success-tint} — #f4f9f5): success alert background.{colors.dark-mode-text} — #cbccd1): wired as --scl-theme-text-color-dark-mode. The body-text color for dark-mode surfaces.{colors.interactive-dark} — #3696fc): wired as --scl-theme-color-interactive. The interactive accent for dark-theme surfaces — a brighter variant of the Royal Blue.The system runs Barclays Effra across every tier — display, heading, body, button, caption. There is no secondary family, no mono tier, no serif accent. The CSS declares "Barclays Effra", Arial, sans-serif with Arial as the system fallback and "Barclays Effra", Arial, Verdana, sans-serif on the scale-level font-family token. Barclays Effra is proprietary and not publicly licensed.
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 80px | 700 | 76px | -2.56px | Hero h1 ("Q1 2026 Results") |
{typography.display-lg} | 48px | 700 | 58px | -1.152px | Bold section h2 variants |
{typography.display-md} | 48px | 500 | 58px | -1.152px | Section h2 ("Our Sustainability Insights") |
{typography.heading-md} | 32px | 500 | 38px | -0.512px | Sub-section h3, article card heads |
{typography.heading-sm} | 16px | 700 | 24px | 0 | Inline h2 section labels, bold inline markers |
{typography.body-md} | 16px | 400 | 24px | 0 | Default running text |
{typography.body-sm} | 14px | 400 | 21px | 0 | Caption, tag labels, footer links |
{typography.label-md} | 16px | 500 | 24px | 0 | Nav links, interactive labels |
{typography.button-md} | 16px | 500 | 24px | 0 | Button labels |
{typography.caption} | 12px | 400 | 18px | 0 | Metadata, small labels |
The display tier breaks with every convention in the banking category. 80px / 700 / -2.56px tracking is compression-plus-weight — the headline reads like a newspaper billboard, not a financial services hero. At 48px, section headings use weight 500 (not 700), which creates a clear authority tier between the h1 and the h2. Body copy stays strictly at 16px / 400 — no intermediate sizes interrupt the weight ladder.
Barclays Effra is not publicly available. Helvetica Neue at the same weights is the closest geometric sans-serif substitute; apply -0.032em letter-spacing on the 48px display tier and -0.064em on the 80px hero to approximate the tight tracking. Inter works at body sizes but lacks the Effra's slightly condensed feel at large display scales.
{spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 56px · {spacing.4xl} 80px.The page alternates between editorial density (the 12-card news grid, the 4-column about section) and generous display (the hero, the "About Barclays" section header). Both modes share the same 24px card padding and 16px base spacing unit — the density difference comes from card count, not from padding change.
The system has no shadow tier on the marketing surface. The capture found zero shadow-color occurrences. Depth is communicated entirely through hairline borders — {colors.hairline} (#e2e2e2) on card edges and section separators. The CSS exposes a box-shadow token (--t-raised-box-shadow: 0 0 20px rgba(39,39,39,0.2)) and a banner shadow (--scl-theme-banner-box-shadow-1) but neither appears in the captured marketing surface elements.
The hero panel achieves depth contrast by color alone — dark midnight navy against the white canvas below, with no gradient or shadow at the seam.
The radius scale is binary: cards and form surfaces at 8px, all buttons at 99px full pill.
{rounded.none} 0px — the hero section edge, the above-fold photography band.{rounded.sm} 4px — form field border-radius per CSS variable --t-border-radius-sm; chip elements per --t-ghost-border-radius.{rounded.md} 8px — card containers, panel surfaces per CSS variable --t-border-radius. The default surface rounding on the marketing page.{rounded.lg} 16px — declared in CSS as --t-border-radius-xl but not visible in captured marketing components.{rounded.full} 99px — every button on the page. "Online Banking," the primary CTA, form submit buttons — all full pill. Wired as --t-button-border-radius and --scl-theme-button-border-radius.button-primary — Royal Blue {colors.primary} fill, white text, Barclays Effra 16px / weight 500, full-pill {rounded.full} radius, 10×28px padding, 44px height. The primary CTA across the page.
button-primary-hover — Shifts to {colors.primary-hover} (#005bbe) on hover. Same dimensions and typography.
button-secondary — White canvas fill, Royal Blue text and border at 2px. Same full-pill radius. The outlined CTA variant.
button-small — Royal Blue fill, white text, 2×16px padding, 32px height. The compact "Online Banking" pill in the top-nav area.
top-nav — White canvas surface, 72px height, 24px top padding. Barclays eagle logo in sky blue left-aligned, primary links (Strategy / Sustainability / Media / Investors / Careers), and right-aligned "Online Banking" compact pill CTA.
nav-link — Transparent, charcoal ink text at {typography.label-md} (16px / 500), 12px horizontal padding. Active state adds a 4px Royal Blue bottom border per --t-header-link-border-width.
hero-section — Midnight navy {colors.midnight} fill with full-bleed photography, 80px vertical padding. The h1 headline sits left-aligned in white.
hero-heading — White text on the dark hero, Barclays Effra 80px / 700 / -2.56px tracking. The heaviest typographic moment in the system.
section-heading — Charcoal ink text on white canvas, Barclays Effra 48px / 500 / -1.152px tracking. "Our Sustainability Insights," "Our UK Unlocked Insights," "Investment Bank Insights."
article-heading — 32px / 500 / -0.512px tracking in charcoal ink. The card-level h3 for each news and insights article.
body-paragraph — Ink-mid (#515151) text, Barclays Effra 16px / 400, 24px line height. The default article body copy and section lead paragraphs.
card — White canvas fill, 1px hairline border {colors.hairline}, 8px radius {rounded.md}, 24px padding. The dominant card surface across the news grids.
link-text — Royal Blue {colors.primary} text, Barclays Effra 16px / 500. Used for "Learn more →" article links and inline cross-references.
tag-chip — Ink-muted text, hairline border, 4px radius, 2×16px padding. Article category tags ("Sustainability," "Investment Bank").
footer — White canvas, ink-mid body text, Barclays Effra 14px / 400, 40×24px padding. No surface contrast from the page floor.
Do run the hero heading at 80px / weight 700 with -2.56px tracking. The compression is deliberate — reduce tracking to 0 and the display reads as a generic heavy sans, not the newspaper-billboard register Barclays intends.
Do use Royal Blue ({colors.primary} — #006de3) only on interactive surfaces: button fills, border highlights, focus rings, toggle tracks. Its value comes from being the only chromatic signal on an otherwise monochrome page — place it on decorative elements or section headers and the interactive affordance signal breaks down.
Do keep card surfaces at exactly 8px radius {rounded.md} and buttons at full pill {rounded.full}. The binary contrast between card-surface sharpness and button softness is the shape language's only decision — introducing a middle value (12px, 16px) dissolves the contrast.
Do separate heading color (#272727 charcoal) from body color (#515151 mid-gray). The two-tone ink hierarchy — darker headings, lighter body — creates the reading rhythm for the dense 12-card news grid. Collapsing them to the same value flattens the editorial hierarchy.
Don't apply the hero heading weight (700) to section h2 headings. Section h2s use weight 500 at 48px — putting 700 on them creates two competing display moments and removes the authority tier between the hero h1 and the section anchors.
Don't use {colors.primary-light} (#00aeef) for interactive elements or as an accent. It is the logo mark's color only; wiring it into buttons or links would make the interactive layer look like a logo element rather than a designed affordance.
Don't add shadows to card surfaces. The system declares --t-raised-box-shadow in CSS but never renders it on marketing cards. A card shadow would import elevation vocabulary from product-dashboard UX into a flat editorial context where it reads as decorative noise.
Don't render display headings below weight 500 on any tier. The system's typographic anchor is Barclays Effra's weight ladder: 700 for the hero h1 and major h2, 500 for section headings and button labels, 400 for body. Below 500 at heading sizes, Barclays Effra reads as a regular web font rather than an institutional voice.
Afterpay, Betterment, Binance and 47 more in Banking & Payments: each brand's colors, type and components in one file your AI agent builds from.
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
4.9 out of 5 from 150+ developers
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
