What is Citi's primary brand color?

Citi declares deep navy #002d72 as its CSS primary (wired as --cdsbs-primary and --cdsbs-focus-ring-color) and marks it as layer: brand in the extraction. However, the color that appears most visibly across the rendered marketing page is cerulean #056dae — wired as --cdsbs-link-color and appearing 115 times (52 as text, 55 as border, 8 as background). The dual-blue system is intentional: navy anchors the brand identity and appears in the logo, the nav stripe, and the focus ring; cerulean carries every interactive surface — links, CTAs, the sign-on button. The arc wordmark uses both, with the arc itself in a saturated blue-red sweep.

What typeface does Citi use, and what should I substitute?

Citi runs Interstate exclusively — a proprietary geometric highway sans-serif — in three weight variants: Interstate_Light (weight 300) for caption and small body text, Interstate_Regular (weight 400) for nav links and running text, and Interstate_Bold (weight 700) for display headlines (42px) and emphasis labels. There is no secondary or serif family. The closest open-source substitute for Interstate is Barlow (which shares the squared-off geometry) or Franklin Gothic at the bold tier. Inter works well for the Regular and Light tiers but reads slightly narrower than Interstate's characteristic width.

Why is Citi's page white instead of navy?

The white canvas is a deliberate accessibility and trust signal for a retail banking brand. Citi's primary audiences include credit-card applicants and banking customers reading product details and fine print — a dark or colored canvas would increase cognitive load for dense legal disclaimers and product comparison tables. The navy is held for the top navigation (branded, identity-carrying) and the Citi arc logo. Below the nav, white lets the product photography (credit card renders, lifestyle imagery) carry all visual weight without competing with a tinted canvas. Wells Fargo uses the same convention; Chase applies a darker navy primarily to its hero band.

What do Citi's buttons look like?

Citi's primary button is a cerulean #056dae fill with white text, Interstate_Regular at 16px / 400 weight, 8px corner radius, and approximately 11px top/bottom padding at 15–20px horizontal padding, rendering at 46px height. A secondary outlined variant uses the same cerulean as border and text on a white or light-blue fill. The CTA labels are short imperatives — 'Learn More', 'Apply Now', 'Explore Rewards'. There is no pill variant; every button uses the practical 8px radius shared by cards and inputs. Button hierarchy is driven by fill (primary) vs. outline (secondary) rather than by size difference.

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

Yes — the file is built to feed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Citi's specific moves: dual-blue wayfinding (navy brand, cerulean interactive), Interstate weight system, 8px radius on every surface, and white-canvas banking layout with light-grey section bands. The token references resolve cleanly: {colors.primary} for the brand navy, {colors.link} for cerulean, {typography.display-xl} for the 42px headline. One nuance: the system does not expose a product-tier color split (unlike Cloudflare's domain colors), so all product categories (credit cards, banking, loans, investing) share the same cerulean accent — a deliberate homogeneity that keeps the page from feeling chaotic.

Citi Design System

Citi's marketing-site design system as a DESIGN.md file.

About Citi DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source citi.com

Banking & Payments

Citi's homepage is a banking page in the most literal sense: white canvas, navy top navigation, cerulean link text everywhere, card product photography, and dense utility navigation above the fold. The Citi arc logo — the two blue arcs framing the wordmark — is the only expressive brand mark on the page. Below it, the system is entirely workhorse. Where Chase leans on dark navy fills and JPMorgan applies institutional photography at scale, Citi holds everything on white and lets the cerulean link color do all the wayfinding. The hero area is a light blue-tinted band that sits just below the nav, not a full-bleed canvas; the brand color never escapes to fill a section.

The DESIGN.md file packages the system into machine-readable tokens for React and AI tools. Inside: 12 color tokens anchored by deep navy #002d72 (the CSS --cdsbs-primary, layer: brand) and cerulean #056dae (appearing 115 times as the link and interactive surface color), with a supporting cast of near-black #333333 for body text, white for the canvas, and a light grey #f4f4f4 for alternate section fills. Typography runs Interstate exclusively — Light at 300 weight for caption and body, Regular at 400 for nav and running text, Bold at 700 for display headlines (42px) and label accents. Fifteen components cover the dual-button nav, credit card product tiles, the sign-on form, and the primary CTA.

Feed this file to an AI coding tool and it reproduces Citi's specific moves: dual-blue wayfinding, Interstate weight system, 8px radius on every interactive surface, and white-canvas banking-first layout. The one discipline worth borrowing for any financial product: separating the brand blue (deep navy, used sparingly for the logo and primary variable) from the interactive blue (cerulean, used everywhere that needs to feel clickable), rather than collapsing both into a single brand accent. Citi's link color and button color are the same cerulean — a deliberate convention that trains users to trust the color as interactive rather than decorative.

What makes it distinct

Dual-blue hierarchydeep navy #002d72 anchors the brand primary while cerulean #056dae carries all interactive link and CTA surfaces, appearing 115 times across the page
Interstate across every tierthe proprietary highway sans runs in three weights (Light/Regular/Bold) with no secondary family, from 42px display to 12px caption
Institutional white canvasthe page floor is pure white with light grey (#f4f4f4) section bands; no hero canvas fill, no expressive color moments outside the nav
8px default radiusconsistent rounded-md on every card, button, and input; the system neither commits to sharp corners nor to generous rounding
High-density nav with utility linksthe top nav bands a thin utility strip (Find a branch, Sign on) above the primary product nav (Credit Cards, Banking, Loans, Investing)

Live at citi.com

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

citi.com

Explore Citi

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.

Citi design system FAQ

Common questions about Citi'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.

Citi — official site

Citi's public 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.