Intuit QuickBooks — Design Reference

1. Visual Theme & Atmosphere

QuickBooks is Intuit’s small-business financial-management product and brand program: the official hub describes its job as helping teams craft experiences that champion small businesses, while Intuit situates QuickBooks inside a broader financial-technology platform. The recognizable expression is not a generic bank dashboard. QuickBooks frames its familiar logo as a green light for possibility and pairs that optimistic cue with candid small-business photography, playful industry illustration, approachable language, and a deliberate, balanced type voice. Its current design material is a working brand hub rather than a frozen identity archive, with product expression, accessibility, motion, resource libraries, and review office hours gathered around the same small-business mission. This sits within Intuit’s longer evolution from personal-computing finance software through web, mobile, cloud, and AI services. QuickBooks Design and Intuit origins provide that context.

The supplied capture covers the public QuickBooks brand hub, its public product-expression route, and an Intuit authentication surface at 1440×900. It does not establish an accounting-app shell, transaction flow, subscription checkout, or post-login dashboard.

2. Color Palette & Roles

Selector-backed public-surface values

• Dark action / dark text (#0D333F): observed as text and border on the 52px outlined product-expression action, and as a repeated dark background value on public brand/product routes.
• Ink (#000000): repeated public brand-hub text, navigation, and border value.
• Canvas (#FFFFFF): repeated public-surface text/border and white surface value.
• Muted text (#6B6C72): repeated public brand/product text value.
• Brand-hub link blue (#055393): observed on the public brand-hub logo link.

The official hub calls the QuickBooks mark a metaphorical green light and offers a separate color-guideline resource, but the supplied computed-style artifact does not expose a selector-backed green hex. Green is therefore useful brand narrative, not a machine color token here. The single low-frequency orange and blue values on the authentication surface are likewise not promoted into the QuickBooks brand set.

3. Typography Rules

Evidence classes

• Official product-use: QuickBooks names Avenir Next for Intuit as its official primary font. Its typography guidance calls it balanced, timeless, modern, and contemporary, and recommends a restrained weight range with a 4px design grid.
• Live computed surface-use: the supplied capture records Avenir Next forINTUIT as loaded/high confidence, with 203 visible uses across body, button, card, heading, list-item, and text roles. The computed family is backed by FontFaceSet and Intuit CDN font-source evidence; this is the only family promoted to machine tokens.
• Official distributed brand asset: the QuickBooks resources page provides a font-library download route, but says assets require SSO. It establishes that a controlled font library exists; it does not grant a public redistribution licence in this reference.
• Declared-only: iconfont and Proxima Nova faces are declared on the authentication domain with zero visible observed use. They are not QuickBooks UI-family substitutes or tokens.
• System/unresolved: Arial appears once as a system stack on the authentication surface. It is not promoted or substituted for the loaded Avenir family.

Measured public hierarchy

4. Component Stylings

The supplied evidence contains 21 default component variants across the three public surfaces, but interaction coverage is zero. The selector-backed static component below is promoted because its role, geometry, family, and default visual values were measured; hover, focus, pressed, disabled, error, and expanded values are omitted.

Global Navigation Tab

Default role-button tab

• Background: transparent
• Text: #000000
• Radius: 0px
• Padding: 28px 0px
• Height: 84px
• Font: 16px / 400 / Avenir Next forINTUIT
• Use: Brand-hub global-navigation tab; home::[data-omd-capture="1"], a div with role="button".

5. Layout Principles

The public brand hub uses an 80px global-navigation band followed by a 60px secondary navigation band in the supplied desktop capture. Its tile content repeatedly gives heading and body text a 20px bottom margin; this is a measured local relationship, not a universal product grid. On the separate product-expression route, the captured outlined action uses 28px horizontal padding and a 4px corner radius. The evidence does not establish mobile breakpoints, accounting-workspace columns, authenticated navigation, or a general spacing scale.

6. Depth & Elevation

The promoted global-navigation tab has box-shadow: none, and its default surface is transparent. Do not infer a card-shadow scale or overlay recipe from the public hub; the supplied capture has not established one.

7. Do's and Don'ts

Do

• Use the loaded Avenir Next forINTUIT family when recreating the measured public brand-hub samples.
• Keep the role-button navigation tab square, transparent, and tied to its observed 84px / 28px 0px geometry.
• Treat #0D333F, #000000, #FFFFFF, #6B6C72, and #055393 as public-surface observations with their listed local roles.
• Use sentence case by default, in line with the official QuickBooks type guidance.

Don't

• Do not substitute Arial, Proxima Nova, iconfont, or a system fallback as if it were the loaded Avenir family.
• Do not derive QuickBooks green, an app-dashboard palette, a checkout flow, or a universal spacing scale from this capture.
• Do not invent hover, focus, pressed, disabled, error, or expanded styling: interaction count is zero.
• Do not merge authentication-surface anomalies into the QuickBooks brand tokens.

8. Responsive Behavior

The supplied capture is desktop-only at 1440×900. It proves the observed desktop navigation and action geometry at that viewport, but no breakpoint, touch target, responsive type scale, or small-screen rearrangement is verified. The official type page documents marketing and product responsive scales as assets, yet their numeric values are not available as raw text in the evidence supplied for this reference and are not reconstructed here.

9. Agent Prompt Guide

For a measured public QuickBooks-brand-hub treatment, use loaded Avenir Next forINTUIT, black #000000 text on transparent navigation, and a square 84px role-button tab with 28px 0px padding. Use the documented brand character—optimistic, supportive of small businesses, and visually clear—without claiming an unobserved application UI. A secondary public action was observed at 52px high with #0D333F text/border, a 4px radius, and 0px 28px padding, but it is a separate product-expression sample. Do not add green hexes, generic finance-dashboard components, shadows, responsive values, or interaction variants not present in the evidence.

10. Voice & Tone

QuickBooks’ official brand hub describes its voice as friendly and understanding, while its type guidance asks for sentence case and reserves all caps for short emphasis. Use a clear, helpful, benefit-led tone; this is a content-direction reading of official guidance, not a captured interface copy deck.

Illustrative, non-official examples based on that guidance:

• “See what needs your attention today.”
• “Keep your cash flow in view.”
• “Review the details before you continue.”

11. Brand Narrative

Intuit began in 1983 when Scott Cook and Tom Proulx built Quicken after observing the difficulty of balancing a family checkbook. The company’s own history describes a progression from DOS to web, mobile, cloud, and AI while holding customer problems at the center. QuickBooks is one of the products through which that broader platform serves small businesses. Intuit origins

QuickBooks’ brand hub translates that financial-confidence story into a focused small-business expression: its logo signals possibility, its photography shows real customers in their own environments, and its illustrations bring playful charm to industries and people. That is a brand and marketing narrative; it should not be mistaken for proof of any unobserved product workflow. QuickBooks Design

12. Principles

1. Start with the customer problem. Intuit’s history says it falls in love with customer problems rather than solutions. UI implication: make the next meaningful task easy to identify before adding explanatory chrome.
2. Champion small businesses. QuickBooks frames its design mission around small businesses. UI implication: write benefits in terms of practical progress, clarity, and confidence.
3. Use hierarchy sparingly. The official type guidance recommends fewer sizes and a limited weight range. UI implication: let one clear heading/body/action relationship do the work before adding more display treatments.
4. Protect trust and understanding. Intuit’s operating values include customer obsession and integrity without compromise. UI implication: make consequential choices legible and avoid ambiguous financial language.

13. Personas

The following are product-context archetypes derived from official statements about QuickBooks serving small businesses; they are not research-validated personas or claims about a particular screen.

• Small-business owner: needs financial work to feel tractable alongside operating the business; benefits from direct, outcome-led language.
• Self-employed operator: needs confidence in routine financial decisions; benefits from hierarchy that makes the next task clear.
• Accounting partner: uses QuickBooks within a professional service relationship; benefits from unambiguous details and clear handoffs.

14. States

No QuickBooks state styling is established by the supplied capture. The following content practices are implementation guidance derived from the documented clarity and customer-support principles, not observed component specifications.

15. Motion & Easing

QuickBooks’ brand hub says motion can create feelings of passion and optimism, but the supplied raw evidence reports zero interactions and exposes no duration, delay, easing, or reduced-motion values. No motion token is therefore defined. Keep implementation motion purposeful and verify any timing or easing against a relevant official surface before treating it as QuickBooks guidance.

---

Verified: 2026-07-13 Tier 1 sources: https://design.intuit.com/quickbooks/brand/ https://design.intuit.com/quickbooks/product/ https://federation.intuit.com/as/authorization.oauth2?scope=openid+profile+email&response_type=code&redirect_uri=https%3A%2F%2Fpartnerauth.platform.intuit.com%2Fexternal_partner%2Fintuit_eiam%2Fcallback&client_id=9d678f82-f00e-4e8f-875e-484cac84cbc1&state=awb.228bcc57-93dd-4b7c-8691-6e252452f1e8 Tier 2 sources: https://getdesign.md/intuit (attempted; safe-open failure) https://styles.refero.design/?q=intuit (attempted; safe-open failure) Conflicts unresolved: none