Color Palette

Sourced from official Intuit Brand Guidelines. Super Blue is the primary action color. Blueberry-110 is for text and dark backgrounds. QuickBooks Green is reserved for the logo mark and success states. The agave range provides accent cyan for highlights.

Official Intuit Palette

Source: Intuit Brand Guidelines. Color names use the official token naming convention.

black

#000000

--black

blueberry-110

#00254A

--blueberry-110

Super Blue

#236CFF

--super-blue

agave-30

#81F2FE

--agave-30

agave-20

#C2F5FF

--agave-20

wintermint-100

#EFF4F9

--wintermint-100

tofu-100

#F4F4EF

--tofu-100

white

#FFFFFF

--white

Extended & Supplemental

pepper-80

#5D686F

--pepper-80 (product name text)

Super Blue Hover

#1B57D4

--super-blue-hover

QuickBooks Green

#2CA01C

--intuit-green (logo mark)

Gray 200

#D4D5D6

--gray-200

Gray 400

#8C8C8C

--gray-400

Gray 600

#6B6B6B

--gray-600

Status

Success

#2CA01C

Error

#D32F2F

Warning

#F9A825

Info

#236CFF

Type Scale

Brand font is AvenirNext forINTUIT, registered as 'AvenirNext forINTUIT' across all builds. Weights: Regular (400), Medium (500), Demi (600), Bold (700), Heavy (800). Product name text uses pepper-80 (#5D686F) per the logo lockup spec. One family, weight-driven hierarchy.

Track mileage automatically

H1 Display — 48px / 700 / -0.03em tracking

Mileage tracking is built into QuickBooks

H2 Section — 32px / 700 / -0.02em

Automatic GPS tracking

H3 Feature — 22px / 600

How do I add a manual trip?

H4 FAQ — 16px / 600

Whether you're driving part-time, full-time, or occasionally making deliveries, mileage can be one of the largest tax deductions for a small business.

Body — 16px / 400 / 1.7 line-height

Tap Mileage from the menu, then tap the Plus icon to create a new entry.

Body Small — 14px / 400 / 1.6 line-height

How It Works

Section Label — 11px / 600 / uppercase / 0.1em tracking

Spacing Scale

4px base unit. Used for padding, margins, gaps, and layout composition.

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

Border Radius

4px is the standard for buttons and inputs. Pill (28px) is reserved exclusively for nav CTAs. 0px sharp corners are not used.

None

0px

Small

4px

Medium

8px

Large

16px

Pill

28px

Full

50%

Token	Value	Usage
`--radius-sm`	4px	Buttons, inputs, tags
`--radius-md`	8px	Cards, swatches, panels
`--radius-lg`	16px	Hero sections, CTA blocks
`--radius-pill`	28px	Nav CTA only
`--radius-full`	50%	Avatars, step numbers

Shadow Scale

Navy-tinted shadows for a cooler, more cohesive feel than pure black.

Small

Resting cards

Medium

Hover states

Large

Modals, dropdowns

XL

Hero elements

Button System

All standard buttons use 4px radius. The only pill-shaped button is the nav CTA. Two sizes: default (16px) and small (14px).

Primary Actions

Secondary Actions

Inverse (On Dark Backgrounds)

Nav Pill (Header Only)

Ghost / Text Link

Subscribe (Joined Input)

Do Use --radius-sm (4px) for all standard CTAs. Use pill only in the navbar.

Don't Mix pill and square buttons in the same section, or use 0px sharp corners.

Button sizing rules: Default buttons use padding: 14px 32px at 16px / 500. Small buttons use padding: 10px 24px at 14px / 500. All buttons share the same border-radius. Font weight is always 500.

Form Elements

Inputs match button height for alignment. Focus state uses Intuit Blue border.

Standalone Input

Joined Input + Button

Card Patterns

Feature cards, stat cards, and dark CTA cards used across sections.

Feature Cards

Automatic GPS tracking

Just drive, and we'll use your phone's location to detect when you're driving.

Detailed mileage reports

See the breakdown of miles and potential deductions. Easy to share when you need to.

IRS compliant tracking

Stay compliant with a mileage log that includes date, destination, and total mileage.

Stat Cards

1,247

Miles Tracked

$813

In Deductions

4.7★

App Store Rating

Dark CTA Card

Find the QuickBooks plan that works for you

Join millions of customers tracking mileage and maximizing deductions.

Nav Bar

Dark navy background. Text links at 14px/500. Pill CTA on the right. Hamburger at 900px breakpoint.

Intuit

How It Works Why QuickBooks FAQ

Pill CTA in nav only. The btn-nav-pill with --radius-pill (28px) is exclusively for the header navigation bar. All other buttons throughout the page use --radius-sm (4px).

Step Indicator

Used in the "How It Works" section. Tab-style with numbered circles and active state.

Testimonial Card

Verified badge in green, italic quote, avatar + name + role. Used in carousel or single-feature layout.

Verified

"I used to forget to log my trips and would lose hundreds in deductions every year. With QuickBooks, it's completely automatic. My deductions were 40% higher than the year before."

Sarah Mitchell

Freelance Photographer

FAQ Accordion

Click-to-expand with chevron rotation. Border-bottom separators. Max-height transition for smooth open/close.

How do I add a manual trip?

Tap Mileage from the menu, then tap the Plus icon to create a new entry. Enter your trip information: date, total mileage, and trip purpose. Select Save and you're all set.

Can I export and send it to my accountant?

Yes, you can easily share tax details, like mileage, through the mileage report. It lists your self-assigned taxable business profit and total amounts for each Schedule C deduction category.

Which product includes mileage tracking?

You can track miles in QuickBooks Online or QuickBooks Self-Employed.

Section Backgrounds

Four section backgrounds using official palette names. Alternate between white, tofu-100, and wintermint-100 for visual rhythm. Blueberry-110 for hero and CTA sections.

white

tofu-100

wintermint-100

blueberry-110

blueberry gradient

Section	Background	Text
Hero	blueberry-110 / gradient	white
Features	white	blueberry-110
How It Works	tofu-100	blueberry-110
Advantages	white	blueberry-110
Testimonials	wintermint-100	blueberry-110
FAQ	white	blueberry-110
CTA / Download	blueberry-110	white
Footer	black	pepper-80

Design Decisions

Key decisions made during the V3-V6 audit to resolve inconsistencies and unify the system.

Audit Findings

Issue	V3	V4	V5	V6	Decision
CTA radius	`24-28px`	`4px`	`4px + 28px`	`4px`	4px standard, 28px nav only
Primary color	Super Blue	blueberry-110	Super Blue	Super Blue	Super Blue for CTAs
CTA font size	14-16px	16px	14.4-17.6px	14.4-17.6px	16px / 14px (two sizes)
Font weight	500	500	400	400	500 for all buttons
Subscribe input	None	None	Button only	Input + button	Joined input + button