Susan

Library

Saved

Living sample

QuickBooks Online

New

A place for what you noticed

Cool gray pages, white cards, and a green action button. For bookkeeping and small-business tools.

New entry

Title

Helper text uses the muted color. Field names stay in sentence case.

Save entryDiscard

SavedReviewMissingNote

--color-accent: #108000

Identity

What this look is for, and whether builders should use it.

Summary

Status

Builders should follow this

Notes for builders

Match QuickBooks Online, the bookkeeping app, not a marketing site. The page is a cool gray #f2f5fa. Cards, the navigation, and fields are white #ffffff. Headlines are charcoal #393a3d. Body is #4c4d50. Metadata and field names are #6b6c72. Dividers are #d4d7dc. Fields have a slightly stronger stroke, #babec5. The action button is green #108000 with white text. The logo green is #2ca01c; do not use that brighter green for buttons or for text, because it fails contrast on white. Positive amounts and success use #108000. Links, focus, and info use Intuit blue #0077c5. A selected row can sit on the pale green #e5f6e3. Warning text is #8a5a00 (the illustrative amber is #f5a623; do not use that amber for type). Danger is #d52b1e. Cards have a soft shadow and a light line, not a hard drop shadow. Buttons are solid and softly rounded. Fields are boxed. Icons are regular line icons. Density is comfortable. Motion is calm. The real product sets Avenir Next for Intuit. This library has no Avenir, so Manrope stands in for headlines and body. Figures and codes use IBM Plex Mono. Do not introduce a serif, a dark theme, or a second decorative hue.