What is Intuit's primary brand color?

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.

What typeface does Intuit use, and what should I use as a substitute?

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.

Why is the below-fold canvas a soft warm grey instead of pure white?

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.

What is the 3-tab segment control on the page?

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.

Can I use this DESIGN.md to build my own React fintech parent-brand site?

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.

Intuit Design System

Intuit's parent-brand marketing system as a DESIGN.md file.

About Intuit DESIGN.md

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

Fintech & Crypto
Productivity & SaaS

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.

What makes it distinct

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 tierdisplay at 72px / 400 in white-on-Superblue, body at 14-16px / 400-500, with weight 700 reserved for h-eyebrow labels
Soft sand tierthe 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 grida 3-tab control ('Consumer / Small Business / Individuals') drives a 3-column card switch, mirroring the parent-brand's product taxonomy
Sub-brand colour disciplinethe page itself shows zero TurboTax green, QuickBooks blue, Credit Karma cyan, or Mailchimp yellow; sub-brand voltages live only on their own product pages

Live at intuit.com

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

intuit.com

Explore Intuit

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.

Other

Specialty colors.

Intuit design system FAQ

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

Intuit — official site

Intuit's public parent-brand 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.