Design system
Direction “The Ledger”. Two surfaces and four display candidates are switchable above so the decision is made by eye. Contrast is measured from the live tokens, not restated from the design doc.
Color
Five structural tokens plus a reserved semantic pair. Credit and debit never appear on a border, icon, or hover state — figures only. The band is scoped to tabular rows and never paints the canvas: a striped page is the kitsch failure mode, and the band only means anything where there are rows to hold. The NET row is deliberately unbanded so credit green never sits on the green band.
Contrast audit
Measured live from resolved custom properties. Switch surface and theme above — every scored row must pass in all four combinations. Two rows are reported as INFO rather than scored: hairline rules and the band are decorative separators, not UI components conveying state, so WCAG 1.4.11 does not apply to them. Any border that does convey state — focus, error, selection — must use --ink, which passes comfortably. Band vs raised is tracked here because the NET row's separation depends on it.
| Pair | Usage | Ratio | Min | Result |
|---|---|---|---|---|
| Band vs raised — NET row separation | non-text | — | — | — |
| Ink on canvas | text | — | 4.5 | — |
| Ink on raised | text | — | 4.5 | — |
| Ink on band | text | — | 4.5 | — |
| Muted on canvas | text | — | 4.5 | — |
| Muted on raised | text | — | 4.5 | — |
| Muted on band | text | — | 4.5 | — |
| Credit on raised (NET row) | text | — | 4.5 | — |
| Debit on band | text | — | 4.5 | — |
| Debit on raised | text | — | 4.5 | — |
| Rule on canvas | non-text | — | — | — |
Faces at hero size
The display decision is settled — the comparison this section used to run was removed with the candidate list. What renders below is whatever the tokens currently resolve to.
One platform between your checkout and your bank account.
Net funding — 40px
Tight, slightly condensed. Reads as infrastructure rather than startup.
One platform between your checkout and your bank account.
Net funding — 40px
Sibling face. Used italic inside sans headlines and pull quotes only.
Type scale
Fine gradation in the small sizes because tabular data needs it; a deliberate leap at display.
Figures and the greenbar band
The band is structure, not decoration: it holds the eye on a row across a wide table of figures. Deductions are the only debit-colored figures; the reserve release and net funding are the only credit-colored ones, and the totals row is unbanded and ruled off in ink.
The statement resolves to net funding after reserve, not net settlement. Reserve released is the only line where a deduction comes back, and it is the line most processors leave off. Volume is the merchant’s own input so it renders; every rate is withheld.
Spacing, radius, elevation
Radius and elevation both changed when the token layer moved direction: the scale now runs to 20px and there is a three-tier shadow model alongside the hairline paper edge. docs/design-system.md still describes the previous 6px ceiling and rules-only depth and is out of date — see the note at the top of this section.
Motion tokens
Hover a swatch to run its curve. Springs are declared here but demonstrated live with the statement widget in step 3, when Motion lands — they are not CSS-expressible.
springFigure = { stiffness: 220, damping: 30, mass: 0.8 } // number rolls
springDrag = { stiffness: 400, damping: 40 } // slider thumb
--stagger: 60msControls
Ink is the interactive accent — no brand color on a CTA. Tab through these; focus is a 2px ink outline at 2px offset.
Certification row — pattern only
BLOCKED. No certification ships until each is confirmed. The pattern below shows the three claim registers so the distinction stays visible in markup; the labels are placeholders, not claims.
- Held by Dash Process
- <cert name> — audited <date>
- Held by a named partner
- Processing on <cert> certified infrastructure, provided by <partner>
- In progress
- <cert> — audit in progress, no badge
Confirmed figures
Only what has been confirmed may appear on the page. Unconfirmed stats are cut, not labelled illustrative.
| 99.99% uptime | confirmed | Gateway provider's figure — must be attributed to the gateway, never implied as ours |
| T+1 settlement | cut | Standard-risk qualifier not confirmed |
| Underwriting turnaround | cut | Honest standard not supplied |
| 135+ currencies | cut | Not confirmed |