Text fields
Single-line input with the label above and the hint between label and input. Validation messages sit directly under the input and always pair colour with an icon.
Account number
7 states · 44px height · 1.5px border10 digits
10 digits
10 digits
10 digits
10 digits
10 digits
Error: Enter a 10-digit account number.
10 digits
Account verified.
Choices
Checkbox, radio group, toggle and select. Selected controls use the brand colour; focus always uses the indigo ring so it never reads as a selection.
Checkbox
“Send me paper statements” · 20px boxError: Accept the terms to continue.
Radio group
“Statement frequency” · Monthly, Quarterly, YearlyToggle
“Notify me of transfers over $500” · role="switch"Select
“Transfer from” · Everyday, Savings, Joint account- Everyday account
- Savings account
- Joint account
Error: Choose an account.
Buttons
Primary for the main action on a screen, secondary for alternatives, destructive for actions that remove money or access. Loading keeps the label and adds a spinner so the button does not change width.
—:hover:focus-visible:activedisabledaria-busy="true"Transfers list
The “Recent transfers” card in each data state. Status badges differ by colour, icon and border style, so they stay distinct without relying on colour alone.
Recent transfers
Loading transfers…
Recent transfers
Check the spelling, or search by a different name, amount or date.
Recent transfers
Check your connection, then try again. Your money and scheduled transfers are not affected.
Recent transfers
| Date | Recipient | Amount | Status |
|---|---|---|---|
| Nora Jansen | $120.00 | Completed | |
| Elm Street Rentals | $1,450.00 | Completed | |
| City Power & Water | $86.40 | Pending | |
| Kaito Mori | $250.00 | Failed |
Messages
Inline alerts sit in the page flow. Toasts confirm the result of an action and can be dismissed. Dialogs ask for confirmation before an action that cannot be undone.
Inline alerts
4 types · icon + colour + left ruleInformation: Transfers made after 6 pm are processed the next business day.
Success: Your transfer was scheduled.
Warning: Your daily transfer limit is almost reached.
Error: Your transfer could not be sent.
Toast notifications
Shown in place · dismissibleTransfer scheduled
$250.00 to Kaito Mori on 18 Oct 2026.
Transfer failed
The recipient’s bank declined the payment. No money left your account.
Confirmation dialog
Shown open inside its panel · destructive actionClose account?
This action cannot be undone. Your remaining balance will be sent to your linked account.
Transfer form
The same form after submission: on the left with two validation errors and a summary that links to each field, on the right after a successful submission.
New transfer
Send money from your Harbor Bank account.
New transfer
Send money from your Harbor Bank account.
Transfer scheduled
$250.00 to Kaito Mori on 18 Oct 2026
- From
- Everyday account
- Note
- Concert tickets
- Reference
- HB-2026-48213
You can cancel this transfer until 6 pm on 17 Oct 2026.