xBxBoox Design Lab

Native HTML/CSS/TypeScript · isolated UI prototype

Expense review

Material 3 behavior and geometry recreated without Angular or a component framework. No login, API, or bookkeeping data is connected.

Expense

Review money out

Waiting match OCR / AI
Transaction
Date
Category
Pay from
Spent CAD
$
Tax
Tax amount CAD
$
Expense before tax$89.01
Details
Bank memo
Note
Tags
Attachments

xBoox component catalog

Reusable mobile component reference

These examples share the Expense form’s semantic colors, typography, shape, spacing, focus, disabled, error, and positive-state rules.

Field geometry contractThe acceptance rules for every xBoox mobile field
Container
64px high, 12px radius
Leading edge
Label and value both start 16px from the outline
Value alignment
Left aligned and vertically centred
Trailing icon
20px icon, centred, 16px from the outline
Outline
1px default, 2px focus, real fieldset/legend notch
Money
Currency prefix and amount separated by 4px
Selection
Phone selection opens a modal bottom sheet
Spacing
20px desktop and 24px phone between fields
Mobile transaction listOne card family with Expense, Income, and Transfer business variants
Search and filtersSearch stays visible; secondary filters live in a mobile bottom sheet
SearchOne-line query with a dedicated clear action.
Filter chipsShow only applied criteria and remove them independently.
Bottom sheetDate, category, account, status, and tags stay off the main list until needed.
Dashboard summariesSummary-only mobile reporting with clear comparison context
Net income $8,240 ↑ 12.4% from last month
GST/HST balance$1,126— No comparison
Income vs expenseThis month
IncomeExpense
Top expense categoriesShare of expenses
  1. Office supplies38%
  2. Meals27%
  3. Travel18%
No activity yetDashboard cards stay useful without inventing comparisons.
Summary unavailableKeep the last known layout and offer Retry.
Transfer workflowA composition of the approved account selector, date picker, amount field, memo, validation, and feedback
From account
From→To
To account
Amount CAD
$
Date
Memo

Balances are intentionally omitted: imported statement balances are not presented as real-time available balances.

Date picker · fast navigation study A separate concept. The existing date picker above remains unchanged.
Date

Tap the month and year heading to jump directly. The year is not limited to a preset list.

Persistent mobile workbarThree visual directions with the same four destinations, interaction model, safe-area behavior, and active-state semantics
A · Material navigation barMost familiar and explicit
ExpenseScroll content remains above the persistent bar.
B · Floating dockMore distinctive, softer presence
ExpenseThe dock floats above the safe area without covering content.
C · Ledger indicator barCompact and data-focused
ExpenseA top indicator preserves maximum vertical space.
D · Full-cell tonal barVariant A with the entire destination area selected
ExpenseIcon, label, and the complete destination cell change together.
E · Adaptive focus railThe current destination expands into a strong horizontal pill
ExpenseThe active destination gains space and emphasis while all four labels remain visible.
List and permission statesEvery data surface uses the same explicit state machine
1–3 of 8
Initial load uses Skeleton; refresh preserves content; submit disables its action.
ActionsPrimary and supporting decisions
Fields and validationOne geometry system for entry and selection
Default
Focused
Error
Positive
Disabled
Select
Selection controlsTouch targets remain at least 44px
Status and feedbackBookkeeping states never rely on color alone
Cards, navigation, and overlaysCommon xBoox application structures
This month$2,481.3018 expense transactions

Theme reference

Pro semantic color roles

PrimaryActions
Primary containerSelected
SecondarySupporting
TertiaryAccent
ErrorDestructive
PositiveCompleted
SurfaceCanvas