Product UI for business accounts. Quiet surfaces, exact numbers, one accent. Desktop browser first, phone second. Black and white come from holders.io; type is Mona Sans (extended for display) with Geist Mono for figures and addresses; petrol blue is the one accent.
Neutrals do the work. Black is for primary actions and finished states. Petrol blue marks what is selected, focused or in progress. Status colours appear only where they carry meaning, always with a label or shape.
Mona Sans, one variable family: extended (width 125, weight 700) for the balance and display, width 118 / 650 for headings, normal width for everything people read. Geist Mono for standalone figures, addresses, hashes and references. In tables one face per row: amounts stay in Mona Sans, mono only for the shortened address. Chosen 2026-11-10 (B2 in type.html).
723ac6e51e95db20105e1d82a88718febff26ca292f67b4ff9b110cd2f32ebf5A 4px base. Tight inside a group, wide between groups: 6px label to input, 20px between fields, 32 to 40px between field groups, 48px between page sections.
Motion only explains a change of state. 120ms for colour and hover, 180ms ease-out for dialogs and sheets entering. No entrance animations on page content, no shimmer skeletons. The in-progress segment of a settlement track breathes slowly; everything stops under reduced motion.
Pill shape carried from holders.io. One primary per view. Labels name the action: "Add funds with USDT", not "Submit".
Label above, help below, error replaces help in place so the layout does not jump. Validate on blur, re-validate on input once an error shows. Errors say what is wrong and how to fix it.
Long forms are field groups, not one centred column. Each group: fields on the left in a two-column grid, a context rail on the right that says why we ask and what counts. Short fields share a row; addresses take the full width. On phone the rail folds under the heading.
We filled these from the public register. Change anything that is out of date; we check it against the register again.
A different operating address needs one proof document later: a utility bill or bank statement from the last 3 months.
Vertical stepper sits in the left column of a wizard and doubles as navigation back to finished steps. The compact bar is for headers and phone. Numbers only, no "Step 3 of 5" heading above the page title.
A chip names the state in words and shape. The settlement track is the product's signature: four segments for received, checked, converted, credited. It sits in every deposit row, so a table answers "where is my money" without opening anything.
progress · done · hold · fail · neutral. Square and triangle marks keep hold and fail readable without colour.
Tabular figures, right-aligned in columns, two decimals always. Every sum is drawn by the <hb-amount> component (amount.js, ported from Postcash): separators at 50%, cents at 75%, code after the figure, never wrapped, "—" when missing. Estimates carry ≈ and muted ink until final.
Full string in Geist Mono, never truncated where someone will send money to it. The first and last four characters are boxed, because that is what people check. In tables, truncate in the middle. Copy confirms in place for 1.4s.
TQ7mWk3nRZp8VfL2xYb9cD4eHs6JtUa1G723ac6e51e95db20105e1d82a88718febff26ca292f67b4ff9b110cd2f32ebf5TRONSCANEvery table is hb-table: one text face per row, mono only for the shortened address, 44px single-line rows, headers 12/500 muted and never wrapped. Dates and amounts sort (real buttons, ↕ on hover, ▲/▼ when active). Columns menu hides and reorders, the layout is saved per table, the first column stays pinned when the table scrolls inside its box. Middle-drag pans. Row tones are opaque.
| Date | From | Status | Progress | Amount | Credited |
|---|---|---|---|---|---|
| Today, 14:32 | TXd4…6Uty | Checking | |||
| Nov 5, 09:21 | TXd4…6Uty | On hold · Below minimum | |||
| Nov 8, 10:14 | TXd4…6Uty | Credited | |||
| Nov 3, 12:10 | TZp1…k9Qa | Returned · Wrong network |
| Date | From | Status | Amount |
|---|
| Date | From | Status | Amount |
|---|
For one object's history: a deposit, an application. Done steps are filled ink, the current step is a petrol dot, held is an amber square. Time sits right-aligned in tabular figures; the detail line says what happened in numbers.
Full-width at the top of the area they concern. Bold lead sentence states the fact; the rest says what happens next. One action at most. No side stripes.
An empty state is the first-run screen: say what will appear here and give the one action that fills it. Left-aligned inside the area, dashed outline, no illustration.
Send USDT on TRON to your deposit address. It shows here within about a minute and is credited as USD.
Every deposit is either in progress or credited.
Transactional email from Holders Business: one subject, one fact, one button. The same card is the mock inbox in prototypes. Amounts inside sentences use <hb-amount inline>.
Holders BusinessHi Anna, we checked your file and need one more item before we can continue: proof of operating address for 18 Deansgate, Manchester M3 2BW. A utility bill or bank statement from the last 3 months works.
Open my fileIf you did not expect this email, you can ignore it.
A dialog only to confirm something irreversible or to sign. Details open in a side sheet so the list stays in view. On phone both become a bottom sheet. Esc closes; focus returns to the trigger.
Your signature confirms the information is true and complete. You cannot edit the file after this.
Side sheet: 420px, slides from the right edge over the table, --e-dialog, same header and footer anatomy as the dialog.
Sidebar on the canvas tone; the work area is one white surface inset by 8px with a hairline and 12px radius. Company switcher at the top, Anna's identity at the bottom, the current item gets a white chip with a petrol icon. Below 860px the sidebar becomes a top bar with a menu.
Holders Business
Two columns, 7 to 5. Left: brand, the task, one form, left-aligned at a reading measure of 440px. Right, on canvas: what happens next and what to have ready, in the product's own facts. No centred card, no marketing panel, no stock imagery. On phone the context follows the form.