Surface/Paper
Page background
#F5F4EE
Surface/Raised
Cards, inputs, hover rows
#FBFAF7
Surface/Sunk
A rare quiet band
#ECEBE4
Ink/Primary
Text, primary button, structural rules
#161C18
Ink/Secondary
Leads and secondary text
#48514B
Ink/Muted
Meta and captions
#626A64
Ink/Hover
Hover and pressed fill of ink buttons
#2B342E
Rule/Hairline
Hairlines between rows
Ink at 12%
Rule/Strong
Column tops, link underlines
Ink at 26%
Exhibit/Sheet
Exhibit paper only
#E5EBDD
Exhibit/Rule
Rules inside an exhibit
#CCD6C2
Exhibit/Rule strong
The rule above an exhibit table
#A9B9A0
Exhibit/Deduction
Deduction bars in a bridge
Ink at 30%
Exhibit/Bar
Bars in a chart
#7D877F
Accent/Key figure
The one figure that matters
#1C5A40
Accent/Tick
Tick marks only: checked against source
#B23A26
Text/H1 Display
Home hero only
Shopify says one number.
Text/H1 Page
Page mastheads
What won’t your books tell you?
Text/H2 Section
Section titles
Fees you can read before the first call
Text/H3 Title
Row and card titles
Inventory & cash planning
Text/H4 Subtitle
Quotes, names, small titles
“We see the cash gap before we place the order.”
Text/Lead
Introductions under a title
We tie every payout and settlement to the bank.
Text/Standfirst
Opening paragraph of a case or note
A Shopify store added Amazon and wanted to know what each channel really kept.
Text/Body
Running text
A stock order spends cash months before the units sell. We set out what is committed and when each payment falls due.
Text/Article
Long paragraphs on About and other reading pages
We read the payout reports and the bank statement before we read the dashboard.
Text/Small
Lists and secondary text
Payouts reconciled by channel
Text/Meta
References and labels
Fees in writing · Sample figures
Text/Caption
Notes, legends, sample labels
Illustrative engagement, fictional brand. Not client results.
Text/Interface
Names, labels and form fields
Your name
Text/Reference
Initials in an exhibit’s Prepared and Reviewed cells
CF
Text/Button
Labels inside Button and Submit button
Request a diagnostic
Text/Link label
The Arrow link label
Read the case note
Text/Link label hover
The Arrow link label on hover
Read the case note
Text/Wordmark
The practice name in the navigation and footer
Commerce Finance
Figure/Default
Figures in a ledger, tabular
(34.80)
Figure/Strong
The line that leads an exhibit, such as contribution margin
Contribution margin
Figure/Total
The total that matters
20.90
Figure/Display
Fees and large figures
$1,450
Figure/Hero
One headline figure, in a band
25 → 8
Prose/Body
Paragraphs in CMS rich text for cases and notes
Payouts arrive net of fees, refunds and reserves, so the bank never matches the sales report on its own.
Prose/H2
Headings in CMS rich text and on the legal pages
What the payout report shows
Prose/H3
Subheadings in CMS rich text
Fees and reserves
Prose/List
List items in CMS rich text
A reconciled payout for every channel
Prose/Placeholder
Bracketed text to replace before launch, as on Privacy and Terms
[Add the legal name and registered address]
Button
Primary action. Large on desktop and tablet, Small on phones, Light on the ink band.
Button · Small
The phone variant; also for tight rows.
Button · Light
On the ink band, as in the Closing.
Arrow link
Secondary action next to a button, and links inside rows.
Tick and open item
A tick means a figure agrees to its source. An open item is a question with an owner.
Template badge
Preview only. Delete it from the Site layout template in your copy.
Submit button
Form submit with Loading, Success and Error states.
Question · FAQ row with Closed and Open variants
Can you work with our current bookkeeper?
Can you work with our current bookkeeper?
Yes. Before the first month, we write down who owns the close, the supporting files and the review, so nothing is done twice.
Navigation · Set in the Site layout template: Desktop at the top of every page and Phone on smaller screens. Phone Open, shown here, is the menu after a tap.
Page structure · Masthead opens this page and every inner page, Desktop on desktop and Phone on tablets and phones; its title is the page’s only h1. Section head opens each section, with the same split. Navigation and the footer come from the Site layout template. Closing ends every page on an ink band, as below.
(6.20)
Negatives sit in parentheses, never with a minus sign and never in red.
20.90
A single rule above a total and a double rule below it, under the figure only. The total that matters is green.
✓
A red tick only where a figure agrees to a source record, and every exhibit with ticks carries a legend.
per $100
State the unit instead of inventing absolute revenue.
Fees in writing
Section labels are plain words, never codes. Number only what the page refers to, like Exhibit 1 or Letter 2.
Line icons from the Lucide set at 24 px with a 1.5 stroke, in Ink/Primary: one per item, above or beside its title. Platform logos come from Framer’s Logos set and only name platforms.
Exhibit/Bar
Charts are built from frames: Exhibit/Bar for the series, Accent/Key figure for the one bar that matters, and the figures written beside the marks.
Photo
Photos sit in 4 px frames in natural colour, one band per inner page. Team portraits stay black and white.
Sample quote
The practice, its clients, quotes, fees, results and team are fictional, and the page says so where they sit.