---
version: alpha
name: "Barclays"
website: "https://home.barclays"
description: >-
  A British universal bank whose corporate marketing site runs a single proprietary typeface, Barclays Effra, across every surface — display headlines hit 80px at weight 700 with -2.56px tracking, body copy sits at 16px weight 400, and the interactive layer is a single Royal Blue (#006de3) wired into 37 CSS custom properties as the primary CTA fill, border, focus ring, toggle track, progress indicator, and link text. The shape language is binary — card and form surfaces use 8px rounding while all buttons render as full-pill at 99px radius. An above-fold dark photography hero with white display text contrasts sharply with the light editorial canvas below, where hairline-only (#e2e2e2) cards carry the page's substantial news and insights grid.

seo:
  title: "Barclays Design System for React — Royal Blue #006de3, Barclays Effra, 17 components"
  metaDescription: "Barclays' corporate site design system as DESIGN.md. Royal Blue #006de3 primary, Barclays Effra at 80px/700, binary radius (8px cards / 99px pills), 22 colors, 17 components. For React, Next.js, and AI tools."
  highlights:
    - "Single-typeface system — Barclays 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 scale — 8px on all card and form surfaces, 99px full-pill on every button; no middle tier"
    - "Dark photography hero with 80px display — the 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"
  tags:
    - "Banking & Payments"
    - "Fintech & Crypto"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://home.barclays"
      title: "Barclays — official site"
      description: "Barclays' public corporate marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Barclays' primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Barclays use?"
      answer: "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."
    - id: "border-radius"
      title: "What is Barclays' corner-radius approach?"
      answer: "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)."
    - id: "dark-navy"
      title: "What is the dark navy color (#1a2142) used for?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a banking or fintech marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "editorial-article"

colors:
  primary: "#006de3"
  primary-hover: "#005bbe"
  primary-light: "#00aeef"
  midnight: "#1a2142"
  midnight-deep: "#161b2f"
  ink: "#272727"
  ink-mid: "#515151"
  ink-muted: "#8e8e8e"
  canvas: "#ffffff"
  surface-1: "#f6f6f6"
  info-tint: "#e7f0fb"
  hairline: "#e2e2e2"
  error: "#e3000f"
  success: "#09821f"
  warning: "#ffba00"
  error-tint: "#fde7e9"
  warning-tint: "#fff8e7"
  success-tint: "#f4f9f5"
  dark-mode-text: "#cbccd1"
  interactive-dark: "#3696fc"

typography:
  display-xl:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 80px
    fontWeight: 700
    lineHeight: 76px
    letterSpacing: "-2.56px"
  display-lg:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 58px
    letterSpacing: "-1.152px"
  display-md:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 58px
    letterSpacing: "-1.152px"
  heading-md:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 38px
    letterSpacing: "-0.512px"
  heading-sm:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  body-md:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0
  label-md:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0
  caption:
    fontFamily: "\"Barclays Effra\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  full: "99px"

spacing:
  xxs: "4px"
  xs: "8px"
  sm: "12px"
  base: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "56px"
  4xl: "80px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "10px 28px"
    height: "44px"
    borderColor: "{colors.primary}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "10px 28px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "10px 28px"
    height: "44px"
    borderColor: "{colors.primary}"
  button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "2px 16px"
    height: "32px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "24px 24px"
    height: "72px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    padding: "0px 12px"
  hero-section:
    backgroundColor: "{colors.midnight}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "80px 24px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0px"
  article-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-mid}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  link-text:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  tag-chip:
    backgroundColor: "transparent"
    textColor: "{colors.ink-mid}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.sm}"
    padding: "2px 16px"
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-mid}"
    typography: "{typography.body-sm}"
    padding: "40px 24px"
---

## Overview

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:**
- Heavy display weight — 80px / weight 700 / -2.56px tracking for the hero h1, 48px / weight 500 for section h2s; no bank peer uses this scale.
- Single typeface, Barclays Effra, across every tier including button labels, captions, and article cards.
- Royal Blue (#006de3) concentrated into a single interactive layer wired to 37 CSS custom properties — not distributed as a palette accent.
- Binary radius: 8px on cards and form surfaces, 99px on all buttons; no middle value.
- Hairline-only card surfaces — `{colors.hairline}` (#e2e2e2) accounts for 1485 of 1486 captured border occurrences; zero shadow.
- Charcoal near-black (#272727) as the heading text color — not pure black; a slightly warmer ink that carries the heading hierarchy.
- Secondary brand color sky blue (#00aeef) restricted to the Barclays logo mark; absent from interactive or decorative surfaces.
- Dark navy (#1a2142) backing the hero photography panel as the fallback surface color.

## Colors

### Brand Interactive

- **Primary** (`{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.
- **Primary Hover** (`{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.
- **Primary Light** (`{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.

### Surface & Background

- **Canvas** (`{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.
- **Surface-1** (`{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.
- **Midnight** (`{colors.midnight}` — #1a2142): frequency 2, background only. The hero photography fallback surface — the dark navy behind the above-fold band.
- **Midnight Deep** (`{colors.midnight-deep}` — #161b2f): wired as --scl-theme-color-10, --t-color-sacred-dark. The darkest available surface, used for dark-panel editorial sections.
- **Info Tint** (`{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.

### Text

- **Ink** (`{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.
- **Ink Mid** (`{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.
- **Ink Muted** (`{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.

### Hairline

- **Hairline** (`{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.

### Semantic Status

- **Error** (`{colors.error}` — #e3000f): wired into 24 error-state custom properties. Error button backgrounds, error borders, error text.
- **Success** (`{colors.success}` — #09821f): wired into 8 success-state properties. Success borders, success text, progress indicators.
- **Warning** (`{colors.warning}` — #ffba00): wired into 6 warning-state properties. Warning borders, warning icons.
- **Error Tint** (`{colors.error-tint}` — #fde7e9): error alert background.
- **Warning Tint** (`{colors.warning-tint}` — #fff8e7): warning alert background.
- **Success Tint** (`{colors.success-tint}` — #f4f9f5): success alert background.

### Dark Mode

- **Dark Mode Text** (`{colors.dark-mode-text}` — #cbccd1): wired as --scl-theme-text-color-dark-mode. The body-text color for dark-mode surfaces.
- **Interactive Dark** (`{colors.interactive-dark}` — #3696fc): wired as --scl-theme-color-interactive. The interactive accent for dark-theme surfaces — a brighter variant of the Royal Blue.

## Typography

### Font Family

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.

### Hierarchy

| 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 |

### Principles

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.

### Note on Font Substitutes

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.

## Layout

### Spacing System

- **Base unit:** 16px — the dominant spacing value (70 occurrences in the extraction), appearing on card padding, nav insets, and form field padding.
- **Tokens:** `{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.
- **Section vertical padding:** approximately 80px between major sections; the hero band uses 80px top/bottom.
- **Card internal padding:** 24px for the news and insights cards.
- **Button padding:** 10×28px for the full-width primary CTA; 2×16px for the compact nav-area "Online Banking" pill.
- **Nav padding:** 24px inline and 24px top-padding on the navigation container.

### Grid & Container

- **Max content width:** 1280px declared in CSS as --t-max-width; 1440px for the hero aperture.
- **Hero:** full-bleed dark photography; content centered at approximately 1200px. The h1 "Q1 2026 Results" sits left-aligned on the dark panel.
- **News grid:** 3-column layout at desktop for the "Sustainability Insights" and "UK Unlocked Insights" sections, with equal-width article cards carrying a photograph, article heading in 32px / 500, and body paragraph below.
- **"About Barclays" section:** 4-column grid of text-only cards (Our Strategy / Our Structure / Addressing Climate Change / How Barclays Supports the Defence Sector).
- **Investment Bank Insights:** a secondary 3-column grid of article cards with photography overlaid by a gradient banner bottom.

### Rhythm

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.

## Elevation

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.

## Shapes

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`.

## Components

**`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's and Don'ts

**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.

## Known Gaps

- **Light mode vs. dark mode:** the captured surface is the default light mode. The CSS exposes a dark-mode color set (--cbccd1 for body text, --161b2f for deep surface, --3696fc for interactive), but no dark-mode rendering was captured.
- **State matrix:** only the resting state and one hover state (button fill shift from #006de3 to #005bbe) are documented. Focus rings (double-ring: 2px white + 4px Royal Blue), active press, and disabled states are declared in CSS but not captured on interactive elements.
- **Mega-menu navigation:** the top-nav items likely expand into dropdown panels; their internal layout, card structure, and background treatment are not captured.
- **Sub-brand and product surfaces:** the corporate site (home.barclays) is distinct from barclays.co.uk (personal banking), Barclaycard, and Barclays Wealth. Each sub-brand may run a different color set on top of the same Effra foundation.
- **Motion:** the hero photography uses a parallax or scroll animation; timing values are not captured.
- **The --00aeef logo color:** the sky blue (#00aeef) appears as --tkn-brand-primary in CSS but renders only in the Barclays eagle logo on the captured surface. Whether the brand uses it for any other surface in product UIs is not determinable from the marketing page alone.