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

# Acctual · Design System

> A calm, bright stage for getting paid faster

**Theme:** light · **Industry:** fintech · **Source:** https://www.acctual.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._

Acctual pairs a clean, light canvas with confident dark typography and bright blue payment cues. Spacious editorial sections and tactile invoice photography make its fintech product feel approachable and practical.

## North star

Keep the interface quiet and spacious so dark type, blue payment cues, and real invoice imagery carry the story.

## Overview

The page uses a near-white canvas as a quiet backdrop, with subtle pale surfaces separating content without turning the site into a stack of heavy cards. Dark, compact headings establish hierarchy; muted gray body copy keeps supporting explanations unobtrusive, while blue highlights payment methods, small labels, and key links. Open Runde drives a consistent, rounded typographic voice, with large centered hero messaging giving way to smaller left-aligned editorial content. A spacious single-column hero leads into alternating full-width and constrained content sections, grids, and long-form feature showcases. Rounded dark pill CTAs provide strong contrast without introducing a second loud accent. Photography is warm and tactile: invoices sit among desk objects, devices, and everyday scenes, framed with soft corners. Keep illustrations and product mockups distinct from the core palette; their vivid colors are supporting content, not the brand foundation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and broad content sections; preserves the page’s open, uncluttered feel. |
| Soft Graphite | `#8d8d8d` | `--color-soft-graphite` | neutral | Muted navigation and supporting copy, including secondary descriptions and testimonial attribution. |
| Cloud Surface | `#f7fafc` | `--color-cloud-surface` | surface | Quiet section and card surface for subtle separation from the white canvas. |
| Ink Black | `#1e1e1e` | `--color-ink-black` | brand | Primary headings and high-priority text; creates a clear contrast against the pale page. |
| Payment Blue | `#0098f2` | `--color-payment-blue` | accent | Payment-method cues, small emphasis labels, and select links; use sparingly for action and information. |
| Slate Gray | `#666666` | `--color-slate-gray` | semantic | Minor text detail in measured content; secondary to the primary muted gray. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7fafc` (Cloud Surface) · `--color-text` → `#1e1e1e` (Ink Black) · `--color-text-muted` → `#8d8d8d` (Soft Graphite) · `--color-accent` → `#0098f2` (Payment Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e1e1e` | `#ffffff` | 16.67:1 | AAA |
| `#1e1e1e` | `#f7fafc` | 15.9:1 | AAA |
| `#8d8d8d` | `#ffffff` | 3.32:1 | AA-large |
| `#8d8d8d` | `#f7fafc` | 3.17:1 | AA-large |
| `#0098f2` | `#ffffff` | 3.1:1 | AA-large |
| `#0098f2` | `#f7fafc` | 2.96:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Open Runde | `--font-body` | webfont | 500, 600 | Site-wide headings, body copy, navigation, links, and labels | Nunito Sans |
| Caveat | `--font-caveat` | webfont | 600 | Occasional handwritten testimonial attribution and decorative annotation | Caveat |

- **Open Runde:** Rounded sans-serif voice; headings use semibold weight and tight negative tracking, while captions are uppercase with slight positive tracking.
- **Caveat:** Use sparingly for handwritten-style notes; measured at semibold weight.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 1.13 | -0.03em | — | Open Runde | Oversized hero headline and rare high-impact page statements. |
| h1 | 48px | 600 | 1.17 | -0.03em | — | Open Runde | Primary page and section headline, especially the hero message. |
| h2 | 40px | 600 | 1.2 | -0.03em | — | Open Runde | Major feature-section headings and large content introductions. |
| h3 | 32px | 600 | 1.25 | -0.03em | — | Open Runde | Subsection titles and prominent feature statements. |
| h4 | 24px | 600 | 1.33 | -0.03em | — | Open Runde | Card headings and short supporting section titles. |
| body | 14px | 500 | 1.43 | -0.02em | — | Open Runde | Explanatory paragraphs, navigation, card copy, and supporting content. |
| caption | 11px | 600 | 1.62 | 0.02em | uppercase | Open Runde | Compact uppercase labels, eyebrow text, and metadata. |
| link | 14px | 500 | 1.43 | -0.02em | — | Open Runde | Inline navigation and contextual calls to action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 9, 10, 12, 13, 14, 16, 18, 20, 24, 28, 48, 64, 96 px.
- Section rhythm 96px · element gap 10px · card padding 24px · max content width 1024px.

The hero is centered within a single-column composition, with full-bleed desk photography around a central invoice preview. Below it, content alternates between centered introductions, three-column feature grids, two-column comparison or editorial rows, and long image-led showcases. The measured content max width is 1024px, with a spacious density and a 96px section gap. Keep text blocks controlled and align feature sections according to their role rather than forcing every section into the same centered template.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `50%` · link `16px` · xs `12px` · sm `16px` · md `20px` · lg `32px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.06) 0px 2.5px 2.5px 0px`
- Shadow `hairline` (button): `rgb(36, 38, 40) 0px 0px 0px 1px, rgba(27, 28, 29, 0.48) 0px 1px 2px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.05) 0px 1.77778px 8px 0px, rgba(0, 0, 0, 0.04) 0px 0.888889px 2.66667px 0px`
- Shadow `hairline-2` (other): `rgba(10, 13, 20, 0.03) 0px 1px 2px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.06) 0px 2px 3px -1px`
- Shadow `hairline-3` (card): `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`

Favor flat sections and subtle surface changes over prominent outlines. Cards use quiet shadows or a slight tonal contrast, with measured card rounding of 16px and payment-method panels at 20px. Dark pill CTAs provide the strongest visual separation; avoid stacking heavy shadows and borders.

## Imagery

Use warm, natural product photography featuring invoices on desks, screens, and familiar work objects. Hero imagery can extend beyond the main content area, while later images sit in rounded, contained frames. Product mockups should feel like useful demonstrations, not abstract decoration. Small colorful icons and payment graphics may appear inside cards, but keep the overall page palette restrained.

## Components

### Primary CTA

Dark, fully pill-shaped button with concise action text; used for starting an invoice or signing up.

### Hero payment cues

A horizontal row of blue check icons and payment-method labels beneath the hero CTA, with brief fee details.

### Audience cards

Three-column grid of pale cards with small colorful icons, short audience labels, and compact explanatory copy.

### Feature comparison

Three-column comparison with short problem labels, restrained copy, and pastel icon panels.

### Editorial feature showcase

Alternating text and large rounded photography that demonstrates invoice creation, payment choice, payouts, and reminders.

### FAQ list

Single-column question rows with concise labels and a plus affordance, separated by subtle hairlines.

### Integration panel

Pale inset surface with a small blue eyebrow, concise sync headline, supporting copy, and recognizable accounting-platform marks.

### Measured component styles

- **Primary button** (“Sign up for free”): background #0d111b · text #0000ee · radius 100px · padding 6px 14px · 400 12px sans-serif · shadow rgb(36, 38, 40) 0px 0px 0px 1px, rgba(27, 28, 29, 0.48) 0px 1px 2px 0px
- **Secondary button** (“Get paid with Acctual”): background #0f0f0f · text #0000ee · radius 100px · padding 6px 10px · 400 12px sans-serif
- **Link** (“Blog”): transparent background · text #8d8d8d · radius 0px · padding 0px · 500 14px Open Runde
- **Card** (“The industry’s lowest transfer fees”): background #fafafa · text #000000 · radius 16px · padding 24px · 400 12px sans-serif

## Do

- Use Gallery White as the dominant page canvas.
- Reserve Payment Blue for payment cues and small emphasis.
- Set headings in rounded, semibold Open Runde or a close substitute.
- Give major sections generous vertical breathing room.
- Use real invoice-context photography with soft rounded framing.
- Make primary actions dark, compact, and pill-shaped.

## Don't

- Do not make every section a bordered card.
- Do not use blue as a full-page background or oversized decoration.
- Do not crowd the hero with competing headlines or controls.
- Do not let vivid illustration colors define the brand palette.
- Do not add heavy shadows to ordinary content blocks.
- Do not force editorial feature sections into identical layouts.

## Agent prompt

Build a new Acctual-style fintech page around a quiet, spacious canvas. Use Gallery White (#ffffff) for the main background and Cloud Surface (#f7fafc) for occasional subtle panels. Set strong headings in rounded semibold Open Runde, or Nunito Sans if unavailable, using Ink Black (#1e1e1e); use Soft Graphite (#8d8d8d) for supporting copy. Apply Payment Blue (#0098f2) selectively to payment indicators and small labels. Create a clear centered hero, followed by varied grids and editorial feature sections rather than repeating one template. Use warm, realistic invoice photography with soft rounded corners. Keep cards mostly flat, with gentle separation and restrained shadows. Make primary CTAs dark and pill-shaped. Preserve generous whitespace, concise copy, and a clear path from product explanation to action.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and CTA over a pale, full-bleed desk scene with a large invoice preview. | Primary invoice CTA, Payment-method reassurance, Social proof eyebrow | Centered headline, Blue payment cues, Dark pill CTA, Product mockup |
| 2 | testimonials | Centered testimonial quote in a spacious, pale inset area. | Customer proof, Founder attribution | Quote-led layout, Star rating, Handwritten-style signature |
| 3 | feature-grid | Centered introduction followed by a three-column grid of audience cards. | Audience segmentation, Scannable feature summaries | Small category icons, Pale cards, Compact descriptions |
| 4 | comparison | Left-aligned heading above three comparison columns and pastel icon panels. | Problem framing, Three-point comparison | Short colored labels, Compact explanatory copy, Pastel illustration panels |
| 5 | feature-grid | Left-aligned introduction followed by a three-column, two-row benefits grid. | Benefit overview, Create-invoice CTA | Compact benefit tiles, Small payment icons, Dark pill CTA |
| 6 | product-showcase | Long editorial sequence of two-column text rows and large rounded product photographs. | Feature-by-feature storytelling, Customer proof between features | Alternating text alignment, Large photography, Short review snippets |
| 7 | integrations | Integration panel followed by two security feature columns with illustrative panels. | Accounting sync reassurance, Security proof | Pale inset panel, Platform marks, Pastel security visuals |
| 8 | cta | Centered CTA and headline above a wide lifestyle product photograph. | Final conversion prompt, Payment coverage reassurance | Blue eyebrow label, Centered action, Rounded image frame |
| 9 | faq | Left-aligned heading followed by a single-column list of expandable questions. | Expandable answers, Cost and payment clarification | Simple question rows, Plus affordance, Subtle separators |

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