Brand foundations
A financial system should feel steady before it asks someone to act.
The current Web app is the source of truth for these foundations. iOS correspondence is noted where the same meaning takes a platform-native form.Brand
Recognizable without becoming loud.
Give either lockup enough quiet space to remain recognizable at its intended size.
The component inherits one foreground through currentColor. Avoid outlines, shadows, or decorative recoloring.
Decorative brand instances stay hidden from assistive technology; meaningful instances receive a concise label.
Speak plainly about movement, uncertainty, and the next useful action.
Color and themes
Color gives a financial state a role, not a mood board.
Use semantic roles. New UI consumes --rr-* roles. Palette primitives and legacy --color-* or --auth-* aliases remain implementation details, not a component contract.
Canvas, section, subtle, interactive, and floating roles create hierarchy without component-local gray recipes.
Action, link, hover, and on-action roles stay separate. Public Light uses cyan action; authenticated Light and Midnight use magenta or pink.
Accessible forecast ink carries meaning. Light display accents may flow from cyan to mint; Midnight intentionally resolves that display to cyan.
Focus and selection are distinct roles. A visible ring explains keyboard position; a selected container and label explain current state.
Each status has ink, fill, on-color, and container roles. Language and structure remain authoritative when color is unavailable.
Theme-aware transaction hues accelerate row scanning, while the title, amount, date, and status carry the financial meaning.
Grouped iOS-aligned neutrals, white primary surfaces, cyan action, mint accent, dark-cyan links and forecast ink, and magenta selection.
Grouped canvas chrome, a white view surface, pale account pills, magenta action and selection, and dark-cyan forecast and focus.
Graphite canvas and surfaces, off-white text, pink action and selection, cyan links, forecast and focus, plus semantic financial fills.
System, Light, and Dark are user-facing preferences. System resolves against the operating system without changing component role names.
Section and background colors
Choose the role from the layer’s purpose, not from a nearby hex value. A component must not create a new neutral color-mix(); extend the foundation only when the existing hierarchy cannot express a real new layer.
--rr-background-canvas Canvas Root backgrounds, sidebars, sticky chrome, and the space around primary content. Do not use it as an internal card fill.
--rr-background-section Section Primary content, sheets, forms, and list groups. This is the default surface inside the application canvas.
--rr-background-subtle Subtle Row hover, resting controls, read-only fields, disabled fields, and quiet nested groups.
--rr-background-interactive Interactive Compact active or emphasized controls and neutral chips. Keep this stronger treatment off large reading surfaces.
--rr-background-floating Floating Tool docks, popovers, menus, and tooltips. Pair it with the elevation assigned to that temporary layer.
Divider and boundary colors
Use whitespace or a background change before adding a line. When a line is necessary, select one of these three strengths; status-colored boundaries remain separate semantic exceptions.
--rr-divider-subtle Subtle divider Repeated transaction or account rows and internal section separation.
--rr-divider-default Default divider Cards, popovers, standalone sections, and boundaries that need to remain continuously visible.
--rr-boundary-control Control boundary Inputs, outlined buttons, and editable controls. Never use it as a decorative list divider.
Table and data-list row colors
Every row-based data surface uses this three-token contract, including Ledger, Accounts, Calendar summaries, transaction groups, and future tables. State-specific fills may override the row background only when they communicate a real status; the ordinary divider and hover colors remain shared. Full-bleed rows keep square hover corners. An inset table sets --rr-table-row-hover-radius to --rr-table-row-inset-hover-radius so its hover fill has the shared rounded shape.
--rr-table-row-background Row background The default background for every table row and table-like data-list row.
--rr-table-row-divider Row divider The shared separator between adjacent rows. Inset it when the row layout needs edge breathing room.
--rr-table-row-hover Row hover The shared pointer-hover background. Interactive content inside the row may add its own foreground treatment.
Typography
Expression changes with the reading environment.
Use for public narrative and editorial emphasis. Dense app screens, balances, controls, and financial tables remain in the active interface font.
Use for public body copy, labels, actions, and sustained reading. Compact UI roles use tighter line-height than prose.
The workspace follows the platform interface stack for familiar density. Headings, controls, and financial figures share that family.
Scheduled outflow-$8,420.00
Available credit+$10,000.00Directional capacity exception
Excluded movementIgnoredNever substitute $0.00
- Use the account’s locale and currency. Detailed values keep the currency’s native precision; a forecast overview may round only when its projected status stays explicit.
- Use a visible minus sign for outflows. Positive transactions and ordinary balances do not force a plus; Available Credit deliberately uses one, except at zero, to distinguish capacity from debt.
- Align repeated figures to the end and never rely on red or green alone. Keep $0.00, Ignored, not loaded, and unavailable as different states.
Layout, space, and shape
Make room for the decision before adding another treatment.
Long-form explanation stays constrained while data-heavy authenticated workspaces use the width their columns require.
Product optical values such as 0.35, 0.45, 0.65, 0.8, 0.95, and 1.25rem refine dense controls and aligned financial rows without becoming a utility API.
Repeated financial lists remain flat. Rounded surfaces appear where a boundary, control, or floating tool needs a distinct silhouette.
Filled cards and borderless fields use surface contrast and whitespace. There are no divider lines within a section and no border around the shared popup shell.
Elevation and overlays
Depth identifies a layer, not importance.
Small separation for toolbar chrome, controls, and a toggle thumb. It remains close to its parent surface.
Persistent floating structure such as the desktop sidebar and bottom tool dock. The dock may add a focused composite shadow.
Temporary foreground layers, including the shared borderless popup shell and mobile drawer.
Light uses 36% black and Midnight uses 64%. The scrim suppresses competing context while the foreground surface keeps focus.
Responsive layout
Change the composition before compressing the meaning.
- Public content
- 72rem maximum
- Guide frame
- 74rem maximum
- Accounts view
- 48rem maximum
- Sidebar
- 16rem / 4.75rem rail
- Ledger tool dock
- 46rem maximum
- Popup forms
- 22.5rem anchored / 26rem standard / 30rem transaction
Compact tool spacing, labels, and phone-safe dock insets.
Two-column supporting layouts and vertically centered account editing.
Persistent sidebar or rail; the authenticated workspace fills the remaining column.
Ledger gains dedicated movement and future-balance columns.
Ledger exposes full date and account columns when the content can sustain them.
Protect the edges. Floating tools and modal layers use logical properties and safe-area insets. At narrow widths labels may shorten, columns may recombine, and navigation becomes a drawer; the task and reading order stay intact.
Iconography and voice
Icons support a decision. Words carry the meaning.
homeaccountsbankcredit cardledgerchartcalendarrecurringclearedpast duesearchfiltermoreaddselectedit balancedeleteprofilesubscriptioncolor schememessagelog outversionmenusidebarpreviousnext
The canonical Web set uses RunrateIcon, inherits currentColor, and defaults to 1.2rem; product contexts commonly range from 0.9–1.5rem. Decorative instances are hidden from assistive technology. A standalone meaningful icon needs a label, while an icon inside a labeled control stays decorative.
“Your balance is projected to dip below the comfort line in nine days.”
Motion
Motion earns attention by explaining a change.
Access, direction, and locale
The interface stays understandable when presentation changes.
Product and guide UI use a softened 1px semantic focus ring. Pointer interaction suppresses the ring; keyboard focus remains visible and cannot be replaced by hover or selection alone.
Current visual and hit targets span 2–3.25rem by context. Small ledger selection controls retain an expanded 2.75rem hit area.
Modal forms identify themselves, contain Tab focus, close with Escape when safe, restore focus, and keep background content inert when appropriate.
Logical properties, mirrored directional controls, end-aligned figures, and safe-area insets preserve the composition in RTL and narrow environments.
Currency precision, symbols, separators, dates, and sign placement follow locale and currency context rather than a fixed dollar format.
Public localization is broader than authenticated interface copy today. The guide records that boundary instead of implying uniform coverage.
Cross-platform correspondence
Shared meaning, adapted expression.
The current Web app is authoritative for this guide. iOS correspondence explains how the same financial and interaction meaning can take a native form; it does not require pixel parity.FoundationWeb source of truthiOS correspondence
Web source of truthPublic Light, authenticated Light, and Midnight share semantic roles while resolving action, chrome, data, and status color by context.
iOS correspondenceUse native dynamic colors and materials while preserving the same distinctions between action, forecast, focus, selection, and status.
Web source of truthFraunces and Manrope shape public expression; the authenticated product uses the Apple/system interface stack and tabular financial figures.
iOS correspondenceMap the hierarchy to Dynamic Type and locale-aware currency formatting rather than copying Web sizes.
Web source of truthThe app combines full-width responsive workspaces, flat financial lists, borderless filled popup forms, semantic elevation, and safe-area insets.
iOS correspondenceUse native grouping, touch targets, safe areas, presentation detents, and materials while preserving reading order.
Web source of truthFocus, status language, restrained transition bands, focus restoration, and reduced-motion outcomes clarify state.
iOS correspondenceUse native feedback and motion conventions with the same communication and recovery intent.
Web source of truthLogical layout and locale-aware money and dates are current; authenticated interface copy is not yet uniformly localized.
iOS correspondencePreserve locale, writing direction, Dynamic Type, and platform formatting without overstating implementation parity.