Brand guide

QuickKeeper automates account reconciliation for bookkeepers and accounting firms. The mark is two ledger sheets that lock together, with a check where they match.

Version 1.0. Logo, icon, favicon, color and type.

Download brand kit

1. Logo

Use the horizontal logo where there is room and the stacked logo where space is narrow. Use the dark versions on dark backgrounds and the mono versions for one-color printing, stamps and embossing.

Horizontalquickkeeper-horizontal.svg / .png

Horizontal on darkquickkeeper-horizontal-dark.svg / .png

Stackedquickkeeper-stacked.svg / .png

Stacked on darkquickkeeper-stacked-dark.svg / .png

Horizontal, mono blackquickkeeper-horizontal-mono-black.svg / .png

Horizontal, mono whitequickkeeper-horizontal-mono-white.svg / .png

Clear space and minimum size

Keep clear space on every side equal to one quarter of the icon height (the dashed zone). Nothing else enters it: no text, edges or other logos.

Asset	Minimum size
Icon	16 px (use the small-size icon at 32 px and below)
Horizontal logo	140 px wide
Stacked logo	110 px wide

2. Icon

The icon is the logo on its own. Use it for the app, avatars, favicons and the browser extension. At 32 px and below the small variant drops the ruled lines and shadow and makes the check heavier so it stays readable.

16 px

32 px

48 px

64 px

128 px

256 px

Mono black

Mono white

Avatar

Maskable

3. Color

Teal is the statement, amber is the ledger, and the near-white lens is the match. Ledger Ink carries text and the dark surfaces. Use the accents sparingly: one accent per screen is enough.

Ledger Ink
#10202C
RGB 16, 32, 44
HSL 206, 47%, 12%
Primary dark. Wordmark, text, dark surfaces.

Deep Tile
#091620
RGB 9, 22, 32
HSL 206, 56%, 8%
Icon tile base, darkest surface.

Slate Blue
#1E3B4D
RGB 30, 59, 77
HSL 203, 44%, 21%
Icon tile highlight, raised dark surfaces.

Statement Teal
#55C4B2
RGB 85, 196, 178
HSL 170, 48%, 55%
Primary accent. The statement side.

Ledger Amber
#F8BC4E
RGB 248, 188, 78
HSL 39, 92%, 64%
Secondary accent. The ledger side.

Mist
#DDEEEA
RGB 221, 238, 234
HSL 166, 33%, 90%
Match highlight, light surfaces.

Match White
#FFFFFF
RGB 255, 255, 255
HSL 0, 0%, 100%
Text on dark, backgrounds.

Gradients

Used in the icon only. Tile: Slate Blue to Deep Tile. Sheets: teal #86F0DB to #25998A and amber #FFDF8A to #F29A12. In the interface use the flat colors.

teal ramp

50
EFFAF9

100
D7F4EF

200
B0E8E0

300
88DDD0

400
55C4B2

500
41C8B4

600
30A694

700
268275

800
1C5F55

900
123F39

amber ramp

50
FEF8EB

100
FDEDCE

200
FBDFA7

300
F9CF7B

400
F8BC4E

500
F7B83B

600
F5A70A

700
C48508

800
936406

900
624304

ink ramp

50
F8FAFB

100
EFF3F6

200
DEE7ED

300
BECEDA

400
90ACC1

500
628AA7

600
496B83

700
375062

800
253541

900
10202C

Interface states

Success
#2E9E6B
RGB 46, 158, 107
HSL 153, 55%, 40%

Warning
#F8BC4E
RGB 248, 188, 78
HSL 39, 92%, 64%

Error
#E5484D
RGB 229, 72, 77
HSL 358, 75%, 59%

Info
#3B82C4
RGB 59, 130, 196
HSL 209, 54%, 50%

Contrast

Pair	Sample	Ratio	WCAG
Ledger Ink on White	Reconciled	16.60:1	AAA
White on Ledger Ink	Reconciled	16.60:1	AAA
Ledger Ink on Statement Teal	Reconciled	7.85:1	AAA
Ledger Ink on Ledger Amber	Reconciled	9.72:1	AAA
Statement Teal on Ledger Ink	Reconciled	7.85:1	AAA
Ledger Amber on Ledger Ink	Reconciled	9.72:1	AAA
White on Statement Teal	Reconciled	2.12:1	Fails
White on Ledger Amber	Reconciled	1.71:1	Fails

Do not put white text on teal or amber. Use Ledger Ink there.

4. Typography

Inter throughout. The wordmark is drawn from Inter 600 (QUICK) and Inter 800 (KEEPER) and converted to outlines, so do not retype it.

Every line matched.

Heading 600

Body copy in Inter 400 at 15 to 16 px with a line height of about 1.55. Use 500 for labels and buttons, 600 for headings and 800 only for large display lines. Figures use tabular numbers in tables so columns line up: 1,284.50 96.00 12,040.10.

5. Usage

Do

Use the supplied files. Do not rebuild the logo.
Put the color logo on white, mist or Ledger Ink backgrounds.
Use the mono versions when only one color is available.
Keep the clear space and minimum sizes.

Do not

Recolor the sheets, the lens or the check.
Stretch, rotate, skew or outline the logo.
Add shadows, glows or other effects to the logo.
Place it on busy photos or low-contrast colors.
Set the name in another font or change the weights.
Use the horizontal logo smaller than 140 px wide.

6. Files

Folder	Contents
`logo/svg`	All logo and icon versions as vector files.
`logo/png`	2000 px logos on solid white or dark backgrounds, so they are readable in any viewer.
`logo/png-transparent`	The same logos on transparent backgrounds.
`icon`	The icon at 16, 24, 32, 48, 64, 96, 128, 180, 192, 256, 384, 512 and 1024 px.
`favicon`	favicon.ico (16, 32, 48), SVG, PNGs, Apple touch icon, Android and maskable icons, web manifest and the HTML head snippet.
`extension`	Browser extension icons at 16, 32, 48, 96 and 128 px, the store listing icon and a manifest snippet.
`social`	Avatar, Open Graph image, header, and store tiles.
`palette`	palette.json, palette.css, tailwind.colors.js and swatches.png.
`fonts`	Inter 400, 500, 600 and 800 (SIL Open Font License).