---
version: alpha
name: Acctual
description: Crypto-native invoicing with a clean fintech face — Geist Sans on a near-white canvas, soft #1e1e1e ink, and a bright sky-blue primary backed by a playful secondary palette (violet, magenta, lime). Generous pill-and-card rounding (16–32px) gives the product a friendly, approachable feel over serious money rails.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fafafa"
  surface-tint: "#f7fafc"
  ink: "#1e1e1e"
  ink-pure: "#000000"
  ink-secondary: "#666666"
  ink-muted: "#8d8d8d"
  ink-faint: "#999999"

  # Primary accent — sky blue
  primary: "#0098f2"
  primary-deep: "#004370"

  # Secondary / playful accents
  accent-violet: "#6c56fc"
  accent-magenta: "#f200c9"
  accent-lime: "#00f23d"
  accent-green: "#5d9c06"
  accent-red: "#ff6363"
  accent-cyan: "#1ab4d7"

  # Partner brand marks
  brand-quickbooks: "#2ca01c"
  brand-orange: "#e26708"

  # Neutral scale
  gray-900: "#1e1e1e"
  gray-600: "#666666"
  gray-500: "#8d8d8d"
  gray-400: "#999999"
  gray-300: "#d8d8d8"
  gray-200: "#eeeeee"
  gray-100: "#f2f2f2"
  gray-50: "#fafafa"

  # Borders / hairlines
  border: "#eeeeee"
  border-soft: "#f5f5f5"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Geist, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  body:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0px
  micro:
    fontFamily: "Geist, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 32px
  3xl: 50px
  pill: 1250px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.gray-300}"

  badge:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
    borderColor: "{colors.border}"

  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 20px
    borderColor: "{colors.border}"

  payment-tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.gray-300}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Acctual Design System

## Overview

Acctual is a crypto-native invoicing and bill-pay platform, and its website wears a deliberately clean fintech face to make on-chain money movement feel as ordinary as sending a Stripe invoice. The canvas is overwhelmingly white (`{colors.background}`) with a soft, near-black ink (`{colors.ink}`, `#1e1e1e`) rather than pure black — the micro-warmth keeps long pages of financial copy from feeling clinical. Most of the chrome is achromatic; color arrives in concentrated bursts.

The typeface is Geist, Vercel's geometric grotesque, used across the entire system from 48px hero display down to 11px legal captions. Weight discipline is tight: 400 for reading copy, 500 for UI and labels, 600 for headings and emphasis. Headlines carry modest negative tracking (around -1.2px to -1.5px at display sizes) so they read compressed and modern without going as extreme as Geist's parent brand.

What gives Acctual its personality is the accent strategy. A single bright sky-blue (`{colors.primary}`, `#0098f2`) anchors the product as the trustworthy fintech blue, but a playful secondary palette — violet (`{colors.accent-violet}`), magenta (`{colors.accent-magenta}`), lime (`{colors.accent-lime}`), red (`{colors.accent-red}`) — appears in invoice previews, payment-method tiles, and editable "accent color" demos to signal customization and crypto energy. Primary CTAs stay near-black pills; the blue and the secondaries decorate product surfaces rather than the page chrome.

The shape language is friendly and generously rounded. Cards and invoice mockups use large radii (32px / `{rounded.2xl}`), payment tiles and soft panels sit around 16–20px, and every button and badge is a full pill. There are no hard right angles in the product UI — the rounding is the warmth that offsets the seriousness of moving money.

**Key Characteristics:**
- Geist Sans across the whole scale with moderate negative tracking (-1.2px to -1.5px at display)
- Soft `{colors.ink}` (`#1e1e1e`) text on a pure-white canvas — warmth over pure black
- One anchor accent: sky blue (`{colors.primary}`) as the trust color
- Playful secondary palette (violet, magenta, lime, red) for invoice previews and "accent color" demos
- Near-black pill CTAs; color stays on product surfaces, not chrome
- Generous rounding everywhere — 32px cards, 16–20px tiles, full-pill buttons/badges
- Three-weight system: 400 read / 500 UI / 600 announce
- Hairline `{colors.border}` (`#eeeeee`) dividers instead of heavy borders

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headings, and the default near-black CTA fill. `#1e1e1e`, not pure black.
- **Pure White** (`{colors.background}`): Page background, card surfaces, text on dark CTAs.
- **True Black** (`{colors.ink-pure}`): CTA hover, maximum-contrast moments.

### Accent
- **Sky Blue** (`{colors.primary}`): The brand trust color — links, accent CTAs, highlights, focus states.
- **Deep Blue** (`{colors.primary-deep}`): Pressed/dark variant for blue surfaces.

### Secondary / Playful
- **Violet** (`{colors.accent-violet}`): Crypto/customization accent, invoice previews.
- **Magenta** (`{colors.accent-magenta}`): "Accent color" demo swatches, decorative highlights.
- **Lime** (`{colors.accent-lime}`): Success/energy accent in product graphics.
- **Green** (`{colors.accent-green}`): Positive/confirmed states.
- **Red** (`{colors.accent-red}`): Error and attention states.
- **Cyan** (`{colors.accent-cyan}`): Secondary chart/graphic accent.

### Partner Brand Marks
- **QuickBooks Green** (`{colors.brand-quickbooks}`): Integration logo (Xero/QuickBooks accounting sync).
- **Brand Orange** (`{colors.brand-orange}`): Partner mark accent.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Primary text (alias of ink).
- **Gray 600** (`{colors.gray-600}`): Secondary text, descriptions.
- **Gray 500** (`{colors.gray-500}`): Muted labels, metadata.
- **Gray 400** (`{colors.gray-400}`): Placeholder, disabled text.
- **Gray 300** (`{colors.gray-300}`): Input/button borders.
- **Gray 200** (`{colors.gray-200}`): Hairline borders, dividers.
- **Gray 50** (`{colors.gray-50}`): Subtle surface tint.

### Surface & Border
- **Surface Soft** (`{colors.surface-soft}`): Inset panels and soft cards.
- **Surface Tint** (`{colors.surface-tint}`): Faint blue-tinted badge background.
- **Border** (`{colors.border}`): Default hairline (`#eeeeee`).

## Typography

### Font Family
- **Primary**: `Geist`, with fallbacks `-apple-system, Helvetica, Arial, sans-serif`
- Single-family system — Geist handles display through caption; no serif or mono in the marketing chrome.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 48px hero headline |
| `section-heading` | 40px feature section titles |
| `sub-heading` | 32px sub-section headings |
| `card-title` | 24px card / feature titles |
| `body-large` | 22px lead paragraphs, feature copy |
| `body` | 16px standard reading text |
| `body-medium` | 16px emphasized UI text, tile labels |
| `button-ui` | 14px buttons, nav links |
| `caption` | 12px metadata, badges |
| `micro` | 11px legal, fine print |

### Principles
- **One family, three weights**: Geist at 400 (read), 500 (UI), 600 (headings/emphasis). 700+ avoided in chrome.
- **Modest compression**: Negative tracking on display (-1.2px to -1.5px) for a modern engineered feel, relaxing to 0 at body sizes.
- **Quiet body, loud accents**: Reading copy stays gray/ink; energy comes from color blocks, not type styling.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) for the airy section gaps typical of a Framer marketing build.

### Grid & Container
- Max content width approximately 1200px, centered
- Hero: centered single column with generous top padding and a product/invoice mockup below
- Feature sections: 2–3 column card grids
- Invoice and payment-method previews framed as large rounded cards

### Whitespace Philosophy
- **Airy fintech calm**: Big vertical gaps between sections let dense financial concepts breathe.
- **Color as punctuation**: White dominates; accent color appears only in product surfaces and demos.
- **Soft separation**: Sections divide by spacing and `{colors.border}` hairlines, not heavy rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow | Page background, text blocks |
| Hairline (1) | 1px `{colors.border}` | Cards, tiles, dividers |
| Soft Card (2) | `0 1px 2px rgba(10,13,20,0.03)` | Resting cards |
| Floating (3) | `0 8px 24px rgba(10,13,20,0.08)` | Invoice previews, modals |
| Focus | 2px `{colors.primary}` ring | Keyboard focus on interactive elements |

**Shadow Philosophy**: Shadows are whisper-soft and cool (`rgba(10,13,20,...)` tints) so floating invoice mockups lift gently off the white without casting a heavy gray. Depth mostly comes from generous rounding and hairline borders rather than blur.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline elements |
| `md` | 12px | Inputs, small controls |
| `lg` | 16px | Payment tiles, soft cards |
| `xl` | 20px | Standard panels |
| `2xl` | 32px | Large feature cards, invoice mockups |
| `3xl` | 50px | Oversized rounded containers |
| `pill` | 1250px | Buttons, badges, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Near-black (`{colors.ink}`) pill, white text, 14px Geist 500. Hover deepens to pure black.
- **`button-accent`** — Sky-blue (`{colors.primary}`) pill for highlighted product CTAs.
- **`button-secondary`** — White pill with `{colors.gray-300}` border for low-emphasis actions.

### Pills & Badges
- **`badge`** — Faint blue-tinted (`{colors.surface-tint}`) pill with `{colors.primary}` text, 12px Geist 500.

### Cards
- **`card`** — White, 32px radius (`{rounded.2xl}`), hairline `{colors.border}`. The signature large-rounded surface.
- **`card-soft`** — Inset `{colors.surface-soft}` panel at 16px radius for secondary content.
- **`payment-tile`** — Bank / Card / Crypto selector tile, 16px radius, `{colors.gray-300}` border, becomes blue-bordered when selected.

### Inputs
- **`input`** — White, 12px radius, `{colors.gray-300}` border. Focus switches border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White sticky header, 14px Geist 500 links, hairline bottom border, near-black pill CTA on the right.

## Do's and Don'ts

### Do
- Use Geist across the whole system with modest negative tracking at display sizes
- Use `{colors.ink}` (`#1e1e1e`) instead of pure black for text and primary CTAs
- Keep the page chrome achromatic — let color live in product surfaces and demos
- Use the bright sky blue (`{colors.primary}`) as the single anchor trust accent
- Reserve violet/magenta/lime for invoice previews and "accent color" customization moments
- Round generously — 32px cards, 16–20px tiles, full-pill buttons
- Separate sections with whitespace and hairline `{colors.border}`, not heavy rules

### Don't
- Don't fill primary CTAs with the bright blue — near-black pills are the default action
- Don't scatter the secondary palette across UI chrome — it's product/demo-only
- Don't use pure black (`#000000`) for body text — the soft ink matters
- Don't use hard right-angle corners on product UI — the rounding is the brand warmth
- Don't add heavy gray drop shadows — keep them whisper-soft and cool-tinted
- Don't exceed weight 600 in marketing chrome

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked invoice mockups, hamburger nav |
| Tablet | 600–1024px | 2-column grids, reduced section padding |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered max-width, generous margins |

### Touch Targets
- Pill buttons use 12px vertical padding for comfortable taps
- Payment tiles are large tap-friendly cards
- Nav links at 14px with generous spacing

### Collapsing Strategy
- Hero: 48px headline scales down, maintains tracking
- Navigation: horizontal links → hamburger
- Feature cards: 3-column → 2-column → single column
- Invoice mockups: maintain aspect ratio and rounding, scale to fit
- Section spacing: 96px → ~48px on mobile

### Image Behavior
- Invoice/product mockups keep their 32px rounding at all sizes
- Logos and partner marks stay full-color
- Soft cool shadows persist under floating previews

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Acctual. Brand names and trademarks belong to their respective owners.