---
version: alpha
name: "Circle"
website: "https://www.circle.com"
description: >-
  A stablecoin and blockchain-infrastructure platform (home of USDC) whose marketing site runs on a near-white periwinkle canvas, an aubergine-dark primary (#29233b) used simultaneously as ink, button fill, and the text-selection background, and a Circularxx type family that replaces weight variation with size variation — every tier from 12px eyebrows to 80px hero h1 uses the same rounded geometric sans. The system's palette names are a semantic bestiary: "Licorice" for the dark purple-near-black, "Jelly" for the violet accent, "Gumdrop" for the sky blue, "Apple" for green, "Icee" for the cyan tier — a deliberately playful taxonomy beneath a formally structured financial-infrastructure product.

seo:
  title: "Circle Design System for React — licorice dark, Circularxx, 18 components"
  metaDescription: "Circle's marketing-site design system as DESIGN.md. Aubergine licorice ink, Circularxx type, periwinkle canvas, USDC blue accents, 17 color tokens, 18 components. For React, Next.js, and AI tools."
  highlights:
    - "Licorice-as-everything — the aubergine near-black (#29233b) serves simultaneously as primary ink, button fill, button border, and even the browser text-selection background"
    - "Circularxx across every tier — the same rounded geometric sans from 12px uppercase eyebrows to 80px hero h1, with no weight heavier than 700 anywhere above body copy"
    - "Periwinkle canvas — the page background is a pale blue-lavender (#edf1fc from themeColor) rather than pure white, carrying a faint blockchain-native color signal"
    - "Jelly violet gradient — the hero decoration is a 3D-rendered orb in violet-to-cyan gradients using the Jelly (#9f72ff) and Gumdrop (#1894e8) palette families"
    - "UPPERCASE eyebrows at 12px — small-caps category labels run Circularxx 12px/500 uppercase with 1.2px letter-spacing, appearing 28 times across the page"
  tags:
    - "Fintech & Crypto"
    - "Banking & Payments"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Circle's marketing site has an identity signal that takes a moment to name: the dark color that does everything is not black, not navy, but aubergine. The primary ink, the button fill, the button border, the text-selection highlight, and the CSS variable `--colors-all--primary` all resolve to the same deep purple-near-black (#29233b), wired as "Licorice 700" in the system's semantic palette. The effect, against a pale periwinkle canvas, is that Circle reads simultaneously as a financial institution (dark, authoritative) and a product with a distinctive chromatic identity (the canvas is never neutral white, always blue-lavender). Where Stripe leans indigo, and where most crypto-infrastructure brands reach for electric blue on dark surfaces, Circle plants its authority in an aubergine that doesn't announce itself as purple but reads differently from any neutral.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI coding tools. Inside: 17 color tokens drawn from Circle's palette-bestiary — Licorice (aubergine-dark tier), Jelly (violet accent for gradients), Gumdrop (sky-blue link and accent tier), plus structural whites and hairlines. Thirteen typography tokens run Circularxx across every surface: the hero h1 at 80px/500 with -1.5px tracking, h2 section displays at 51-66px, a 12px/500/uppercase eyebrow style that appears 28 times, and body copy at 14-18px/400. Radius tokens center on 20px for card surfaces and 50px for pill elements. Eighteen components cover the product-grid with tabbed navigation, the stats counter strip, the news-card set, and the CTAs.

    Feed this file to Claude or Cursor and it will reproduce Circle's specific moves: periwinkle canvas instead of white, aubergine primary used as both ink and button fill with no separate accent reserved for CTAs, Circularxx at the same geometric weight across every tier, uppercase eyebrows at 12px for category labeling, and the violet-to-cyan gradient orb that floats beside the hero headline. The system's design lesson: when a single color carries every semantic role (text, border, button, selection), the palette achieves coherence through simplicity rather than through careful accent isolation.
  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://www.circle.com"
      title: "Circle — official site"
      description: "Circle's public 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 Circle's primary brand color?"
      answer: "Circle's primary color is licorice — the aubergine dark-purple-near-black at #29233b, wired across ten CSS variables including --colors-all--primary, --pill-color, --_buttons---background, --_buttons---border, --wb-primary-color, --wb-primary-font-color, --selection--background-color, and --colors--licorice--700. It appears 921 times in the captured page: 460 as text, 455 as border, and 6 as background fill. The unusual feature is that this single color carries both the text-ink role and the primary button-fill role — there is no separate accent color reserved for CTAs. The button fill and the body text are the same aubergine value."
    - id: "typography"
      title: "What typeface does Circle use, and how does weight work?"
      answer: "Circle runs Circularxx across every surface — a licensed rounded geometric sans from Lineto foundry. The weight schema is narrow: most headings and all body copy sit at weight 400 or 500. The only weight-700 tier visible is the h3 card heading at 28px/700 and button labels at 16px/700. Display headings (80px, 66px, 51px, 38px) all use weight 500. The eyebrow labels — 12px uppercase with 1.2px letter-spacing — also use weight 500. This means the system achieves hierarchy almost entirely through size and letter-spacing, not through weight contrast. The closest open-source substitute is Nunito at matching weights, or Outfit for the slightly-tighter cap height at display sizes."
    - id: "canvas-color"
      title: "Why is Circle's background a pale blue-lavender rather than white?"
      answer: "The page background is declared in the themeColor meta tag as #edf1fc — a desaturated blue-lavender that also appears in the CSS as --colors--website--bg. The individual section backgrounds in the extraction cluster as #d9efff and #f6f2ff (both near-white with blue or violet tints). This canvas choice signals blockchain-native positioning without an aggressive color statement — the periwinkle reads as 'internet financial system' rather than 'traditional bank' (which would use white or cream) or 'DeFi' (which would use pure black). It is subtle enough that most visitors perceive the page as white, but it introduces just enough blue-violet to differentiate from standard fintech neutrality."
    - id: "product-tabs"
      title: "How does Circle's product-grid section work?"
      answer: "The 'open economy' section uses a tabbed product grid with 12 product tiles: USDC, EURC, USYC (top row with blue fill icons), then Circle Payments Network, Mint, StablePay, Arc, Wallets, Contracts, CCTP, eReserve, Gateway, Paymaster (subsequent rows). Each tile carries a small icon, a product name in 18px/700 Circularxx, and a 2-3 line description. The active product tab is highlighted in blue (#0073c3 fill) while inactive tabs show the aubergine border. The grid uses 20px card radius and 16-24px internal padding. The tab strip above the grid runs the full product category list in small Circularxx at 14px/400 with a blue active-tab underline."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build a fintech platform marketing site?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI coding tool. The agent will reproduce Circle's specific moves: periwinkle canvas instead of white, aubergine (#29233b) serving as both body text and button fill, Circularxx at weight 400-500 across the display tier, 12px uppercase eyebrows with 1.2px tracking for section labels, and a 20px card radius. Token references resolve cleanly. The one move worth borrowing carefully: Circle's aubergine works as both ink and button precisely because it is dark enough to read on white but chromatic enough to read as a brand color. A true neutral (#1a1a1a) substituted into the button fill reads as black, not as brand."

mockups:
  - "marketing-hero"
  - "pricing-table"

colors:
  primary: "#29233b"
  primary-hover: "#4e4763"
  secondary: "#1894e8"
  jelly-violet: "#8656ef"
  jelly-mid: "#9f72ff"
  jelly-light: "#b090f5"
  gumdrop-blue: "#0073c3"
  ink: "#29233b"
  ink-muted: "#a7a3b5"
  ink-dark: "#3d3652"
  ink-faint: "#6b6580"
  canvas: "#ffffff"
  surface-1: "#f6f2ff"
  surface-2: "#d9efff"
  hairline: "#e1dfe8"
  hairline-dark: "#29233b"

typography:
  display-xl:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 88px
    letterSpacing: "-1.5px"
  display-lg:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 65.6px
    fontWeight: 500
    lineHeight: 72.16px
    letterSpacing: "-1.5px"
  display-md:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 51px
    fontWeight: 500
    lineHeight: 56.1px
    letterSpacing: "-1.5px"
  heading-lg:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 41.8px
    letterSpacing: "-0.5px"
  heading-md:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 30.8px
    letterSpacing: "-0.5px"
  heading-sm:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: "-0.5px"
  body-lg:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0
  body-md:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "-0.5px"
  body-sm:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 23.3px
    letterSpacing: 0
  caption:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0
  eyebrow:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 20.8px
    letterSpacing: "1.2px"
  button-md:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: "-0.64px"
  nav-link:
    fontFamily: "Circularxx, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "8px"
  md: "10px"
  lg: "20px"
  xl: "50px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "24px"
  xl: "40px"
  2xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12.5px 20px"
    height: "44px"
    border: "0"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12.5px 20px"
    height: "44px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "12.5px 20px"
    height: "44px"
    borderColor: "{colors.primary}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "0px 32px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: "0px 12px"
    height: "32px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.display-md}"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
    padding: "5px 0px"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-lg}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  card-product:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.hairline}"
  card-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "24px"
    border: "0"
  stats-number:
    backgroundColor: "transparent"
    textColor: "{colors.gumdrop-blue}"
    typography: "{typography.display-md}"
  tab-active:
    backgroundColor: "{colors.gumdrop-blue}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "5px 12px"
  tab-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: "5px 12px"
    borderColor: "{colors.hairline}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "10.25px 12px"
    height: "44px"
    borderColor: "{colors.hairline}"
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.lg}"
    padding: "16px"
    borderColor: "{colors.hairline}"
---

## Overview

Circle's marketing site positions a stablecoin infrastructure business through a single unorthodox chromatic decision. **Licorice-as-everything**: the same aubergine near-black (#29233b, named "Licorice 700" in Circle's CSS palette) serves as body text, button background, button border, and even the browser text-selection highlight color. There is no CTA accent set aside in a separate hue — the primary action is the brand color, which is also the text color. Where Stripe wires indigo into a voltage that appears selectively against white backgrounds, and where most fintech brands hold a blue or green for action-state differentiation, Circle collapses the distinction. The button and the paragraph are one color family.

The page's background resists neutrality. The themeColor meta tag declares #edf1fc — a pale periwinkle — and the section backgrounds cluster in the blue-violet family (near-white surfaces tinted with Jelly violet or Gumdrop blue). The hero carries a 3D-rendered orb in violet-to-cyan gradient alongside the headline "Don't watch the shift. Lead it." — the decoration is chromatic, the surrounding page is structured and restrained. Below the fold, the product grid shows 12 product tiles, each with a small icon and a product name, demonstrating USDC, EURC, the Payments Network, and nine other services on a single scrollable page without a tabbed sub-navigation.

**Uppercase everywhere, once**: the eyebrow label system is unusually active. The 12px/500/uppercase Circularxx style with 1.2px letter-spacing appears 28 times across the page — every section opens with a category label before its display heading. This regularity disciplines the scroll rhythm.

**Key Characteristics:**
- Aubergine primary (#29233b — 921 occurrences: 460 text, 455 border, 6 background) carries every structural role simultaneously.
- Circularxx rounded geometric sans across every tier from 12px eyebrow to 80px hero — no second family, no serif, no mono.
- 12px/500/uppercase eyebrow labels with 1.2px tracking appear 28 times, disciplining every section's entry point.
- Jelly violet (#8656ef — 67 occurrences) appears in the hero orb gradient, borders, and decorative accent text; it is the secondary chromatic voice.
- Blue Gumdrop (#0073c3 — 54 occurrences) handles active tab states, link text, and the statistics counter numbers ("185+ countries," "83.8T of on-chain TX").
- Pale periwinkle surface backgrounds in the Licorice-50 (#f6f2ff) and Gumdrop-75 (#d9efff) families — the page is never pure white.
- 20px card radius dominant (22 occurrences); 10px for form elements; 50px for pill-style elements.

## Colors

### Brand

- **Primary (Licorice)** (`{colors.primary}` — #29233b): frequency 921. Text (460), border (455), background (6). The brand voltage that simultaneously serves ink, button fill, and selection background. Wired as `--colors-all--primary`, `--colors--licorice--700`, `--_buttons---background`, `--_buttons---border`, `--wb-primary-color`.
- **Primary Hover** (`{colors.primary-hover}` — #4e4763): frequency 0 rendered, declared as `--_buttons---background-hover` and `--_buttons---border-hover`. The lightened aubergine on button hover.
- **Secondary (Gumdrop Blue)** (`{colors.secondary}` — #1894e8): frequency 16. Text (6), border (6), gradient (4). Wired as `--wb-secondary-color` and `--colors--gumdrop--400`. The hover-state blue and the 3D orb gradient fill.
- **Jelly Violet** (`{colors.jelly-violet}` — #8656ef): frequency 67. Text (33), border (33), background (1). The secondary accent for decorative gradient surfaces and accent borders. Wired as `--colors--jelly--400`.
- **Jelly Mid** (`{colors.jelly-mid}` — #9f72ff): frequency 6, primarily gradient (4). Wired as `--colors--jelly--300`. Lighter violet for gradient mid-stops.
- **Jelly Light** (`{colors.jelly-light}` — #b090f5): frequency 4, all gradient. Wired as `--colors--jelly--200`. The pale violet gradient end-stop.
- **Gumdrop Blue** (`{colors.gumdrop-blue}` — #0073c3): frequency 54. Text (22), background (4), border (28). The active-tab fill, stat counter numbers, and link text accent. Wired as `--colors--stable-blue--500` and `--colors--gumdrop--500`.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 313. Text (152), background (14), border (144), gradient (3). The base page floor for cards and content zones.
- **Surface-1** (`{colors.surface-1}` — #f6f2ff): frequency 15. Background (8), gradient (3). The pale violet section band — Jelly-50 tone. Wired as `--colors--jelly--50` and `--colors--licorice--50`.
- **Surface-2** (`{colors.surface-2}` — #d9efff): frequency 12. Background (6), border (6). The pale blue section band — Gumdrop-75 and Icee-75 tones. Also the declared `--colors--website--bg`.

### Text / Hairline

- **Ink Muted** (`{colors.ink-muted}` — #a7a3b5): frequency 108. Text (54), border (54). Secondary text and dividers. Wired as `--colors--licorice--200`.
- **Ink Dark** (`{colors.ink-dark}` — #3d3652): frequency 6, text (3) and border (3). Darker secondary text within card surfaces. Wired as `--colors--licorice--600`.
- **Ink Faint** (`{colors.ink-faint}` — #6b6580): frequency 2. Tertiary label text. Wired as `--colors--licorice--400`.
- **Hairline** (`{colors.hairline}` — #e1dfe8): frequency 25. Text (12), border (13). Card outlines and section dividers. Wired as `--colors--licorice--75`.

## Typography

### Font Family

The system runs **Circularxx** — Lineto's licensed rounded geometric sans — across every surface. There is no second family. Body, button, nav, eyebrow, and display all share the same geometric proportions; hierarchy comes from size, weight, letter-spacing, and text-transform, not from typeface contrast. The declared CSS variables reference `Circularxx` with a `sans-serif` fallback.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 80px | 500 | 88px | -1.5px | Hero h1 — "Don't watch the shift. Lead it." |
| `{typography.display-lg}` | 65.6px | 500 | 72.16px | -1.5px | Section display alternate |
| `{typography.display-md}` | 51px | 500 | 56.1px | -1.5px | Section h2 ("Current" insight cards), stat labels |
| `{typography.heading-lg}` | 38px | 500 | 41.8px | -0.5px | Sub-section headings |
| `{typography.heading-md}` | 28px | 700 | 30.8px | -0.5px | h3 product-tile heading — the one weight-700 display tier |
| `{typography.heading-sm}` | 24px | 400 | 31.2px | -0.5px | Section intros and card lead text |
| `{typography.body-lg}` | 18px | 400 | 27px | 0 | Hero sub-paragraph and section body |
| `{typography.body-md}` | 16px | 400 | 24px | -0.5px | Default running text |
| `{typography.body-sm}` | 14px | 400 | 23.3px | 0 | Nav and secondary body |
| `{typography.caption}` | 12px | 400 | 18px | 0 | Legal fine print and metadata |
| `{typography.eyebrow}` | 12px | 500 | 20.8px | 1.2px | UPPERCASE category labels — appears 28 times |
| `{typography.button-md}` | 16px | 700 | 16px | -0.64px | CTA button labels |
| `{typography.nav-link}` | 16px | 500 | 18px | 0 | Top-nav link labels |

### Principles

The display tier is weight-500 through 80px — not the weight-300 confidence of Stripe or the weight-700 authority of most fintech buttons. The eyebrow treatment (12px/500/uppercase/1.2px tracking) is the system's most active typographic signal: it appears before every section heading, creating a consistent entry cadence. The 28 occurrences make this the dominant label strategy rather than an occasional accent. One notable exception: the h3 product-tile heading at 28px breaks to weight 700 — the only display-size element in the system that reaches heavier than 500.

### Note on Font Substitutes

Circularxx is a licensed Lineto font. The closest open-source substitute is **Nunito** at equivalent weights — the rounded apertures transfer cleanly at display sizes. **Outfit** is slightly tighter and works better for the 14-16px body tiers. For teams that want the uppercase eyebrow treatment with a free font, **Plus Jakarta Sans** at weight 600 with `letter-spacing: 0.1em; text-transform: uppercase` approximates the visual effect.

## Layout

### Spacing System

- **Base unit:** 4px (appearing 46 times, the most frequent gap value).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.2xl}` 96px.
- **Section padding (vertical):** 96px top/bottom on the hero band. Below-fold sections use 64px or 48px between major blocks.
- **Card internal padding:** 24px for editorial and news cards; 16px for compact product tiles.
- **Container max-width:** declared as `--spacing-layout--container-max-width: 1110px`.

### Grid & Container

- **Hero:** white or pale-tinted full-width band at 1110px max content width. Headline left-aligned with the 3D orb floating right.
- **Product grid:** 3-column tile grid for the 12 product entries (USDC, EURC, USYC, Circle Payments Network, Mint, StablePay, Arc, Wallets, Contracts, CCTP, eReserve, Gateway, Paymaster). Cards use 20px radius with 16px internal padding.
- **Insight panel ("Current"):** a full-width card carrying a brand logo, description, and read-more link — a featured partner case-study format.
- **Stats strip:** "185+ countries · 83.8T of on-chain TX · 55 issuer regions" — three numbers in Gumdrop blue display text.

### Rhythm

The page alternates between a **sparse editorial mode** (large display heading + short dek + one CTA) and a **dense grid mode** (the 12-product tile grid, the news-card strip). Neither mode holds for more than two sections before switching. This prevents the long-scroll monotony common in infrastructure platforms.

## Elevation

Circle uses a light shadow vocabulary. The declared shadows are `rgba(0,0,0,0.08-0.10)` neutrals without tinting. Cards on the page use hairline borders rather than shadows as the primary elevation signal.

- **Flat:** hero and editorial sections — no shadow.
- **Hairline-border cards:** the product tiles and news cards use 1px `{colors.hairline}` borders with 20px radius, no shadow. Elevation comes from background contrast (white card on pale-tinted surface).
- **Search widget:** the deployed AI search widget (Webless) carries `box-shadow: 2px 4px 62px 12px rgba(0,0,0,0.1)` — the only hard shadow on the page.

## Shapes

The radius scale is **medium-generous with a pill option**:

- `{rounded.xs}` 2px — minimal, for fine-rule elements (24 occurrences).
- `{rounded.sm}` 8px — the button radius (11 occurrences); also the declared `--component-button--border-radius: 8px` and search-input radius.
- `{rounded.md}` 10px — intermediate UI surfaces and tab elements (19 occurrences).
- `{rounded.lg}` 20px — the dominant card radius (22 occurrences). The declared `--component-card--border-radius: 20px`. Content cards, product tiles, insight panels.
- `{rounded.xl}` 50px — pill CTAs and nav search bar (5 occurrences).
- `{rounded.full}` 9999px — avatar circles and flag thumbnails (50% radius in CSS, rendered as full circle).

## Components

**`button-primary`** — Aubergine `{colors.primary}` fill, white text, Circularxx 700 at 16px / -0.64px tracking, 8px radius, 12.5×20px padding, 44px height. The declared CSS sets `--component-button--horizontal-padding: 20px` and `--component-button--vertical-padding: 12.5px`.

**`button-primary-hover`** — Slightly lighter aubergine `{colors.primary-hover}` (#4e4763), same dimensions.

**`button-secondary`** — Transparent fill, aubergine text, 1px aubergine border, 8px radius. The outline variant used for secondary CTAs ("Learn more").

**`top-nav`** — White canvas, 60px height. Circle logo mark flush left, nav links center (Home, Solutions, Transparency, Developers, Resources, About), search + "Talk to sales" CTA flush right. Nav uses 16px/500 Circularxx.

**`nav-link`** — Aubergine text, 16px/500, 0×12px padding, 32px height.

**`hero-heading`** — Aubergine text, Circularxx 80px/500, -1.5px tracking. "Don't watch the shift. Lead it." in 2 lines.

**`section-heading`** — Aubergine text at `{typography.display-md}` (51px/500). Section h2 labels like "Current" and "Operating responsibly at global scale."

**`eyebrow-label`** — 12px/500 uppercase with 1.2px letter-spacing, aubergine text. The section-entry label that appears 28 times — always the first element inside a section, in all-caps, before the display heading.

**`body-paragraph`** — Aubergine text at `{typography.body-lg}` (18px/400). Section leads and card descriptions.

**`body-paragraph-muted`** — Ink-muted (#a7a3b5) text at `{typography.caption}` (12px/400). Legal fine print and metadata captions.

**`card`** — White fill, 1px hairline border, 20px radius, 24px padding. The default editorial and news card.

**`card-product`** — White fill, 1px hairline border, 20px radius, 16px padding. The compact tile for the 12-product grid. Holds icon + product name in 18px/700 + 2-line description.

**`card-dark`** — Aubergine fill, white text, 20px radius, 24px padding. The "Build with Circle" CTA panel — the single instance of the brand color as a card background.

**`stats-number`** — Gumdrop blue text at `{typography.display-md}` (51px/500). The three impact metrics in the stats strip.

**`tab-active`** — Gumdrop blue fill, white text, 10px radius. The selected product category tab in the open-economy grid.

**`tab-inactive`** — Transparent, aubergine text, hairline border, 10px radius. The unselected state.

**`text-input`** — White fill, aubergine text, 8px radius, 10.25×12px padding. The email field in the footer newsletter strip.

**`news-card`** — White fill, hairline border, 20px radius, 16px padding. News article cards in the "shaping what comes next" section.

## Do's and Don'ts

**Do** use the aubergine (#29233b) for both body text and button fills. The system's coherence comes from this single color carrying every role; introducing a separate button accent would create a competing voltage that the page doesn't support.

**Do** open every section with a 12px/500/uppercase eyebrow label before the display heading. The 28-occurrence regularity is a deliberate rhythm device; skipping the eyebrow makes sections feel like they start in the middle of a thought.

**Do** tint section backgrounds with the pale Jelly (#f6f2ff) or pale Gumdrop (#d9efff) variants rather than leaving sections on pure white. The periwinkle undertone across surfaces is the canvas identity; reverting to neutral white breaks the chromatic coherence.

**Do** reserve Gumdrop blue (#0073c3) for data-emphasis elements — stat counters, active tabs, link text. It appears in 54 occurrences, all carrying an action-state or data-emphasis signal.

**Don't** use the Jelly violet (#8656ef) for primary actions. The 67 occurrences are all text and border accents or gradient decoration — never a button fill. Using it as a CTA background introduces a third chromatic voice the system cannot support.

**Don't** set display headings above weight 500. The hero at 80px/500 is the loudest typographic moment; bumping to 700 makes the heading read as aggressive rather than confident. Weight 700 appears only at 28px card titles.

**Don't** use the aubergine border color (#29233b) for hairline dividers. It has 455 border occurrences but these are all for interactive elements (buttons, tab outlines, nav items). For card borders and dividers, use `{colors.hairline}` (#e1dfe8).

**Don't** introduce a pure-black canvas or a dark-mode section. The system's identity is light-surface with aubergine ink — the only dark-background element is the `{component.card-dark}` panel in the CTA section, which uses the aubergine as a fill rather than a neutral black.

## Known Gaps

- **Hover and focus states:** documented for `{component.button-primary-hover}` only. The full state matrix (focus rings, disabled opacity, active press) is not captured from the marketing surface.
- **3D orb animation:** the hero decoration is a Spline or WebGL-rendered 3D orb that rotates slowly. The end-state texture is visible in the screenshot; easing, rotation rate, and parallax depth are not captured as tokens.
- **Dark mode:** no dark-mode media query is declared in the extracted CSS. The product dashboard (Circle's internal tooling) may carry a dark-mode system; it is not represented here.
- **Mobile nav:** the captured desktop surface shows the full nav; mobile hamburger states and the sliding drawer are not captured.
- **Richer Jelly and Gumdrop sub-palettes:** the CSS declares 7 Jelly tones (50-500) and 5 Gumdrop tones (50-500), but the captured page uses only 3-4 of each. The full palette families are available for product-surface use not captured here.
- **USDC-specific branding:** the USDC product tile and the on-chain TX statistics use a distinct blue treatment; a dedicated USDC sub-brand system likely exists but is not separated in the extracted tokens.