---
version: alpha
name: "Intuit"
website: "https://www.intuit.com"
description: >-
  A financial-software parent brand whose marketing site is structured as a portfolio site rather than a product site — TurboTax, QuickBooks, Credit Karma, and Mailchimp are the products, and the intuit.com chrome exists to introduce them. The hero is a saturated Superblue block #236cff carrying a 72px AvenirNext forINTUIT h1 in white, with a sky-blue 100px-pill primary CTA. Below the fold the page inverts to a white canvas with a soft sand surface tier #f4f5f8 and runs a 3-column tabbed card grid ("Consumer / Small Business / Individuals") in 6px-rounded cards. The custom display family AvenirNext forINTUIT runs at weight 400-700 across every tier; there is no second family. Brand voltage equals canvas: the same Superblue carries the hero block, the CTA, the link text, and the focus ring.

seo:
  title: "Intuit Design System for React — Superblue #236cff, AvenirNext forINTUIT, 18 components"
  metaDescription: "Intuit's parent-brand marketing system as a DESIGN.md file. Saturated Superblue #236cff as hero canvas and brand voltage, AvenirNext forINTUIT at 72px / 400, soft sand surfaces, 18 components."
  highlights:
    - "Superblue as both canvas and voltage — #236cff fills the hero block AND carries the primary CTA AND the link text; the single brand colour does three jobs"
    - "AvenirNext forINTUIT across every tier — display at 72px / 400 in white-on-Superblue, body at 14-16px / 400-500, with weight 700 reserved for h-eyebrow labels"
    - "Soft sand tier — the off-canvas surface is #f4f5f8 (warm pale grey), not pure white; wired into both `--color-grey-rw-tofu` and `--web-refresh-skyblue-01`"
    - "Tabbed segment grid — a 3-tab control ('Consumer / Small Business / Individuals') drives a 3-column card switch, mirroring the parent-brand's product taxonomy"
    - "Sub-brand colour discipline — the page itself shows zero TurboTax green, QuickBooks blue, Credit Karma cyan, or Mailchimp yellow; sub-brand voltages live only on their own product pages"
  tags:
    - "Fintech & Crypto"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Intuit's marketing site is a parent-brand portal rather than a product page. The hero is a saturated Superblue block at `--color-ies-super-blue` #236cff, carrying a 72px AvenirNext forINTUIT h1 in white that reads "Outdo your financial goals — all in one place." A skyblue 100px pill CTA sits beneath the h1, with a small product-photo card floating to the right showing a portrait above the line "Expertise that helps you file smarter." Below the fold the page inverts to white over a soft sand surface #f4f5f8, runs a 3-tab segment control ("Consumer / Small Business / Individuals") that drives a 3-column card switch, then a row of dark-Superblue product tiles for the partnerships (Intuit AssistOpenAI, etc.).

    The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 colour tokens drawn from the Superblue voltage, the deep blueberry #00254a accent, a structural tier of greyscale ink and the soft sand surface, and a small set of muted accents that appear in below-the-fold illustrations; 11 typography tokens running AvenirNext forINTUIT (a custom proprietary family wired as `--font-primary`) at sizes 12-72px and weights 400-700, with the 72px / 400 hero h1 as the loudest typographic moment; 4 radius tokens centred on 6px small chips, 32px rounded cards, and 100px pills; 8 spacing tokens on a 4px base; and 18 components covering the Superblue hero block, the pill CTA, the tabbed segment, the 3-column tabbed card grid, the dark Superblue partner tile, and the standard top-nav cluster.

    Feed this file to Claude or Cursor and it will reproduce Intuit's specific moves: saturated Superblue hero block instead of a gradient, voltage-as-canvas discipline, 72px / 400 AvenirNext-equivalent display, soft sand surfaces below the fold instead of pure white, tabbed segment control for product taxonomy, and the sub-brand colour reserve (the parent-brand chrome carries zero TurboTax / QuickBooks / Credit Karma / Mailchimp accent). The token references resolve cleanly. The one move worth borrowing only if you have a true parent-brand portfolio: the tabbed segment that swaps the whole card grid — it only earns its place when the audience splits cleanly into three groups that need different proof points, which is rare outside fintech / commerce parent brands.
  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.intuit.com"
      title: "Intuit — official site"
      description: "Intuit's public parent-brand 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 Intuit's primary brand color?"
      answer: "Intuit's parent-brand voltage is Superblue #236cff, wired into the page CSS as --color-ies-super-blue, --web-refresh-intuit-superblue, --web-refresh-omni-brand-blue, --color-blue-07, and 8 other variables. Across the captured page it appears 43 times — 18 as text, 18 as border, 4 as background fill, 2 as shadow, 1 as gradient endpoint. The deeper blueberry #00254a wired as --web-refresh-blueberry-110 is the secondary brand accent, used as the dark tile background for the partner cards below the fold. Sub-brand colours from TurboTax (green), QuickBooks (blue-green), Credit Karma (cyan), and Mailchimp (yellow) are absent from the parent-brand chrome by design."
    - id: "typography"
      title: "What typeface does Intuit use, and what should I use as a substitute?"
      answer: "Intuit runs a custom proprietary family called AvenirNext forINTUIT across every tier — wired as --font-primary, the system has no second family. The hero h1 sits at 72px in weight 400 with 76px leading, in white on the Superblue hero block. h3 sub-section titles run at 32px / 500, body copy at 14-16px / 400, eyebrow labels at 14px / 500. Weight 700 is reserved for the small 16px section h2s ('Expertise that helps you file smarter'). AvenirNext forINTUIT is licensed; the closest open-source substitute is Nunito Sans at the same weights, or Inter at 95% line-height if you need tighter counters at the 14-16px body sizes. The 72px / 400 hero weight is the move to preserve when substituting."
    - id: "sand-surface"
      title: "Why is the below-fold canvas a soft warm grey instead of pure white?"
      answer: "Below-the-fold sections render on a soft sand surface #f4f5f8 — a pale warm grey wired as --color-grey-rw-tofu, --web-refresh-skyblue-01, and --color-blue-rw-sky-blue (note the multi-namespace aliasing). The colour reads as warmer than the cold pure-white #ffffff used inside cards. Pure white is reserved for the card fills (the 3-column tabbed product tiles, the product-photo card on the hero), so the sand surface serves as the 'page floor' against which white cards lift. This is consistent with parent-brand chrome convention — a tinted surface signals 'this is a portfolio page, not a feature page' and gives the eye somewhere to rest between dense card grids."
    - id: "tabbed-segment"
      title: "What is the 3-tab segment control on the page?"
      answer: "Below the hero, a 3-tab segment control reads 'Consumer / Small Business / Individuals' (with 'Small Business' active in the captured state). Clicking each tab swaps the 3-column card grid beneath, surfacing three portfolio cards each. The segment is rendered as a 32px-rounded white pill on the sand surface, with the active tab pill-rounded at 100px in Superblue #236cff. The pattern mirrors the parent brand's product taxonomy — TurboTax for consumers, QuickBooks for small businesses, Mint/CreditKarma for individuals — and exists because Intuit's audience splits cleanly into three distinct customer journeys. Each tab loads photographs and 'How {audience} drives success' headers tuned to that group."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React fintech parent-brand 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 Intuit's specific moves: saturated Superblue hero block #236cff, white-on-blue display at 72px / 400, AvenirNext-equivalent across every tier, sand-not-white below-fold canvas, 100px pill CTAs, tabbed 3-column card grid, and the deep blueberry partner tile pattern. The token references resolve cleanly. The one move worth borrowing only if you have a true parent-brand portfolio is the tabbed segment — it carries the audience-split metaphor, and using it without genuine audience segmentation reads as decorative."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#236cff"
  primary-dark: "#0655ee"
  navy-deep: "#00254a"
  navy-darkest: "#06132b"
  ink: "#21262a"
  ink-soft: "#393a3d"
  ink-near-black: "#101010"
  ink-pure-black: "#000000"
  canvas: "#ffffff"
  surface-sand: "#f4f5f8"
  surface-mint: "#c2f5ff"
  surface-pink: "#ffd1e9"
  accent-cyan: "#33b5ff"
  accent-red: "#ff3232"

typography:
  display-xl:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 76px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 52px
    letterSpacing: 0
  display-md:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: 0
  heading-lg:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 42px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: 0
  body-md:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  label-bold:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: 0
  button-md:
    fontFamily: "\"AvenirNext forINTUIT\", Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "6px"
  md: "32px"
  lg: "40px"
  xl: "80px"
  pill: "100px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "10px"
  base: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "40px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
    height: "40px"
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
    height: "40px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
    height: "40px"
    borderColor: "{colors.primary}"
  button-tertiary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    padding: "8px 0px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    height: "72px"
    padding: "8px 0px"
    borderColor: "{colors.surface-sand}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "8px"
  hero-block:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "32px 0px 0px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  hero-sub:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.display-md}"
  card-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.label-bold}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-pure-black}"
    typography: "{typography.body-sm}"
  segment-tabs:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "4px"
    height: "48px"
  segment-tab-active:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  segment-tab-inactive:
    backgroundColor: "transparent"
    textColor: "{colors.ink-soft}"
    typography: "{typography.label-md}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "20px"
  hero-product-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  partner-tile:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.sm}"
    padding: "24px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-soft}"
    typography: "{typography.body-sm}"
    padding: "40px"
    borderColor: "{colors.surface-sand}"
---

## Overview

Intuit's marketing site does something almost no other consumer-financial brand does. **Voltage as canvas.** The hero is a saturated Superblue block at `{colors.primary}` (#236cff) — not a gradient mesh, not a photographic image, just a flat colour fill — carrying a 72px AvenirNext forINTUIT h1 in white. The same Superblue carries the primary CTA pill, the link text, the focus ring, and the active segment tab. One hex does the work of canvas, voltage, link, and focus. Where Stripe runs an iridescent gradient under its hero and Wise paints a soft mint hero block with a green CTA, Intuit's hero is the most stripped-back of the financial-software parent brands — a single saturated blue carrying a single editorial sentence.

The system's restraint shows most clearly in what is absent. Intuit owns TurboTax (green), QuickBooks (blue-green), Credit Karma (cyan), Mailchimp (yellow), and Mint — five sub-brands with distinctive primary voltages. The parent-brand chrome on intuit.com renders none of those colours. The captured page shows zero TurboTax green, zero Mailchimp yellow, zero Credit Karma cyan, zero QuickBooks blue-green; the sub-brand voltages are reserved for the sub-brand pages. The parent surface trusts the single Superblue plus a deep blueberry `{colors.navy-deep}` (#00254a) for the partner-tile band, and that is the whole brand palette.

Below the fold the page inverts to a soft sand surface `{colors.surface-sand}` (#f4f5f8) — a warm pale grey wired as `--color-grey-rw-tofu` AND `--web-refresh-skyblue-01` (note the multi-namespace aliasing into a "skyblue-01" alias that signals the colour is technically a blue-tinted grey). Pure white `{colors.canvas}` is reserved for card fills, so the sand surface serves as the page floor against which white product cards lift. A 3-tab segment control ("Consumer / Small Business / Individuals") sits between the hero and the card grid, swapping a 3-column card switch beneath as the active tab changes — the most domain-specific component in the system, mirroring the parent's audience taxonomy.

**Key Characteristics:**
- Single Superblue voltage (`{colors.primary}` — #236cff) carries hero canvas AND CTA AND link AND focus ring. One hex, four jobs.
- AvenirNext forINTUIT across every tier — wired as `--font-primary`, no second family in active use.
- Soft sand below-fold surface (`{colors.surface-sand}` — #f4f5f8), wired into both grey and "skyblue" alias namespaces; warmer than pure white.
- 100px pill CTAs at 40px height, paired with 32px-rounded segment-tab containers and 6px-rounded product cards — three-tier radius scale.
- Sub-brand colour reserve: the parent-brand chrome carries zero TurboTax / QuickBooks / Credit Karma / Mailchimp accent. Sub-brand voltages live only on their own pages.
- Tabbed segment control with 3-column card swap below — the audience-split component is the page's most domain-specific move.
- Deep blueberry `{colors.navy-deep}` (#00254a) partner-tile band below the fold; the only dark surface in the system, used for "Intuit AssistOpenAI" and similar partnership tiles.
- Hero h1 at 72px / 400 in white-on-Superblue is the loudest typographic moment; weight 700 is reserved for small 16px section eyebrow labels.

## Colors

### Brand

- **Superblue** (`{colors.primary}` — #236cff): frequency 43. Used as text (18), bg (4), border (18), shadow (2), gradient (1). Wired into 12 CSS variables across `--color-ies-super-blue`, `--web-refresh-intuit-superblue`, `--web-refresh-omni-brand-blue`, `--color-blue-07`, `--focusStateBorderColor`. The single brand voltage — carries hero block fill, CTA fill, link text, and focus ring.
- **Superblue Dark** (`{colors.primary-dark}` — #0655ee): frequency 1 (gradient only). Reserved for hover/press states on the primary CTA pill. Slightly more saturated than the rest state.
- **Navy Deep** (`{colors.navy-deep}` — #00254a): frequency 24. Used as text (1), bg (9), border (11), gradient (3). Wired as `--color-blue-08` and `--web-refresh-blueberry-110`. The secondary brand accent — fills the partner-tile band below the fold.
- **Navy Darkest** (`{colors.navy-darkest}` — #06132b): frequency 1 (gradient only). Reserved for the deepest gradient endpoint on dark partner tiles.

### Structural

- **Ink** (`{colors.ink}` — #21262a): frequency 236. Used as text (119), border (117). Wired as `--web-refresh-grey-03`, `--web-refresh-omni-text-primary`, `--color-blue-grayish-blue`. The dominant text colour on white surfaces.
- **Ink Soft** (`{colors.ink-soft}` — #393a3d): frequency 470. Used as text (235), border (235). Wired as `--color-text-primary` and `--color-ui-secondary`. The most-used colour on the page by raw count — every section heading, eyebrow label, and most secondary text uses this slightly-cool dark grey.
- **Ink Near-Black** (`{colors.ink-near-black}` — #101010): frequency 4. Used as text (2), border (2). The deepest UI grey, reserved for the partner-tile heading text and a single hairline.
- **Ink Pure Black** (`{colors.ink-pure-black}` — #000000): frequency 381. Used as text (195), border (183), gradient (3). Wired as `--color-black`, `--color-shadow`, `--color-overlay`. Pure black is reserved for the page's small-text legal disclaimer copy and as the shadow colour.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 159. Used as text (72 on dark surfaces), bg (14), border (73). The card-fill surface — every product tile, hero card, and segment-tab background.
- **Surface Sand** (`{colors.surface-sand}` — #f4f5f8): frequency 7 as bg. Wired as `--color-grey-rw-tofu`, `--web-refresh-skyblue-01`, `--color-page-background-secondary`. The below-fold page-floor tone; a warm pale grey that reads warmer than pure white.
- **Surface Mint** (`{colors.surface-mint}` — #c2f5ff): frequency 1 as bg. Wired as `--color-container-background-info` and `--color-agave-20`. Reserved for info-state container fills; surfaces only inside the below-fold dashboard mockup.
- **Surface Pink** (`{colors.surface-pink}` — #ffd1e9): frequency 1 (gradient only). Wired as `--color-container-background-new` and `--color-container-background-negative-secondary`. Used only inside the dashboard illustration; not part of the marketing chrome.

### Accent (illustration only)

- **Accent Cyan** (`{colors.accent-cyan}` — #33b5ff): frequency 1 (gradient only). Wired as `--color-link-text-complementary` and `--color-blue-05`. Surfaces only in the dashboard illustration above the fold; not used in chrome.
- **Accent Red** (`{colors.accent-red}` — #ff3232): frequency 1 (gradient only). The destructive / alert tone, surfaces only in illustration. The marketing chrome carries no error states.

## Typography

### Font Family

The system runs **AvenirNext forINTUIT** across every tier — a custom proprietary variant of Avenir Next licensed for Intuit's exclusive use, declared in CSS as the `--font-primary` value with the fallback `Helvetica, Arial, sans-serif` (some samples also include `Avenir` between the primary and Helvetica). There is no separate display family, no serif tier, no mono. The entire visible type ladder belongs to one variable-weight sans.

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 72px | 400 | 76px | Hero h1 ("Outdo your financial goals — all in one place.") |
| `{typography.display-lg}` | 40px | 500 | 52px | Sub-hero statistic |
| `{typography.display-md}` | 34px | 400 | 44px | Section "Work with us" h3 |
| `{typography.heading-lg}` | 32px | 500 | 42px | h3 sub-heading |
| `{typography.heading-md}` | 24px | 500 | 32px | Card title |
| `{typography.heading-sm}` | 20px | 400 | 28px | Sub-card title |
| `{typography.body-md}` | 16px | 400 | 24px | Default running text |
| `{typography.body-sm}` | 14px | 400 | 20px | Caption rows |
| `{typography.label-md}` | 14px | 500 | 20px | Eyebrow label, segment-tab label |
| `{typography.label-bold}` | 16px | 700 | 24px | Small section h2 ("Expertise that helps you file smarter") |
| `{typography.button-md}` | 16px | 500 | 24px | Primary CTA pill label |

### Principles

Display tier sits at weights 400-500, never 600-700. The hero h1 at 72px / 400 is the system's loudest typographic moment — heavier than the surrounding chrome but deliberately not bold. The 32-40px heading tier runs at weight 500. Weight 700 is reserved for one specific role: small 16px section h2s such as "Expertise that helps you file smarter" — the eyebrow / sub-section labels that need to stand out at body size. There is no display-weight 700, no body-weight 700. The split is deliberate: large text earns visual weight from size, small text earns it from weight.

### Note on Font Substitutes

AvenirNext forINTUIT is proprietary. The closest open-source substitute is **Nunito Sans** at the same weights — Avenir Next's geometric counters transfer cleanly. **Inter** at 95% line-height is a tighter alternative if you need slightly denser body sizes. **DM Sans** at the same weights is a passable swap for the 72px display tier specifically — its proportions read close. Keep the 72px / 400 hero weight when substituting; bumping to 500 to compensate for substitute family weight differences will break the airy display tone.

## Layout

### Spacing System

- **Base unit:** 4px (with 8px as the dominant module on padding shorthands).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 10px · `{spacing.base}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.2xl}` 24px · `{spacing.3xl}` 32px · `{spacing.4xl}` 40px.
- **Hero block padding:** ~32px top, 0 horizontal — the Superblue extends edge-to-edge with the heading floating in a 1280px-capped content stack.
- **Card internal padding:** 20-24px on the 3-column product tiles, 24px on the hero product-photo card.
- **Section padding (vertical):** ~64-80px between major bands.
- **Segment-tab padding:** 4px around the inner pills, 8x16 on each tab label.

### Grid & Container

- **Max content width:** ~1280px with 40px gutters at desktop.
- **Hero:** full-bleed Superblue `{colors.primary}` block, content stack centred-left. Heading + sub-paragraph + primary CTA pill (left column) + product-photo card with "Expertise that helps you file smarter" overlay (right column).
- **Tabbed segment:** 3-tab control ("Consumer / Small Business / Individuals") centered on the sand-surface band, with the active tab visible as a Superblue pill.
- **Tabbed card grid:** 3-column grid of white product cards swap below the segment, each carrying a portrait photograph and a "How {audience} drives success" header.
- **Partner-tile row:** below the card grid, a row of dark blueberry `{colors.navy-deep}` tiles for "Intuit AssistOpenAI" and similar partnership cards. The only dark surface on the marketing page.
- **"Driving success together" band:** a sand-surface footer-style block with 3 columns ("Work with us / Learn about us / Build with us") capped by a slim disclaimer band.

### Rhythm

The page alternates between **Superblue hero** at the top, **sand-surface editorial bands** carrying the tabbed grid and partner tiles, **white cards** lifting off the sand surface, and **a sand-surface footer** terminating the flow. There is no atmospheric gradient between bands — each block terminates cleanly at the next. The visual rhythm is driven by the on/off switch between Superblue fill, sand fill, and white card lift.

## Layout

The system has essentially **no shadow tier** on the marketing surface. Cards lift through colour-contrast against the sand surface, not drop shadows.

## Elevation

- **Flat surfaces:** the hero, the editorial bands, the footer — ~98% of the page sits at z=0.
- **Tonal lift:** `{colors.canvas}` (#ffffff) cards sit on `{colors.surface-sand}` (#f4f5f8) — the ~3-point lightness gap reads as elevation against the warm sand floor.
- **Soft shadow:** `{colors.ink-pure-black}` (#000000) wired as `--color-shadow` is used at low alpha for the lift on the hero product-photo card — the only place a true shadow renders on the marketing surface.
- **Hairline outlines:** `{colors.surface-sand}` doubles as the divider tone for top-nav and footer-edge borders, reading as a soft line on the white chrome.

## Shapes

The radius scale is **small-step plus pill**, with 6px as the dominant content radius:

- `{rounded.none}` 0px — section blocks and editorial bands.
- `{rounded.xs}` 2px — frequency 19. Small inline chips and labels.
- `{rounded.sm}` 6px — frequency 9. The dominant content radius. Product cards, partner tiles, small content surfaces.
- `{rounded.md}` 32px — frequency 5. Larger surface tiles, segment-tab container.
- `{rounded.lg}` 40px — frequency 7. Larger card surfaces.
- `{rounded.xl}` 80px — frequency 2. Reserved for the large blueberry partner-tile end-caps.
- `{rounded.pill}` 100px — frequency 4. Primary CTA pill, segment-tab active state, small status chips.
- `{rounded.full}` 9999px / 50% — frequency 21. Avatar circles, icon buttons.

The 6px tier is the most-used content radius — softer than Salesforce's 4px-corner CTA, sharper than Stripe's 12px-and-up softness. The system reads as "small radii for content, full pills for actions, circles for icons."

## Components

**`button-primary`** — The Superblue pill CTA. `{colors.primary}` (#236cff) fill, white text in `{typography.button-md}` (16px / 500), `{rounded.pill}` (100px) radius, 6x12 padding, 40px height. "Start for free" and similar action labels are the canonical instances.

**`button-primary-hover`** — Background flips from `{colors.primary}` to `{colors.primary-dark}` (#0655ee) — a slightly more saturated Superblue for the press state.

**`button-secondary`** — White fill with `{colors.primary}` text and 1px border. Same `{rounded.pill}` 100px radius, 6x12 padding, 40px height. Used as the secondary CTA in the hero stack.

**`button-tertiary`** — Transparent fill, `{colors.ink}` text, `{typography.label-md}` (14px / 500), 8x0 padding. Used for "Learn more" tertiary actions inside cards.

**`top-nav`** — White canvas, 72px height, 8x0 padding. Houses the Intuit wordmark with the sub-brand mini-logos (TurboTax, QuickBooks, Mailchimp wordmarks rendered at ~24px in their native colour), the centre nav cluster, and a right-aligned login pair.

**`nav-link`** — Transparent background, `{colors.ink}` text in `{typography.body-md}` (16px / 400), 8px padding.

**`hero-block`** — `{colors.primary}` (#236cff) Superblue fill, white text, `{typography.display-xl}` heading, 32px top padding extending edge-to-edge. The full-bleed top-of-page block.

**`hero-heading`** — Transparent, white text, `{typography.display-xl}` (72px / 400). The signature 72px / 400 hero h1, rendered on the Superblue canvas.

**`hero-sub`** — Transparent, white text, `{typography.body-md}` (16px / 400). The hero sub-paragraph beneath the h1.

**`section-heading`** — Transparent, `{colors.ink-soft}` text, `{typography.display-md}` (34px / 400). The "Work with us" / "Driving success together" section heads on the sand surface.

**`card-eyebrow`** — Transparent, `{colors.ink-soft}` text, `{typography.label-bold}` (16px / 700). The small "Expertise that helps you file smarter" eyebrow label inside the hero product-photo card.

**`body-paragraph`** — `{colors.ink-pure-black}` text at `{typography.body-sm}` (14px / 400). The footnote / legal-disclaimer copy at the bottom of the page.

**`segment-tabs`** — White canvas, `{rounded.md}` 32px container radius, 4px padding, 48px height. Houses the three tab pills.

**`segment-tab-active`** — `{colors.primary}` (#236cff) fill, white text, `{typography.label-md}` (14px / 500), `{rounded.pill}` 100px radius, 8x16 padding. The selected segment ("Small Business" in the captured state).

**`segment-tab-inactive`** — Transparent fill, `{colors.ink-soft}` text, same `{typography.label-md}` and `{rounded.pill}` 100px. "Consumer" and "Individuals" in the captured state.

**`product-card`** — White canvas, `{colors.ink}` text, `{rounded.sm}` 6px radius, 20px padding. The 3-column tabbed product tiles, each carrying a portrait photograph (top), a "How {audience} drives success" label (middle), and a body paragraph (bottom).

**`hero-product-card`** — White canvas, `{colors.ink-soft}` text, `{rounded.md}` 32px radius, 24px padding. The card floating on the right of the hero ("Expertise that helps you file smarter"), with rounder corners than the product cards below the fold and a soft shadow lift.

**`partner-tile`** — `{colors.navy-deep}` (#00254a) blueberry fill, white text in `{typography.heading-md}` (24px / 500), `{rounded.sm}` 6px radius, 24px padding. The "Intuit AssistOpenAI" partnership tile and similar dark cards in the partner row.

**`footer`** — White canvas with `{colors.surface-sand}` 1px top divider, `{colors.ink-soft}` text, `{typography.body-sm}` (14px / 400), 40px padding. Multi-column link grid plus the legal disclaimer band beneath.

## Do's and Don'ts

**Do** treat the Superblue `{colors.primary}` (#236cff) as both canvas and voltage. The hero is a Superblue block; the CTA is the same Superblue with a pill radius; the link text is the same Superblue. One hex carries the brand identity; introducing a paler "secondary blue" for any of those three roles dilutes the load-bearing signal.

**Do** reserve the sand surface `{colors.surface-sand}` (#f4f5f8) for the page floor on below-fold bands. White is for cards only. Inverting the relationship (white floor + sand cards) makes the cards disappear against the surface and breaks the parent-brand-portal visual structure.

**Do** keep AvenirNext forINTUIT at weight 400 for the 72px display. The hero h1 is the system's only 72px moment and the airy weight is the brand signature; bumping to 500 or 600 turns the editorial hero into a generic enterprise shout.

**Do** keep sub-brand voltages out of the parent-brand chrome. TurboTax green, QuickBooks blue-green, Credit Karma cyan, and Mailchimp yellow each belong to their sub-brand pages. The parent surface trusts the single Superblue.

**Don't** apply the `{colors.navy-deep}` (#00254a) blueberry to body text or eyebrow labels. The hex is partner-tile-fill only; using it as a `color` value for paragraphs breaks the warm Superblue / cool blueberry split (Superblue does light-on-dark, blueberry does dark-on-dark backgrounds with white text).

**Don't** introduce a 12-16px corner-radius tier on cards. The system is binary at small sizes — 6px for product cards, 32px+ for larger surfaces. A 12px card radius falls into the visual no-man's-land between "tight chip" and "soft surface" and breaks the rhythm.

**Don't** render the segment-tab inactive state with a coloured background. The pattern is "active = Superblue pill / inactive = transparent" so the selected tab carries 100% of the chromatic weight. Filling inactive tabs with a pale grey makes the segment read as 3 selected tabs simultaneously.

**Don't** swap the 100px pill CTA for a square-cornered button. The pill geometry is the consumer-finance signature that distinguishes Intuit's chrome from enterprise CRMs like Salesforce (which uses 4px corners on the same kind of hero CTA). The radius is part of the brand position.

## Known Gaps

- **Hover and focus states:** the captured page exposes the primary-CTA hover only. Full focus rings, disabled tints, error states for inputs are not visible on the parent-brand chrome.
- **Form inputs:** the parent-brand site has no `<input>` field on the captured page; the sign-up surface lives one click away on the sub-brand sites (TurboTax, QuickBooks). Form styling is documented in the per-product systems, not here.
- **Sub-brand surfaces:** TurboTax, QuickBooks, Credit Karma, and Mailchimp each carry their own design systems with different primary voltages, typographic tiers, and component palettes. This file captures the parent-brand chrome only.
- **Mobile and tablet layouts:** the capture is desktop-only. The mobile experience collapses the 3-column tabbed grid into a vertical scroll with the segment control as a horizontal-scrolling chip row.
- **Motion:** the hero product-photo card carries a slow horizontal slide on load, and the segment tabs animate the underlying card swap. Easing curves and durations are not captured.
- **Dark mode:** the marketing surface is light-only. Dark variants exist in the per-product apps (QuickBooks Online has a dark mode) but are not represented here.
- **Below-fold illustration colours:** `{colors.surface-mint}`, `{colors.surface-pink}`, `{colors.accent-cyan}`, `{colors.accent-red}` appear only inside illustration assets, not in chrome. Their token roles in the broader system (semantic / accent) are not documented in the marketing CSS.