Northgate Builders
3 open invoices · $41,880.00
Ledger components
Every seenry-ui component and every app class, in each state it can be in. Values come only from tokens.css; switch the theme above to check dark. Rules and reasons are in SYSTEM.md.
Foundations
Color
Cool greys split by hairlines. Ink blue is the one color that means act or selected. Status colors carry money meaning: red is overdue, failed or destructive; green is paid or settled; amber is disputed or at risk; slate is informational.
Page--bg
Surface--surface
Sidebar, table head--surface-2
Hover--hover
Selected row--selected
Hairline--line
Control border--line-strong
Text--text
Secondary text--text-2
Meta, icons--text-3
Ink blue, act--accent
Selected nav--accent-subtle
Paid, settled--ok
Disputed, at risk--warn
Overdue, failed--bad
Informational--info
Current--chart-1
1–30 days--chart-2
31–60 days--chart-3
61–90 days--chart-4
Over 90 days--chart-5
Type
IBM Plex Sans for everything, Plex Mono for IDs only. Seven steps; money is always tabular and never mono.
OverviewPage title, one per screen--type-title 22/28
$1,284,310.42Stat figure, cents dimmed--type-stat 24/32
Receivables agingSection and card titles--type-heading 14/20
Meridian Health GroupBody, table cells--type-body 14/20
Payment termsLabels, buttons, table heads--type-label 13/18
41 invoices past dueMeta and help text--type-small 12/16
INV-2026-0418Invoice, PO and payment IDs--type-mono 13/18
Space and radius
A 4px scale. Rows are 36px, controls 32px, both 44px on phones. Radius stays small: 4px for tags, 6px for controls and cards, 8px for floating layers.
4
8
12
16
20
24
32
48
--r-sm 4
--r-md 6
--r-lg 8
Icons
Tabler outline, 18px in navigation and icon buttons, 16px beside text. Icons take meta grey so the label stays stronger; selected rows tint them ink blue.
Actions and inputs
Button .ui-button
One filled primary per view. Secondary is the default; ghost for toolbars; danger is outlined red text and fills only inside the confirming dialog.
DefaultHoverFocusDisabledLoading
Primary
Secondary
Ghost
Danger
Text field .ui-field .ui-input
Always a visible label. Errors say what to do and sit under the field; affixes carry units.
Select and combobox .ui-select .ui-combobox
Native select for short fixed lists. Combobox wraps an input with a datalist when people type to find a customer or vendor among many.
Checkbox and radio .ui-choice
Checked controls fill ink blue, the same color as selection everywhere else.
Switch .ui-switch
For settings that apply immediately. In settings rows the label lives in the row and the switch keeps an accessible name.
Slider .ui-slider
A range input with its value written beside it. Use it for tolerances and thresholds where the exact number is shown; type the number when it must be exact to the cent.
Selection and navigation
Segmented control .ui-segmented
Switches a view, never submits. Selected is a raised white segment, not ink blue, so it never competes with the primary.
Tabs .ui-tabs
Sibling panels of one record or page. The 2px ink rule marks the selected tab.
3 open invoices, $61,880.40 outstanding.
Last payment Oct 2, $14,210.00 by ACH.
Priya Raman, Accounts payable.
Chip and filter bar .ui-chip .ui-filter-bar
An unset filter is a dashed outline; a set one turns solid ink and names its value. The count on the right always states rows and money.
App shell .ui-shell
Sidebar on the second surface, top bar on white, page on grey. Nav items show hover in grey and the current page in pale ink. Under 768px the sidebar becomes a drawer opened by the [data-nav-toggle] button.
Invoices
137 open, $1,284,310.42 outstanding
Overdue
41 invoices
Rows above: Invoices current, Customers hover, Payments focus.
Breadcrumb and pagination .ui-breadcrumb .ui-pagination
Breadcrumbs collapse to the current page on phones. Pagination sits in the table foot with the row count.
Steps .ui-steps .ui-step
A rule over each step: grey for done with a check, ink for the current step, hairline for what is ahead. Done steps link back.
- Company, done
- Getting paid
- Invoice defaults
- Invite your team
Command menu and kbd .ui-command .ui-kbd
Cmd K opens it anywhere. The first match is active; results never animate.
⌘KEsc
Feedback and layers
Alert .ui-alert
One sentence about this page, an optional detail line and at most one action. Tone follows the money meaning of the status colors.
A $22,000.00 wire from MERIDIAN HLTH GRP may match this invoice.Reference “INV0418 PART 1”, Oct 27
Tidewater Marine disputed line 3: short shipment of 4 cases.
ACH payment of $18,420.00 was returned: R01 insufficient funds.Brightwater Logistics · retry allowed after Oct 30
September closed. 214 invoices settled, $1,402,118.06 collected.
QuickBooks Online last synced 4 minutes ago.
Status and badge .ui-status .ui-badge
Status always pairs a word with a mark. A badge is a category, not a state.
PaidSettled
30 days latePayment failed
DisputedAt risk
Promise to paySent
DraftVoid
AnnualNet 30Tax exempt
Progress and meter .ui-progress .ui-meter
Progress is work moving; meter is usage against a limit and turns amber near it and red past it. The number is always written beside the bar.
Importing from QuickBooks412 of 1,036About 2 minutes left
Bank connections3 of 5
Invoices this period1,284 of 1,500
Credit used$104,210.00 of $100,000.00
Toast .ui-toast
A short result after an action, bottom right, never for errors that need fixing.
Reminder sent
Priya Raman will get it at ap@meridianhealth.com.
Skeleton .ui-skeleton
Matches the rows that will load; the shimmer stops for reduced motion.
Dialog and sheet .ui-dialog .ui-sheet
A dialog confirms one consequential act and names what will happen. A sheet holds a related task with more room.
Void INV-2026-0418?
Meridian Health Group is no longer asked to pay $48,250.00. The number is not reused.
Data
Table .ui-table
36px rows, hairlines, money right-aligned in tabular figures. Click a header to sort. The selected row gets pale ink and a 2px ink edge.
| Customer | Status | Amount due |
|---|---|---|
| Meridian Health Group | 30 days late | $48,250.00 |
| Northgate Builders | Promise to pay | $27,300.00 |
| Tidewater Marine Supply | Disputed | $4,215.50 |
| Saltmarsh Outfitters | Paid | $0.00 |
| Total due | $79,765.50 | |
Selected row, hover row, total row
Stat strip .ui-stat-strip
Up to three figures, exact to the cent with cents dimmed, each with one line of context.
- Outstanding
- $1,284,310.42 137 open invoices
- Overdue
- $312,940.18 41 invoices past due
- Collected in October
- $486,205.00 DSO 38 days, down 3
Charts .ui-chart
Conventional finance forms only: a stacked bar for aging with its legend as a table, vertical bars for money over months in grey with the month in progress in ink. Aging steps through four greys to one red, so only the oldest money is colored.
Receivables aging
By days past due
- Current$971,370.2475.6%
- 1–30 days$168,402.1013.1%
- 31–60 days$82,915.306.5%
- 61–90 days$36,790.002.9%
- Over 90 days$24,832.781.9%
Cash collected
Last 6 months
List .ui-list
A queue of rows: icon, what happened, who and why, and the amount at the right.
Data list and detail .ui-data-list .ui-detail
Label and value pairs as rows, or as columns for a record header. The detail panel is the selection beside a list.
- Bill to
- Priya Raman, Accounts payable
- Terms
- Net 30
- PO number
- PO-77120
- Paid
- $0.00
- Issued
- Aug 29, 2026
- Due
- Sep 28, 2026
- Amount due
- $48,250.00
Timeline .ui-timeline .ui-timeline-item
Who, what, when. Newest first; a hairline joins the events.
- ACH payment returnedR01 insufficient funds · $18,420.00
- Marcus Ortiz added a note“Called AP, retry after payroll clears.”
- Payment settledINV-2026-0371 · $9,140.00
- Dana Whitfield sent the invoice
Code .ui-code
Inline for field names and IDs in help text; a block with a copy button for API keys, webhooks and import formats.
Map your QuickBooks field DocNumber to invoice_number.
curl https://api.fenwick.com/v1/invoices/INV-2026-0418/remind \
-H "Authorization: Bearer $FENWICK_KEY" \
-d channel=emailEmpty state .ui-empty
Name what is missing, give one reason, offer one way forward.
No bills waiting for approval
Bills over $5,000.00 land here when a vendor sends them to bills@harborpine.com.
Content and patterns
Card, avatar, accordion .ui-card .ui-avatar .ui-accordion
Cards are hairline frames, never shadows. Link cards darken their border on hover.
When does a reminder stop?
After four overdue reminders, when a promise to pay is logged, or when the balance reaches $0.00.
Who can void an invoice?
Controllers and admins. Every void is logged with its reason.
Settings and danger zone .ui-settings-group .ui-danger
A description column beside bordered rows. Destructive actions live last, outlined red, and confirm in a dialog.
Payment reminders
Sent from ar@harborpine.com.
Sets the due date from the issue date.
Every 7 days while overdue
Stops after 4 reminders.
Disconnect and close
Logged for the whole workspace.
Void all drafts
Voids 14 unsent drafts.
Sign-in frame .ui-auth
Mark, title, providers, a divider, fields and the legal line. The error names the problem without saying which field was wrong.
Sign in to Fenwick
or with email
That email and password don’t match.
By continuing you agree to the Terms and Privacy Policy.
Blocks
Whole screens for one product, Fenwick, built only from the classes above. Start a new screen from the closest one.
Dashboard
Stats, aging, cash, overdue table, queue
List and detail
Filtered invoices with the selection open
Record
One invoice: facts, lines, activity
Settings
Defaults, reminders, methods, danger zone
Billing
Plan, usage meters, payment method, receipts
Onboarding
Stepper, one question, the empty product
Sign in
SSO, email and the error state