Acctual

Acctual

Accept payments in USDC, USDT, EUR or USD — and get paid same day to your wallet or bank. Create crypto invoices in seconds.

5.0
31
Visits
Visit

Available Pages

Version History

Design Analysis

Acctual Home design analysis

Airy Ledger Workspace reframes invoicing and small-business finance as light, manageable, and practical. It relies on a nearly white field, concise black CTAs, and tiny blue notations to keep the system trustworthy witho...

Overview

Airy Ledger Workspace reframes invoicing and small-business finance as light, manageable, and practical. It relies on a nearly white field, concise black CTAs, and tiny blue notations to keep the system trustworthy without drifting into heavy accounting software aesthetics.

Image Direction

Favor light desk scenes, paper or receipt-like objects, simplified software screenshots, and small annotation gestures. Imagery should support clarity and speed, not lifestyle aspiration or luxury theatrics.

Colors

The palette is mostly white and cool paper neutrals, anchored by a single near-black and a clear sky-blue accent. Blue should feel like a marker stroke or tiny status cue more than a dominant brand wash. Keep surfaces open and low-noise.

Typography

Use the main rounded grotesk for everything from headlines to body copy. The handwritten companion is allowed only as a short note-like accent, never for body paragraphs or navigation. Tone should feel concise, helpful, and modern.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Airy Ledger Workspace

A small-business finance system built from cool paper surfaces, black pill actions, light desk-scene framing, and sky-blue emphasis with occasional handwritten notes.

light, friendly, airy, and desk-oriented with practical warmth

Primary mode: lightsmall-business finance marketingproduct-marketing

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
light, friendly, airy, and desk-oriented with practical warmth
Density
3
Variance
3
Motion
2
Signals
cool paper field · black action pills · sky-blue cueing · scribbled note accents

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Night Ledger
#0D111B
Paper Mist
#F7FAFC
Quiet Surface
#FFFFFF
Sky Marker
#00A5F5
Blue Tint
#E9F7FF
Ledger Gray
#606773
Rule Gray
#DDE5EB
Usage rules
Keep the field almost white so the finance story feels simple.
Use black for commitment actions and major anchors.
Apply blue as a marker or note, not as the full interface color.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
6px
sm
10px
md
16px
lg
24px
section
88px

Token Radii

Corner radii tokens with a live surface sample.

sm
10px
md
16px
lg
24px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Open Runde
soft modern grotesk with product clarity
Body
Open Runde
friendly operational reading voice
Accent
Caveat
handwritten emphasis for occasional note-like moments

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(3rem, 6vw, 4.8rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use one rounded grotesk for almost all interface copy. · Reserve the handwritten accent for tiny annotations and visual notes only. · Keep headings friendly but not bubbly.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
160ms-240ms
Easing
cubic-bezier(.2,.8,.2,1)
Spring
stiffness 115, damping 18

Motion

Resolved motion token values.

PropertyValue
duration160ms-240ms
easingcubic-bezier(.2,.8,.2,1)
springstiffness 115, damping 18

Layout Principles

Use centered hero content with airy side margins.
Frame proof with light cards and small desk-scene interruptions.
Avoid heavy enterprise density; keep the finance UI simplified and approachable.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#0D111B
Text
#FFFFFF
Border
1px solid #0D111B
Radius
100px
Padding
6px 14px
Min height
40px
Shadow
0 0 0 1px rgb(36, 38, 40), 0 1px 2px rgba(27, 28, 29, 0.48)
Buttons secondary
Base Attributes
Background
#FFFFFF
Text
#0D111B
Border
0px none #FFFFFF
Radius
100px
Padding
6px 14px
Min height
40px
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0D111B
Border
1px solid rgba(13,17,27,0.06)
Radius
16px
Padding
24px
Shadow
0 16px 32px rgba(13,17,27,0.05)
Cards accent
Feature Card
Component preview content
Base Attributes
Background
#E9F7FF
Text
#0D111B
Border
1px solid rgba(0,165,245,0.10)
Radius
16px
Padding
20px
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#606773
Height
56px
Active text
#0D111B
Item padding
0.5rem 0.75rem
Item radius
999px

Image direction

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Use tabletop scenes, light paper props, simple screenshots, and occasional note-like markup.
Guidance
  • -
    Desk objects should feel practical and airy.
  • -
    Any handwritten treatment should look like annotation, not branding wallpaper.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No severe enterprise banking chrome.
  • -
    No dark-mode fintech futurism.
  • -
    No overuse of handwritten labels.
  • -
    No high-saturation blue floods across major surfaces.