Chime Design System

Overview

Chime's brand identity does something most US retail banks would not attempt. Mobile-app-as-marketing. The marketing surface mirrors the visual vocabulary of the Chime mobile app itself — leaf-green primary voltage, cream off-white canvas, humanist sans across every tier, rounded card geometry, and pill-shaped CTAs — rather than borrowing the navy-serif institutional vocabulary that incumbents like Chase, Wells Fargo, and Bank of America use as marketing chrome. Where Chase leans on a navy-blue serif wordmark with marble-and-glass institutional photography, and where Wells Fargo carries a deep red mark that signals 170 years of incumbent history, Chime's marketing surface looks like an app-store screenshot: tappable, conversational, designed to be operated by a thumb rather than read by a wealth manager.

The single chromatic move is the leaf-green primary ({colors.primary} — #1ec677), used on the wordmark, the app icon background, every primary CTA pill on the page, and the active-state highlights inside product screenshots. Paired with the cream canvas ({colors.cream} — #fdf9f0), the warm-on-warm pairing reads softly rather than institutionally. The accent colors ({colors.accent-violet} #7a5cf0 and {colors.accent-coral} #ff8a5c) appear sparingly across product surfaces and category-specific illustrations but never compete with the leaf green for primary-action duty.

The typography tier runs a humanist sans across every surface — display at 40-48px in weight 600 with tight negative tracking, body at 16px in weight 400, button labels at 16px in weight 600. The captured page (a Cloudflare bot-challenge interstitial) returned a system-ui safety stack rather than the actual brand family; the tokens here document the visible brand voice via the system-ui placeholder, and the Known Gaps note records the extraction limitation.

Key Characteristics:

• Leaf-green primary voltage ({colors.primary} — #1ec677) carries the wordmark, the app icon, and every primary CTA pill — the single chromatic brand element.
• Cream canvas ({colors.cream} — #fdf9f0) rather than pure white — warms the leaf green and softens the marketing surface away from institutional pale-blue or pale-gray.
• Humanist sans across every typographic tier — friendlier grotesque proportions than Helvetica, deliberately chosen to read conversational rather than corporate.
• Rounded geometry — cards at {rounded.lg} 16px, buttons at {rounded.full} pill, app icon at {rounded.md} 12px — every surface is tappable rather than squared.
• Two product-accent colors ({colors.accent-violet} #7a5cf0 and {colors.accent-coral} #ff8a5c) scoped to category illustrations and feature icons, never to primary actions.
• Vertical card-stack composition on the marketing surface mirrors the app's home screen rather than leaning on a horizontal desktop grid.
• Small-caps labels in {typography.label-md} with 0.4px tracking carry category names above feature cells — the mono-style emphasis without an actual monospace voice.
• 8px base spacing module with major tokens at 16, 24, 32, 48, 64, 128 — mobile-app rhythm rather than desktop editorial rhythm.

Colors

Brand

• Leaf Green ({colors.primary} — #1ec677): the single brand voltage, carried by the wordmark, the app icon background, every primary CTA pill on the marketing site, and the active-state highlights inside product screenshots. The leaf green is warmer and slightly yellow-shifted compared to the cyan-tinted greens used by competing fintechs (Robinhood, Wealthfront); the warmth pairs intentionally with the cream canvas.
• Leaf Dark ({colors.primary-dark} — #0a9551): the hover and press variant for the primary CTA, one step darker. Also used as text color inside the soft-green card variant where the saturated primary would be too aggressive as foreground ink.
• Leaf Soft ({colors.primary-soft} — #d9f5e7): a pale tint of the brand green, used as the background fill of soft-green emphasis cards on the marketing surface. Reads as a brand-tinted callout without competing with the saturated primary.
• Accent Violet ({colors.accent-violet} — #7a5cf0): used sparingly across category illustrations and the savings-feature surface. A complementary secondary that does not appear on primary actions.
• Accent Coral ({colors.accent-coral} — #ff8a5c): used in the rewards and cashback feature illustrations. The warmest accent in the palette, reserved for celebration and reward contexts.

Surface

• Cream ({colors.cream} — #fdf9f0): the dominant off-white surface. The page floor, the top-nav background, the footer background, and the secondary-button fill all use cream rather than pure white. The warmth is consistent and deliberate.
• Canvas ({colors.canvas} — #ffffff): pure white, used inside hairline-bordered cards where the cream's warmth would compete with the card's content. The cards lift off the cream floor visually because of the white-on-cream contrast.

Text

• Ink ({colors.ink} — #313131): the dominant text color. Display headlines, body paragraphs, primary nav labels, and button text on the secondary variant all use ink. Never pure black; the warm dark gray reads softer than a true black against the cream canvas. This is one of two hexes the live extraction captured (it was the text color on the Cloudflare bot-challenge interstitial — but it also matches Chime's documented brand surface).
• Ink Soft ({colors.ink-soft} — #525252): a secondary running-text tone used inside long-form body copy and in small-caps category labels where ink would feel too heavy.
• Ink Muted ({colors.ink-muted} — #7a7a7a): the tertiary tone used for metadata, footer link rows, and inline help text.

Hairlines

• Hairline ({colors.hairline} — #e5e0d4): a warm-gray border tone calibrated to read on the cream canvas. The hairlines on cards, input fields, and section dividers all use this single tone; the system is mono-hairline.

Semantic

• Link ({colors.link} — #0000ee): captured on the Cloudflare interstitial as the browser-default blue underlined link color. The live Chime marketing surface likely overrides this to the brand green for in-body links, but the extraction was blocked before the override could be captured.

Typography

Font Family

The captured page returned a system-ui safety stack (system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) rather than the actual Chime brand family — because the captured surface was a Cloudflare bot-challenge interstitial, not the live marketing page. The documented brand voice across Chime's app, marketing collateral, and brand portal suggests a humanist grotesque in the Circular / General Sans / DM Sans family — friendlier proportions than Helvetica or Inter, with slightly open counters and soft lowercase terminals.

The system-ui fallback rendered in the tokens here will resolve to the native UI sans on each operating system (San Francisco on macOS / iOS, Segoe UI on Windows, Roboto on Android), which is itself a humanist grotesque on the most common reading devices.

Hierarchy

Principles

Display weight stays at 600 — heavier than Stripe's weight 300 or Cloudflare's weight 500, but lighter than the institutional 700-800 that legacy US banks lean on for display. The 600 weight reads as friendly authority rather than as either light editorial or heavy corporate gravity. Tight negative tracking (-1px on the 48px display, -0.5px on the 40px display) gives the display tier a contemporary fintech feel without tipping into ultra-tight grotesque density.

Small-caps category labels with 0.4px positive tracking carry the "category emphasis" role that monospace metadata carries in a Cloudflare-style system. The decision to use a tracked sans for labels rather than a true monospace voice fits the friendly humanist register; an Apercu Mono Pro voice would have read too technical for the consumer-banking context.

Note on Font Substitutes

For the documented brand voice (humanist grotesque), close open-source substitutes include General Sans (closest in feel but partly licensed), DM Sans (free via Google Fonts, slightly tighter), and Inter at 95% line-height (universally available, slightly more neutral). The system-ui stack documented in the tokens will fall back to native UI sans on each platform, which is itself a reasonable approximation.

Layout

Spacing System

• Base unit: 8px — the dominant mobile-app gap value.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.2xl} 64px · {spacing.3xl} 128px.
• Section padding (vertical): ~128px between major marketing bands on the desktop render.
• Card internal padding: {spacing.md} (24px) for the default card surface and the green-tinted callout card.
• Top-nav padding: 16×32 — the horizontal page gutter sits at 32px on the desktop render.

Grid & Container

• Max content width: ~1080px on the centered marketing block, expanding to ~1280px on full-width product illustrations.
• Hero: centered display headline with a 1-2 line sub-paragraph dek beneath, followed by a primary pill CTA. The composition mirrors the app's onboarding screens — vertically stacked rather than horizontally split.
• Feature rows: alternating left-image / right-text rows with the product screenshot in a rounded card frame and the text held in a narrow column to the side.
• App-store badges: Apple and Google Play badges sit beneath the primary CTA on the hero, signaling the mobile-first product orientation.

Rhythm

The page alternates between wide breathing bands (hero, transition rows) and dense product screenshots (mobile-app screens, account dashboards). The breathing bands carry typography and CTAs only; the dense bands carry the brand's app-screen vocabulary. The rhythm is closer to a mobile-app store listing than to a traditional desktop banking site.

Elevation

The system uses rounded soft cards with subtle shadows rather than the hairline-only approach that dev-tools systems favor:

• Card shadow: marketing-surface cards lift off the cream floor with a soft warm-gray drop shadow at low opacity — readable as elevation without industrial weight.
• Hairline lift: card outlines use a single warm-gray {colors.hairline} (#e5e0d4) tone calibrated to read on the cream surface; the hairline does some of the elevation work that shadows would carry in isolation.
• App-icon shadow: the leaf-green app icon sits with a slightly more pronounced shadow to read as a tappable mobile-OS icon rather than as page chrome.
• Flat-on-cream: the hero headline, section displays, and body paragraphs sit flat against the cream floor with no shadow or border.

Shapes

The radius scale is mobile-app rounded:

• {rounded.none} 0px — reserved for full-bleed product illustrations and the footer link rows.
• {rounded.sm} 8px — small UI surfaces (chips, inline tags, small buttons).
• {rounded.md} 12px — the app icon, text input fields, and small cards.
• {rounded.lg} 16px — the dominant card radius; default for feature cards, callout cards, and product-screenshot frames.
• {rounded.full} 9999px — primary and secondary CTA pills; the warmest, most-tappable surfaces on the marketing page.

The system skips the 4px sharp tier that dev-tools systems use; even the smallest UI surfaces start at 8px. The combination of 12-16px default rounding plus full-pill CTAs is what makes the marketing surface read as mobile-app vocabulary rather than as desktop-banking chrome.

Components

button-primary — The signature CTA. Leaf-green {colors.primary} fill, cream {colors.cream} text, {rounded.full} pill radius, 14×32 padding, 52px height. "Get started" and "Open account" are the canonical instances, sitting beneath the hero headline and on every feature-row CTA.

button-primary-hover — Background flips to {colors.primary-dark} for the press state, with cream text held constant.

button-secondary — Cream {colors.cream} fill with ink text and a 1px ink-colored border. {rounded.full} pill, same 14×32 padding and 52px height as the primary, giving the two CTA variants identical silhouette.

top-nav — Cream {colors.cream} surface with the leaf-green wordmark flush left, product links (Features / Banking / Credit Builder / Spot Me / Help) center, and Login + Open Account CTAs flush right. 72px height, 16×32 padding.

nav-link — Transparent background, ink text in {typography.body-md}, 8×16 padding. The labels sit at the same baseline as the right-side CTA pills.

hero-heading — Ink text on the cream canvas, {typography.display-xl} (48px / 600). The largest single typographic moment on the marketing surface.

section-heading — Ink text at {typography.display-lg} (40px / 600) for the section h2s below the fold ("Banking made awesome", "Get paid early", "Build your credit").

body-paragraph — Ink-soft text at {typography.body-md} (16px / 400) — the default running-text style for marketing body copy.

card — White {colors.canvas} surface, 1px warm-gray hairline border, {rounded.lg} 16px radius, 24px internal padding. The default feature card on the cream floor; lifts off the cream visually because of the white-on-cream contrast.

card-green — Soft-green {colors.primary-soft} fill, leaf-dark text, {rounded.lg} 16px radius, 24px padding. The brand-tinted callout card variant — used for the highlighted benefit or rewards-percentage emphasis blocks.

small-caps-label — Ink-soft text in {typography.label-md} (14px / 600 with 0.4px positive tracking) above feature cells. The category-emphasis voice — sans rather than monospace, but doing the same labor a monospace label would do in a dev-tools system.

app-icon — Leaf-green {colors.primary} background, cream Chime mark, {rounded.md} 12px radius, 56px square. The mobile-OS app icon shape, used inline on the marketing surface to reinforce the mobile-first product orientation.

text-input — White surface, ink text, 1px warm-gray hairline border, {rounded.md} 12px radius, 12×16 padding, 48px height. Form fields on the sign-up flow.

footer — Cream {colors.cream} floor, ink-muted text, 48×32 padding. Links sit in a multi-column grid with category headings in small-caps and child links beneath; legal disclosures run as caption-tier text along the bottom row.

Do's and Don'ts

Do treat the leaf-green voltage as a single moment on the brand surface — wordmark, app icon, primary CTA pills only. Multiplying it into section-header strips or feature-grid accents would dilute the only chromatic brand signal in the marketing chrome.

Do use the cream {colors.cream} (#fdf9f0) — never pure #ffffff — for the page floor, top-nav, secondary-button fill, and footer. The warm-on-warm pairing with the leaf green is the system's structural signature; substituting pure white tips the system toward a colder fintech vocabulary.

Do keep display weight at 600. The 600 weight reads as friendly authority — heavier than 500 (which would feel too light for a banking brand) and lighter than 700+ (which would read as institutional gravity rather than approachable confidence).

Do render the small-caps category labels in {typography.label-md} (14px / 600 with 0.4px positive tracking) using the same humanist sans as the body text. Reaching for a monospace voice would tip the system toward dev-tools register and away from the consumer-banking warmth.

Don't use {colors.accent-violet} or {colors.accent-coral} on primary actions. They are scoped to category illustrations and feature-specific surfaces; placing them on a CTA would compete with the leaf-green voltage and weaken the single-color discipline.

Don't substitute pure black for {colors.ink} (#313131). The warm dark gray reads softer against the cream canvas; a true black would feel institutional rather than approachable, and would clash with the cream warmth.

Don't introduce sharp 0-4px corner radii on the marketing surface. The system's softest moments (full-pill CTAs) and warmest moments (16px cards) depend on the absence of sharp corners; adding them would borrow legacy-banking chrome.

Don't use the captured {colors.link} (#0000ee) browser-default link blue inline. It was captured from the Cloudflare bot-challenge interstitial, not from the live Chime marketing page; the actual brand surface almost certainly overrides browser-default link colors to the leaf-green primary or a darker semantic link tone.

Known Gaps

• Live extraction blocked: the design-extractor run against chime.com returned a Cloudflare bot-challenge interstitial rather than the live marketing page. The two captured colors (#313131 and #0000ee) and the system-ui typography stack belong to the challenge page, not to Chime. The tokens above reconstruct the documented brand surface from public sources (the Chime app, marketing collateral, app-store screenshots) and are flagged here as a documented best-guess rather than a live snapshot.
• Actual brand font: Chime's marketing site likely runs a humanist grotesque (Circular, General Sans, or a custom brand family); the captured fallback was the system-ui stack. A re-run from a non-blocked client or via Chime's brand portal would resolve the exact family name and weights.
• Exact brand hex values: the leaf-green primary, soft-green tint, accent violet, and accent coral hexes documented here are reconstructed from app screenshots and brand portal references; the exact CSS variable values on the live marketing site may shift by a few points from the values above.
• Dark mode: the Chime app surfaces a dark theme; the marketing site is documented as light-only. Dark variants of the leaf green, cream, and ink tones are not represented here.
• Hover, focus, and disabled states: documented for the primary CTA hover variant only. The full state matrix for the secondary button, nav links, and text input is not exposed in the reconstructed surface.
• Form input validation: the text-input component carries the resting state; error / success / loading states live inside the product onboarding flow and are not represented here.
• Motion: Chime's marketing surface likely uses subtle entry animations on feature-row scroll-into-view; the spec captures end-state values only.
• Product surfaces: this DESIGN.md documents the marketing brand surface only. The Chime app itself (the home screen, account detail views, transaction lists, payment flows, Credit Builder, Spot Me, savings) carries a much richer token system that is not represented here.