Ledgerfox brand guidelines
Invoices and cash flow for freelancers
FinanceInside this guide
6 chapters, from the logo to how Ledgerfox looks in the world. Each page states one rule.
Brand
The name, the line, and how to use this guide.
- Overview04
About Ledgerfox
This guide sets out how the Ledgerfox identity works: the logo, colour, typography and how they come together.
Follow it and everything, from a business card to a website, looks like it came from the same place.
Invoices and cash flow for freelancers
- Name
- Ledgerfox
- Category
- Finance
- Typefaces
- Bricolage Grotesque and Figtree
- Palette
- Citrus
Logo
The primary lockup, the space around it, and the versions to use.
02.1 Primary logo
The horizontal lockup. Use it wherever there is room for it.
Clear space
Keep at least x of empty space on every side of the logo, where x is half the height of the symbol.
Text, images and the edge of the page all stay outside this area.
Minimum size
Below these sizes the symbol starts to lose detail. Sizes are the height of the symbol.
Lockup: at least 20 px on screen, 6 mm in print. Symbol alone: at least 16 px or 5 mm.
Variations
Use the horizontal lockup by default and the stacked one in square or narrow spaces.
The symbol works alone where the name is already clear, such as app icons and avatars. The wordmark is for places too small for the symbol to read.
Colour versions
Misuse
- Do not stretch or squash it
- Do not rotate it
- Do not use colours outside the palette
- Do not add shadows, glows or outlines
- Do not place it on a low-contrast colour
- Do not change the typeface
Colour
The palette, the values, and which combinations to set type in.
Palette
Five colours, used in roughly these proportions. Surface sets the page, primary carries the brand, ink is for text, and secondary and accent support and highlight.
Colour values
- Primary
- HEX
- #CC8308
- RGB
- 204, 131, 8
- HSL
- 38, 92%, 42%
- CMYK
- 0, 36, 96, 20
On surface 3.0:1 · large text only - Secondary
- HEX
- #FEF3C7
- RGB
- 254, 243, 199
- HSL
- 48, 96%, 89%
- CMYK
- 0, 4, 22, 0
On surface 1.1:1 · shapes only - Accent
- HEX
- #1D4ED8
- RGB
- 29, 78, 216
- HSL
- 224, 76%, 48%
- CMYK
- 87, 64, 0, 15
On surface 6.6:1 · AA - Surface
- HEX
- #FFFDF5
- RGB
- 255, 253, 245
- HSL
- 48, 100%, 98%
- CMYK
- 0, 1, 4, 0
Ink on it 16.1:1 · AAA - Ink
- HEX
- #2B1D04
- RGB
- 43, 29, 4
- HSL
- 38, 83%, 9%
- CMYK
- 0, 33, 91, 83
On surface 16.1:1 · AAA
Tints
Colour pairings
Body text needs a contrast of at least 4.5:1 (AA). Large headings, 24 px and up, can go down to 3:1.
Pairs marked ✕ are for shapes and decoration only, never for text.
| Background | Primary | Secondary | Accent | Surface | Ink |
|---|---|---|---|---|---|
| on Primary | Same colour | Secondary on primary: 2.8 ✕, fails | Accent on primary: 2.2 ✕, fails | Surface on primary: 3.0 Large | Ink on primary: 5.3 AA |
| on Secondary | Primary on secondary: 2.8 ✕, fails | Same colour | Accent on secondary: 6.0 AA | Surface on secondary: 1.1 ✕, fails | Ink on secondary: 14.7 AAA |
| on Accent | Primary on accent: 2.2 ✕, fails | Secondary on accent: 6.0 AA | Same colour | Surface on accent: 6.6 AA | Ink on accent: 2.4 ✕, fails |
| on Surface | Primary on surface: 3.0 Large | Secondary on surface: 1.1 ✕, fails | Accent on surface: 6.6 AA | Same colour | Ink on surface: 16.1 AAA |
| on Ink | Primary on ink: 5.3 AA | Secondary on ink: 14.7 AAA | Accent on ink: 2.4 ✕, fails | Surface on ink: 16.1 AAA | Same colour |
Typography
The two typefaces and the sizes they are set at.
- Headings18
- Text19
- Type scale20
Bricolage Grotesque
Bricolage Grotesque sets the name, headlines and short display lines. Use it at Semibold with tight line spacing.
Figtree
Figtree is for paragraphs, captions, buttons and anything people read at length. Use it at Regular, with generous line spacing.
Invoices and cash flow for freelancers. Ledgerfox writes in Figtree: clear, even and easy to read, from the first line of a website to the small print on a receipt.
Type scale
- DisplayBricolage Grotesque 600 · 56/59
- Invoices and cash flow for freelancers
- HeadingBricolage Grotesque 600 · 40/44
- Welcome to Ledgerfox
- SubheadingBricolage Grotesque 600 · 28/32
- A short section heading
- BodyFigtree 400 · 16/24
- Body text at 16 px with 1.5 line spacing keeps long reads comfortable on any screen.
- CaptionFigtree 400 · 12/17
- Captions, labels and small print
App icon and avatar
Where space is small and square, use the symbol alone. On app icons it sits on primary at a little over half the icon width; on avatars and profile pictures, on surface.
05.2 Pattern
Symbol at 0° and 180° on an offset grid. For packaging, backgrounds and merchandise, never behind text.
Imagery
Natural light, real places and real people. Keep rooms neutral and let brand colour appear on one object or a single overlay.
Photos here are samples from Unsplash, to show the direction.
Applications
The identity on a screen, on paper, and in a place.
- Campaign26
- Digital27
- Print28
- In the world29
Campaign
Digital
In the world
Make one like this
This is an example kit. Describe your business and get nine logos, each with a guide like this one, in about a minute.
- Logo symbolSVG in colour, black and white
- Logo symbolPNG at 512, 1024 and 2048 px
- palette.json, palette.cssThe five colours as code
- FONTS.txtBoth typefaces, with links
- LICENSE.txtCommercial use for your brand
Sample photos by Lauren Sauder, Daizy Isumi, Numbers On Your Tip, d c, Ella Deane, Ben Kolde, Michael Descharles, Ron McClenny on Unsplash. Not included in the download.