Brand guidelines · v1.0

Precise, calm, and built to reconcile.

Integrater sits between a business's payments and its books. Our brand should feel the same way the product works: exact, trustworthy, and quietly confident. Use these guidelines for product, marketing, and partner materials.

Logo

The mark pairs a stacked blue “i” — two ledger blocks locking into place — with a lowercase charcoal wordmark. Always use the supplied artwork; never redraw it.

Primary logo

Full color, for light backgrounds

Download PNG

Clear space

Keep a margin equal to the height of the upper block of the mark (x) on every side. No text, edges, or imagery inside this zone.

Minimum size

32px

24px min

Never render the full logo below 24px tall on screen or 0.3in in print. Below that, the wordmark loses legibility.

Backgrounds

Approved:White or card

Approved:Off-white surface

Avoid:Charcoal or blue

The full-color logo is designed for light, low-contrast surfaces. Avoid placing it on dark fills or photography, where the charcoal wordmark disappears.

Misuse

Don't stretch or squash
Don't rotate
Don't recolor
Don't reduce opacity

Color

A restrained palette: mostly paper and ink, with blue for action and green only where money balances. Click any value to copy it.

Core

--primary
Integrater Blue
Logo mark, primary actions, links, focus rings.
HEX
RGB
OKLCH
--foreground
Ledger Ink
Wordmark, headings, and body copy.
HEX
RGB
OKLCH
--accent
Reconcile Green
Reserved for balanced, settled, and credit signals.
HEX
RGB
OKLCH

Neutrals & system

--background
Paper
Page background.
HEX
RGB
OKLCH
--card
Card
Panels and raised surfaces.
HEX
RGB
OKLCH
--secondary
Surface
Hover states, muted fills.
HEX
RGB
OKLCH
--border
Hairline
Borders and the blueprint grid.
HEX
RGB
OKLCH
--muted-foreground
Slate
Secondary text and captions.
HEX
RGB
OKLCH
--destructive
Alert Red
Errors and destructive actions only.
HEX
RGB
OKLCH

Proportion

Paper & card: 70%
Ledger Ink: 18%
Blue: 9%
Green: 3%

Accessibility

Blue on white passes WCAG AA for body text (4.6:1). White text on blue buttons passes at the same ratio.
Green on white is 3.5:1 — use it for icons, indicators, and text 18px or larger, never for small body copy.
Never rely on green or red alone to convey status. Pair color with an icon or label.

Typography

Two families. Inter carries every word we write; JetBrains Mono is reserved for numbers, codes, and anything that reads like a ledger entry.

Primary · Sans

Inter

ABCDEFGHIJKLM abcdefghijklm 0123456789 $%.,

Regular 400, Medium 500, Semibold 600

Headlines, UI, and body copy.

Secondary · Mono

JetBrains Mono

ABCDEFGHIJKLM abcdefghijklm 0123456789 $%.,

Regular 400, Medium 500

Amounts, IDs, tokens, and labels. Always tabular figures.

Type scale

Display
56 / 1.08 · Semibold · −2%
Books that balance.
Heading 1
40 / 1.15 · Semibold · −2%
Offset your card fees
Heading 2
30 / 1.2 · Semibold · −1%
Reconciled to the penny
Body large
18 / 1.6 · Regular
Integrater posts every fee and surcharge to QuickBooks automatically.
Body
16 / 1.6 · Regular
Keep the processor and rates you already have.
Eyebrow
12 / 1.4 · Semibold · +10% · Caps
Compliance

Numbers

Example of monospaced, tabular figures in a ledger
Entry	Amount
Invoice INV-10482	$1,250.00
Surcharge 3.00%	+$37.50
Processing fee	−$37.50
Net to books	$1,250.00

Set money in mono with tabular figures so columns align. Use a true minus sign (−), always show two decimals, and right-align amounts.

Voice & tone

We sound like the most reliable person on the finance team: clear, specific, and unflappable.

01
Exact, not exaggerated
We work with money. Say “up to 100%” when it’s up to 100%. Specific numbers beat superlatives every time.
02
Calm about compliance
Rules are complicated; we make them feel handled. Explain plainly, never use fear to sell.
03
Fluent in accounting
Our readers close books. Use real terms — reconcile, journal entry, GAAP — and use them correctly.

In practice

Do: Offset up to 100% of your card processing fees.
Don't: Never pay a processing fee again!
Do: QuickBooks ties out on its own — no month-end journal entries.
Don't: Our revolutionary AI-powered engine transforms your accounting.
Do: Surcharging rules vary by state. We apply the right one at checkout.
Don't: Avoid massive fines and legal trouble with Integrater.

Naming

Write: Integrater
Not: IntegRater, Integrator, INTEGRATER
Write: QuickBooks Online
Not: Quickbooks, QBO (in marketing copy)

The logo is lowercase; the name in running text is title case. Integrater is not affiliated with Intuit — don't imply partnership or endorsement.

Interface elements

Hairline borders, a small radius, and the blueprint grid. Shapes stay flat — no heavy shadows, gradients, or glows.

Buttons

Start free trialSee how it worksSign in

One primary button per view. Labels are sentence case and start with a verb.

Badges & status

Built for QuickBooks OnlineReconciledLive today

Radius

4px

6px

8px

Full

Blueprint grid

64px hairline grid · 70% border

The grid is our structural signature. Use it behind hero areas and section headers, faded with a radial mask — never at full strength across body content.