---
title: "Quicken design system"
variant: extended
source: https://www.quicken.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/quicken-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Quicken · Design System

> Clear financial guidance in a bright, confident interface

**Theme:** light · **Industry:** fintech · **Source:** https://www.quicken.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Quicken pairs approachable financial guidance with polished product previews, using vivid purple to distinguish calls to action and brand-led moments. Bright surfaces, compact rounded cards, and alternating content bands keep a long homepage easy to scan.

## North star

Use confident purple accents and generous, pale surfaces to make complex financial tools feel clear, approachable, and easy to act on.

## Overview

The page builds its identity around vivid purple set against white and cool, pale-blue surfaces. In the opening hero, purple overlays a full-bleed lifestyle photograph and supports large white headline text; elsewhere, purple marks primary actions, small emphasis details, and the deep footer band. Haffer supplies a consistent, geometric sans-serif voice, with strongly weighted, tightly tracked headlines and more open, readable body copy. The layout alternates white and pale-blue sections to organize product stories, data-led features, and pricing without heavy dividers. Most content sits in paired columns or compact card groups, while product imagery shows finance dashboards in device frames. Rounded buttons and cards soften the otherwise crisp interface. Shadows are reserved for floating product and pricing cards, allowing surfaces to lift subtly while the larger section bands remain mostly flat.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas, cards, hero controls, and reversed text on purple. |
| Quicken Violet | `#471cff` | `--color-quicken-violet` | brand | Primary CTA fill, brand marks, emphasized links, and key graphic accents. |
| Soft Ink | `#18181f` | `--color-soft-ink` | neutral | Main heading and body text, navigation, and dark card copy. |
| Cloud Blue | `#f3f8fd` | `--color-cloud-blue` | surface | Alternating section bands, including product discovery and desktop-product callout areas. |
| Lavender Line | `#dbd3ff` | `--color-lavender-line` | surface | Pale lavender hairline border, most visible around footer elements. |
| Guidance Purple | `#3f1cd4` | `--color-guidance-purple` | brand | Hero background and high-impact purple section treatment. |
| Footer Indigo | `#3317aa` | `--color-footer-indigo` | brand | Deep purple footer background and dense footer navigation. |
| Graphite Gray | `#494949` | `--color-graphite-gray` | neutral | Secondary navigation and supporting copy. |
| True Black | `#000000` | `--color-true-black` | neutral | Navigation and occasional high-contrast text. |
| Mist Edge | `#eaecf7` | `--color-mist-edge` | surface | Minor pale border detail; not a defining page-wide surface. |
| Alert Red | `#eb0130` | `--color-alert-red` | semantic | Rare red emphasis in a button or text detail; secondary to the purple system. |
| Coral Badge | `#ff5a43` | `--color-coral-badge` | accent | Small discount badge in the hero pricing control. |
| Slate Ink | `#292832` | `--color-slate-ink` | neutral | Supporting text and copy where a softened near-black is used. |
| Periwinkle Mist | `#dee5ff` | `--color-periwinkle-mist` | surface | Tinted personal-finance card surface. |
| Illustration Plum | `#261180` | `--color-illustration-plum` | accent | Deep purple within product-card artwork; treat as illustration detail, not a broad UI color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f8fd` (Cloud Blue) · `--color-surface-2` → `#dee5ff` (Periwinkle Mist) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#18181f` (Soft Ink) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#dbd3ff` (Lavender Line) · `--color-accent` → `#471cff` (Quicken Violet) · `--color-accent-2` → `#3f1cd4` (Guidance Purple) · `--color-accent-3` → `#3317aa` (Footer Indigo) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f8fd` | 19.66:1 | AAA |
| `#000000` | `#dee5ff` | 16.76:1 | AAA |
| `#18181f` | `#ffffff` | 17.66:1 | AAA |
| `#18181f` | `#f3f8fd` | 16.53:1 | AAA |
| `#18181f` | `#dee5ff` | 14.09:1 | AAA |
| `#ffffff` | `#f3f8fd` | 1.07:1 | fail |
| `#ffffff` | `#dee5ff` | 1.25:1 | fail |
| `#471cff` | `#ffffff` | 7.3:1 | AAA |
| `#471cff` | `#f3f8fd` | 6.83:1 | AA |

### Gradients

- `linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Haffer | `--font-body` | webfont | 400, 600, 700 | All page typography, from headlines and navigation to body copy, buttons, and cards. | Inter |

- **Haffer:** Use a single sans-serif family; headlines are semibold or bold with tight negative tracking, while navigation and body copy stay regular.

### Type scale — Perfect Fourth (ratio ≈ 1.358, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.15 | -0.033em | — | Haffer | Large hero or campaign headline. |
| h1 | 48px | 600 | 1.15 | -0.042em | — | Haffer | Primary page and major section headings. |
| h2 | 42px | 700 | 1.06 | -0.035em | — | Haffer | Prominent section headlines, often bold and compact. |
| h3 | 36px | 600 | 1.2 | -0.028em | — | Haffer | Feature and product-story headings. |
| h4 | 26px | 600 | 1.2 | -0.038em | — | Haffer | Card and smaller subsection headings. |
| body | 13px | 400 | 1.4 | 0 | — | Haffer | Supporting descriptions, pricing details, and footer copy. |
| button | 14px | 600 | 1.4 | 0 | — | Haffer | Action labels, set in a clear semibold style. |
| nav | 17px | 400 | 1.24 | 0 | — | Haffer | Top-level navigation labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 9, 10, 12, 16, 20, 24, 32, 40, 56, 80 px.
- Section rhythm 40px · element gap 16px · card padding — · max content width 1200px.

The desktop page uses a centered content area capped at the measured 1200px width, with a horizontal navigation above a full-bleed hero. Sections alternate between white and Cloud Blue backgrounds, usually arranging copy and product imagery in two columns; product and trust areas use four-column groupings. Section changes are distinct but the rhythm stays comfortable, with ample open space around headlines and compact card interiors. The footer switches to a dense multi-column link layout.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `16px` · badge `9999px` · nav `16px` · xs `16px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.15) 10px 20px 30px 0px`
- Shadow `md` (other): `rgba(0, 0, 0, 0.08) 0px 4px 20px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most sections are flat color bands with little or no visible border. Rounded product and pricing cards gain separation through restrained shadows, especially where they float over the hero or pale backgrounds. Use hairlines sparingly; layering comes mainly from device mockups, overlapping cards, and the hero image rather than stacked panel chrome.

## Imagery

A lifestyle photograph dominates the hero, with a purple wash behind the headline and the subject framed on the right. The rest of the page favors crisp finance-dashboard and device mockups, including charts, balances, and transaction views. Product cards and rating graphics sit cleanly against pale surfaces; the visual emphasis is on legible UI previews rather than decorative illustration. Screenshot-derived warm tones belong to photography, not the core brand palette.

## Components

### Primary CTA

Quicken Violet (#471cff) pill button with white semibold Haffer text; the measured primary example uses a full-radius shape.

### Hero pricing switch

White pill-shaped selector pairing a light Free Trial option with a vivid purple Annual option and a small Coral Badge discount label.

### Pricing cards

White, rounded cards with Soft Ink text, concise plan details, and paired filled and outlined actions; cards lift subtly with shadow.

### Product category cards

Two side-by-side cards for Personal and Business, using pale blue or purple-toned imagery, a product preview, brief copy, and a Learn more action.

### Rating panel

A prominent white rounded panel overlays hero photography, using a large purple score, star marks, and compact explanatory text.

### Footer link columns

A deep Footer Indigo band organizes dense product, company, comparison, and support links into columns.

### Measured component styles

- **Primary button** (“Get started”): background #471cff · text #ffffff · radius 400px · padding 0px 20px · 600 16px Haffer
- **Secondary button** (“Annual discount”): background #4b20ff · text #ffffff · radius 999px · padding 10px 14px · 700 16px Haffer
- **Card** (“Quicken Simplifi $3.99 /month Billed ann”): background #ffffff · text #18181f · radius 16px · padding 0px · 400 16px Haffer · shadow rgba(0, 0, 0, 0.15) 10px 20px 30px 0px
- **Badge** (“discount”): background #ff5a43 · text #ffffff · radius 999px · padding 4px 8px · 700 12px Haffer
- **Navigation item** (“Budget & Spend”): transparent background · text #000000 · radius 0px · padding 0px · 400 17px Haffer

## Do

- Use Haffer or a close geometric sans-serif throughout.
- Reserve Quicken Violet (#471cff) for primary actions and key emphasis.
- Alternate white and Cloud Blue (#f3f8fd) content bands.
- Keep product previews crisp, legible, and connected to their feature copy.
- Use rounded pills for actions and softly rounded cards for content.
- Let imagery and product mockups create the visual interest.

## Don't

- Do not turn every section into a purple background.
- Do not use heavy borders or dense boxed layouts.
- Do not use Coral Badge (#ff5a43) as a large surface color.
- Do not mistake photographic colors for the brand palette.
- Do not crowd headlines or product previews with decorative elements.
- Do not make secondary body copy compete with the main CTA.

## Agent prompt

Build a new Quicken-style fintech page with a clean, approachable product-led feel. Use Gallery White (#ffffff) as the main canvas, Cloud Blue (#f3f8fd) for alternating section bands, and Quicken Violet (#471cff) for primary CTAs, emphasis, and brand details; reserve Guidance Purple (#3f1cd4) and Footer Indigo (#3317aa) for focused large-area moments. Set all type in Haffer or Inter, with large, tightly tracked semibold headlines and clear regular-weight supporting copy. Organize content in a centered desktop-width layout, using paired copy-and-product-preview sections, compact rounded cards, and generous breathing room. Favor crisp finance dashboards and device mockups; use photography selectively for a hero. Keep most sections flat, with restrained card shadows, pill buttons, and a dense multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed lifestyle hero with left-aligned copy and pricing cards over the image; rating panel floats on the right. | Free Trial and Annual choice, plan actions, rating proof | purple image wash, white headline, rounded white cards, pill controls |
| 2 | testimonials | White section with copy on the left and a financial app/rating visual on the right. | app rating proof, Learn more link | white canvas, large heading, product graphic |
| 3 | feature-grid | Pale-blue band with a centered intro heading above two side-by-side product cards. | Personal and Business paths, Learn more actions | two rounded cards, finance UI previews, contrasting card treatments |
| 4 | feature-split | White section with a product-story heading above copy on the left and a dashboard mockup on the right. | explain a benefit, show projected outcomes | white band, two-column feature, device-framed chart |
| 5 | feature-split | Pale-blue band with product visualization on the left and heading plus description on the right. | show a unified view, supporting explanation | alternating image placement, device mockup, cool surface |
| 6 | feature-split | White band with feature copy on the left and a net-worth dashboard visual on the right. | explain long-term value, show progress | two-column split, device mockup, growth indicator |
| 7 | stats | White section with a centered heading and four evenly distributed metric columns. | four proof points, footnote context | large purple figures, small explanatory labels, minimal chrome |
| 8 | pricing | Two-column pricing area with a left-side heading and product plan cards to the right. | compare plans, annual billing context, Get started actions | white cards, price-first hierarchy, rounded purple buttons |
| 9 | other | White trust strip with a centered heading and four benefit items in a row. | reassure before conversion, scan trust points | small purple icons, compact labels, open spacing |
| 10 | cta | Centered callout inside a pale-blue section, with heading, supporting line, and action link. | direct to desktop products, single next step | centered text, white inner panel, red emphasis |
| 11 | footer | Deep purple footer band with multiple dense columns of product, company, comparison, and support links. | browse product families, navigate support and company | Footer Indigo background, small white links, multi-column lists |
| 12 | footer | White lower footer with brand mark, app-store badges, legal notes, policy links, and social icons. | download app, review legal information, social links | white background, compact text, small badges and icons |

## Source CSS custom properties (selected)

```css
--qkn-red-background: #FBCCD6;
--qkn-mid-blue-background: #DEE5FF;
--qkn-border-gray: #ECEDF1;
--qkn-border-gray1: #DBDEEE;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/quicken-com