--- version: alpha name: "Chime" website: "https://www.chime.com" description: >- A US mobile-first challenger bank whose brand identity centers on a saturated leaf green primary color that runs across the wordmark, the app icon, and every primary CTA on the marketing site, paired with a warm cream off-white canvas rather than the institutional pale-blue or pale-gray that legacy banks use. Type runs a humanist sans across every tier — friendly grotesque proportions rather than the serif-anchored authority of a Chase or a Wells Fargo. The system targets a younger demographic underserved by traditional banks; the cream canvas, rounded geometry, and conversational copy together signal accessibility rather than institutional weight. The captured marketing surface returned a Cloudflare bot-challenge interstitial rather than the live page; the tokens below reconstruct the documented brand surface from public sources and note the extraction gap in Known Gaps. seo: title: "Chime Design System for React — leaf-green primary, humanist sans, 14 components" metaDescription: "Chime's brand identity for a mobile-first US neobank — leaf green primary, cream canvas, friendly humanist sans, rounded geometry that signals accessibility rather than institutional weight." highlights: - "Leaf-green primary voltage — the brand green carries the wordmark, the app icon, and every primary CTA, the single chromatic move on the marketing surface" - "Cream canvas, not white — Chime's off-white is a warm cream that softens the saturated green and signals approachability rather than institutional authority" - "Humanist sans across every tier — friendly grotesque proportions rather than the serif-anchored display family that legacy banks use" - "Rounded geometry — card and button radii sit at 12-16px to read as tappable mobile UI rather than as desktop banking chrome" - "Mobile-first composition — the marketing site mirrors the app's vertical card stack rather than leaning on a horizontal desktop grid" tags: - "Banking & Payments" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Chime's brand identity inverts the visual conventions of US retail banking. Where Chase leans on a navy-blue serif wordmark with marble-and-glass institutional photography, and where Wells Fargo carries a deep red and a stagecoach mark that signals 170 years of incumbent history, Chime's marketing surface centers on a saturated leaf-green primary, a cream off-white canvas, rounded card geometry, and a humanist sans across every tier. The intended reading is conversational rather than institutional — the brand targets a younger US demographic that grew up with mobile-first finance apps and reads the legacy banks' navy-and-serif chrome as unfriendly. Chime's CTA pills, card surfaces, and small-caps labels all sit in the same softened mobile-app vocabulary the app itself uses; the marketing site is closer in spirit to a Cash App or a Venmo landing page than to a traditional bank's investor-relations portal. The DESIGN.md file packages the documented brand surface into a machine-readable spec for React tooling. Inside: 12 color tokens — one leaf-green voltage, two secondary product accents, a cream canvas, the warm-gray ink ladder, and a hairline tone for card outlines; 10 typography tokens running a humanist sans from a 40px / 600 display down to a 12px / 400 caption; 4 corner-radius tokens centered on 12-16px with a full-pill option for CTAs; 8 spacing values on an 8px base; and 14 component definitions covering the leaf-green pill primary button, the white-on-cream secondary, the rounded mobile-app cards, the small-caps category labels, and the marketing top-nav. Feed this file to an AI coding tool and it reproduces Chime's specific brand moves: leaf-green voltage held to wordmark and primary CTAs, cream-not-white canvas, humanist sans across every tier, and rounded mobile-app geometry instead of the squarer corners that traditional banking sites use. The one move worth borrowing only if you target a younger demographic underserved by incumbents: the willingness to look like a mobile app rather than like a legacy institution. Chime's marketing surface trades institutional gravity for tappable approachability — a trade that signals "different from your parents' bank" more clearly than any tagline could. 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.chime.com" title: "Chime — official site" description: "Chime's public marketing site — the source of truth for the live tokens this file documents." - 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 Chime's primary brand color?" answer: "Chime's brand voltage is a saturated leaf green captured as hex 1ec677 in the documented brand palette — a warm, slightly yellow-shifted green that reads as friendly rather than institutional. It carries the wordmark, the app icon background, every primary CTA pill on the marketing site, and the active-state highlight inside the product. The green is paired with a warm cream canvas rather than the institutional pale-blue or pale-gray that legacy US banks use; the warm-on-warm pairing is the single chromatic signature of the brand. Note: the live extraction was blocked by a Cloudflare bot challenge, so the tokens here reconstruct the documented surface rather than reading from a live page render." - id: "typography" title: "What typeface does Chime use, and what should I use as a substitute?" answer: "Chime's marketing site uses a humanist sans family across every typographic tier — display, heading, body, button, label. The captured page returned a system-ui fallback stack rather than the actual brand family, so the documented tokens here use the system-ui safety stack as a placeholder. The visible brand identity in app screenshots and marketing collateral suggests a Circular-style or General-Sans-style humanist grotesque — friendlier proportions than Helvetica or Inter, with slightly open counters and a soft terminal on lowercase. For a substitution that matches the documented brand feel, General Sans, Inter at 95% line-height, or DM Sans all read close enough." - id: "canvas-color" title: "Why does Chime use a cream canvas instead of pure white?" answer: "Chime's off-white surfaces render as a warm cream rather than pure 0xffffff white. The choice is deliberate and consistent — the cream warms the saturated leaf-green voltage and signals approachability rather than the institutional pale-blue or pale-gray that legacy banks use as their canvas tone. Cream-on-green warmth is the brand's structural pairing; replacing the cream with pure white would tip the system toward the colder mobile-app vocabulary of a typical fintech and lose the warmth that distinguishes Chime from category siblings." - id: "extraction-blocked" title: "Why does the Chime extraction report so few tokens?" answer: "The live design-extractor run against chime.com returned a Cloudflare bot-challenge interstitial rather than the actual Chime marketing page. The two captured colors (hex 313131 and hex 0000ee) and the system-ui typography stack belong to the Cloudflare challenge page, not to Chime. The tokens documented below are reconstructed from public brand sources (the Chime app, the marketing screenshots, the documented brand palette) rather than from a live page render. Treat them as a documented best-guess starting point rather than as an exact snapshot of the live tokens; a re-run from an authenticated browser session or via Chime's own brand portal would produce a higher-fidelity capture." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own US neobank marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Chime's documented moves: leaf-green primary voltage held to the wordmark and primary CTAs, cream-not-white canvas, humanist sans across every tier, and rounded mobile-app geometry instead of square legacy-banking corners. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the live extraction was bot-blocked, so the token values here are documented best-guesses; you may want to verify the exact hexes against your own captures before shipping production CSS." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#1ec677" primary-dark: "#0a9551" primary-soft: "#d9f5e7" accent-violet: "#7a5cf0" accent-coral: "#ff8a5c" cream: "#fdf9f0" canvas: "#ffffff" ink: "#313131" ink-soft: "#525252" ink-muted: "#7a7a7a" hairline: "#e5e0d4" link: "#0000ee" typography: display-xl: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 48px fontWeight: 600 lineHeight: 56px letterSpacing: "-1px" display-lg: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 40px fontWeight: 600 lineHeight: 50px letterSpacing: "-0.5px" heading-md: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 30px letterSpacing: "-0.24px" heading-sm: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 24px letterSpacing: "-0.18px" body-md: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 caption: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 label-md: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 20px letterSpacing: "0.4px" button-md: fontFamily: "system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 24px letterSpacing: 0 mono-sm: fontFamily: "monospace" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0 rounded: none: "0px" sm: "8px" md: "12px" lg: "16px" full: "9999px" spacing: xs: "4px" sm: "8px" base: "16px" md: "24px" lg: "32px" xl: "48px" 2xl: "64px" 3xl: "128px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.cream}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "14px 32px" height: "52px" button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.cream}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "14px 32px" height: "52px" button-secondary: backgroundColor: "{colors.cream}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "14px 32px" height: "52px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.cream}" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "16px 32px" height: "72px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "8px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.body-md}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" borderColor: "{colors.hairline}" card-green: backgroundColor: "{colors.primary-soft}" textColor: "{colors.primary-dark}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" small-caps-label: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.label-md}" app-icon: backgroundColor: "{colors.primary}" textColor: "{colors.cream}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: "0" height: "56px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.cream}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 32px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 48px | 600 | 56px | Hero h1 — "Bank with confidence" / "Get paid up to 2 days early" | | `{typography.display-lg}` | 40px | 600 | 50px | Section h2 — feature-cell display headlines below the fold | | `{typography.heading-md}` | 24px | 600 | 30px | Sub-section titles, larger feature-cell headings | | `{typography.heading-sm}` | 18px | 600 | 24px | Card titles, small feature headings | | `{typography.body-md}` | 16px | 400 | 24px | Default running text, paragraph body | | `{typography.body-sm}` | 14px | 400 | 20px | Caption rows, footer link text | | `{typography.caption}` | 12px | 400 | 18px | Disclosures, footnotes, legal-fine-print | | `{typography.label-md}` | 14px | 600 | 20px | Small-caps category labels above feature cells (0.4px tracking) | | `{typography.button-md}` | 16px | 600 | 24px | Primary and secondary button labels | | `{typography.mono-sm}` | 12px | 400 | 18px | Reserved for product-screen account numbers and routing numbers | ### 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.