Assured
/əˈʃʊəd/ adjective
Confident without being loud. States what it does, backs it up, moves on.
- Sounds like
- A senior partner who does not need to raise their voice.
- Never
- Hype, superlatives or exclamation marks.
Full brand guidelines.
Who we are, how we sound and how we look. This page is the single source of truth for the Briefcase brand, for everyone who builds a page, a deck, a post or a product screen.
The test for this page: if everything else were deleted tomorrow, we could rebuild the look and feel of the website from this page alone.
01
Who we are
Briefcase is the next generation of accounting software.
We build software that handles the legwork of accounting, explains every decision it makes, and gets better the more it is used. Business owners get accurate books that are always up to date. Accountants get the time back to do the important work only they can do.
- Name
- Briefcase
- What we make
- Accounting software that handles the legwork
- Products
- Ledger, the accounting system. Connect, for books on Xero and QuickBooks.
- Market
- UK businesses and the accountants who serve them
- Organising belief
- Accounting software should handle the legwork.
Our beliefs, brand words and the audience we design for guide everything here. They are internal and live in the briefcase-brand skill (references/identity.md), which your agent loads automatically.
02
Personality
If Briefcase were a person: how it behaves, in every sentence and every screen.
Precise
/prɪˈsʌɪs/ adjective
Exact in numbers, words and pixels. Every detail considered, nothing approximate.
- Sounds like
- A well-kept ledger. Aligned, checked, correct.
- Never
- Vague promises or rounded-up claims.
Pioneering
/ˌpʌɪəˈnɪərɪŋ/ adjective
First to show what is now possible. New capability, shipped often.
- Sounds like
- The one who has already tried it, and shows you how.
- Never
- Nostalgic, safe or “the way it has always been done”.
Characterful
/ˈkarəktəfʊl/ adjective
A touch of wit and warmth, like the tilt in our mark. Human, never goofy.
- Sounds like
- A dry line in an otherwise serious email.
- Never
- Mascots, puns in headlines or cartoon clutter.
03
Voice
The brand is durable; messaging changes with every launch. These rules hold whatever the campaign.
Make the message specific
Make the message specific to Briefcase and the reader’s situation. Explain distinctive strengths through concrete behaviour. Definitions and competitor explanations should answer their own questions without forcing in a Briefcase claim.
NotAccounting, made easy.
InsteadLine-item coding. Without supplier rules.
Specific beats clever
Name the feature, the number, the outcome. Readers skim, so give them something concrete to land on.
NotSupercharge your accounting workflow.
InsteadReceipts from WhatsApp, coded and matched to the bank.
Talk about AI by what it does
Talk confidently about AI through the work it performs. Each mention should add something useful.
NotPowered by cutting-edge AI.
InsteadEvery decision comes with its reasoning.
Confident, plain and British
Write in clear, natural British English. Be direct and specific, with a confident point of view. Mix short statements with fuller explanations, keeping connected ideas together. Remove filler without removing useful detail or the author’s personality. No hype words or exclamation marks.
NotThe world’s most revolutionary ledger!
InsteadMeet your new ledger.
Writing mechanics
- Sentence case for every heading, button and label.
- Marketing display headlines use a full stop and may be phrases. Article titles and descriptive section headings need no full stop. Questions keep their question mark. Buttons, labels and metadata titles do not inherit display-headline punctuation.
- Adapt the detail to the job: compact copy for feature cards, short paragraphs for fuller marketing sections, connected prose for articles and comparisons, and direct answers or instructions for help, definitions and tools.
- British spelling: organisation, categorise, colour.
- “Briefcase Ledger” on first mention, then “Ledger”. The company is always “Briefcase”.
- Numerals for figures (3,000+, 14-day). £ before the amount, no pence unless it matters.
- Every claim with a number needs a source we could show a customer.
- Messaging changes with each launch. The brand does not. Keep campaign lines out of this page.
04
Logo
A briefcase at a fixed 15° tilt. The geometry is exact; the tilt is the character. Never redraw it: always use the master files in Downloads.
Anatomy
- Mark
- Two shapes, body and handle, one radius family. 462 × 450 units.
- Tilt
- 15° anticlockwise, built into the artwork. Do not rotate further.
- Lockup
- Mark height equals lockup height. Gap from mark to wordmark is 139 units, about 0.3 × the mark height.
- Clear space
- 0.5 × mark height on all sides. Provisional.
- Minimum size
- Lockup 88px wide on screen, 25mm in print. Mark alone 16px.
- Wordmark
- Set in Bricolage Grotesque, then outlined. The outlines are the master: never retype “Briefcase” in the font, even to match it. The site header uses the full lockup; the footer uses the wordmark alone. We don’t name the font publicly.
Colour combinations
Ink is the default. Everything else is chosen for its background. These are the only approved pairings.
Primary
Banner layouts: centred lockup for covers and end frames, bottom-left for headers and slides.
Product lockups
One brand, no product logos. The wordmark without the mark, then the product name in Manrope 400 at 1.175 × the wordmark height, 0.28em after it, sitting on the same baseline. Use product lockups on product pages and menus only; the site header always reads Briefcase.
LedgerConnect
Ledger
Menu size on the dark card: 17px wordmark, 20px product name.
- Mark
- Never included. The lockup is the wordmark alone.
- Product name
- Manrope 400, letter-spacing -0.02em, 1.175 × the wordmark height.
- Gap
- 0.28em of the product name.
- Alignment
- Shared baseline. The product name is always lighter in weight than the wordmark.
Avatar and favicon
The mark alone, centred at 54% of the canvas width: 540 × 525px on the 1000px master, leaving calm space around it in a circular crop. Aqua on Ink is the default avatar; the others are for partner listings, integrations and app stores that need a lighter or branded tile. App icons and square logo tiles use the mark larger, at 66% (briefcase-app-icon.svg), because nothing crops them.
Don’t
05
Colour
Deep harbour. Ink leads and Teal accents: the darker teal and an ink-first palette make Briefcase feel established. Click any swatch to copy its hex.
Core
Supporting
Utility and glow
Proportion
Mostly paper and ink, with teal used sparingly enough that it always means “act here”. A page that feels teal has too much of it.
Paper and White 68%Ink 22%Teal 6%
Accessible pairings
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
06
Typography
Two families and a mono. Manrope gives headlines their assured, engineered shape; DM Sans keeps everything else calm and readable.
Manrope
Headings, numbers, product lockupsMeet your new ledger.
Aa Bb Cc 0123456789 £ % &
600 for headings · 500 for figures and card titles · 400 for large, quiet headings
DM Sans
Body copy, interface, buttonsReceipts from WhatsApp, coded and matched to the bank.
Aa Bb Cc 0123456789 £ % &
400 for body and buttons · 500 for emphasis and labels · 600 for small UI titles
DM Mono
Labels, figures in product clips, codes and key hintsAUTO-PUBLISHED · 09:41
Aa Bb Cc 0123456789 £ % &
400 · 500. Always uppercase for labels, with wide tracking
Type scale
These are the exact values used on the new website. Resize the window: headline sizes are fluid.
Meet your new ledger.
Built for what comes next.
Month-end, in real time.
Trusted by 3,000+ UK accountants.
3,000+
Line-item coding. Without supplier rules.
A new generation of accounting software, built to do more of the work.
Every decision comes with its reasoning, its sources and the checks it passed.
Forward receipts by email or WhatsApp and they are coded before you open the app.
Get started
14-day free trial · No credit card required · ISO 27001 certified
Month-end
Books live in Ledger
Rules
- Tracking tightens as size grows: -0.04em at card titles, -0.045em for section headlines, -0.055em for the hero.
- Headings use text-wrap: balance. Body copy uses text-wrap: pretty.
- Never heavier than 600. When in doubt, go one weight lighter.
- Marketing display headlines use a full stop and stand alone, with no eyebrow above. Article titles and descriptive section headings need no full stop; questions keep their question mark. Sentence case everywhere, uppercase only for mono labels.
- Body copy is Muted #51646D on light. Headlines are Ink. Mono labels inside cards are Teal.
- Figures use tabular numerals so columns and counters never jitter.
07
Layout and shape
Wide, calm and asymmetric. White space is a feature: when a section feels crowded, remove something rather than shrink it.
Spacing
- Container
1340pxPlus a gutter on each side- Gutter
clamp(20px, 3.4vw, 48px)20px on phones, 48px on wide screens- Section gap
clamp(96px, 11vw, 160px)Between major sections. Generous on purpose- First section
clamp(56px, 7vw, 96px)Hero to first section- Card gap
16pxBetween cards in a grid or pair- Card padding
30px 28px26px 22px on phones. Showcase cards 40–56px- Heading to content
40pxHeadline to lede 16–18px. No eyebrows above section headlines
4
8
12
16
24
32
40
56
72
96
Spacing steps. Use these; avoid in-between values.
Composition
Corner radius
Every control is nearly square at 4px, which makes it feel engineered. Containers get softer as they get bigger. Pills, badges and the header are fully round.
Depth
Shadows are long, soft and pulled in with a negative spread, so cards float rather than sit on a drop shadow. Borders are always 1px hairlines.
0 24px 48px -36px rgba(20, 37, 45, 0.3)0 40px 80px -48px rgba(20, 37, 45, 0.6)0 1px 0 #fff inset, 0 28px 64px -28px #14252d4d, 0 2px 8px #14252d0d0 25px 41px -7px #ffffff7dSurfaces and texture
background: var(--bc-canvas); box-shadow: 0 1px 0 var(--bc-line)Transparent at the top of the page, solid Paper with a hairline once you scroll. No glass: blur over moving content costs every frame and turns muddy over dark sections.radial-gradient(circle, rgba(46,116,128,.12) 0.7px, transparent 0.9px) 0 0 / 26px 26pxAlways masked so it fades out. Behind section tops and product stages, never behind body text.Breakpoints
- 700px
- Phone to tablet. Cards gain padding, pairs go side by side.
- 950px
- Navigation collapses to the menu button below this.
- 1100px
- Full desktop layouts: bento columns, sticky chapter rail (needs 720px of height too).
- Containers
- Product clips use container queries, so they adapt to the card they sit in rather than the window.
08
Components
The building blocks of every page. These are live: hover and tab through them. They are shown on the light site, which is the only theme the website has today.
ProductsPricingCustomers
NEW Introducing Briefcase Ledger
Matched Needs reviewDraft Held
New- 14-day free trial
- No credit card required
- ISO 27001 certified
Trusted by 3,000+
UK accountants
Capture
Receipts in, coded out.
Forward by email or WhatsApp. Briefcase reads, codes and matches each line.
Reports
Your numbers, live.
Profit and loss, balance sheet and cash, always up to date.
09
Motion
Motion is how we show that something intelligent is happening. It should feel quick, precise and calm, like watching a very good accountant work.
Motion shows the work
Animate what the product is doing (reading, thinking, checking, publishing), not decoration. If an animation does not explain something, cut it.
Once, on arrival
Sequences play when they are half in view and then settle. Loops are reserved for thinking states, live dots and the marquee.
Quick out, soft landing
Everything uses the house ease-out. Things arrive with a short rise and a blur that clears; nothing bounces.
Always optional
With reduced motion on, every sequence jumps to its final state and nothing moves. The page must read perfectly without motion.
Signature moments
Checking VAT treatment
CategoryComputer software
Timing
- Easing
cubic-bezier(0.23, 1, 0.32, 1)for everything that moves. Colour changes use plain ease.- 150ms
- Colour changes: hovers, pressed states
- 220ms
- Micro movement: arrow nudge, menu open
- 320ms
- Stretch arrow, larger UI transitions
- 360–450ms
- Content resolving, chapter changes
- 1.2–2s
- Thinking loops: shimmer, skeleton breathe
- 38s
- Logo marquee
- Trigger
- At least 50% visible, and only while the tab is visible. The hero sequence pauses on a button press.
10
Icons
A quiet line icon set with a few signature glyphs of our own. Icons label; they never decorate.
In use on the website
Construction
11
Imagery
Cursor has watercolour. Clay has hand-drawn shapes. Briefcase needs one visual idea of its own that adds warmth without losing the premium, technical edge. This section is in exploration.
In exploration
The backdrop
The chosen direction replaces this frame. It must sit behind the product without competing with it, work as a flyer, a social header and a video end frame, and stand up in both light and dark.
What we have agreed
- The product stays at the centre. Imagery is the stage, never the subject.
- People are welcome, used with restraint. They add trust and grounding when small in frame and part of a scene.
- No lifestyle photography, no stock, no over-the-top human imagery.
- Nothing cosy or cute. Scenes should feel aspirational, crafted and a little bit exciting.
- One distinctive visual idea, used everywhere: the site, flyers, social and launch video.
Existing asset: the Sculpted glow
- Use
- Under the hero product card. The only gradient in the system.
- Colours
- Aqua #81CBC8 at 65% and citron #CBD673 at 55–70%, radial layers fading into Paper, with a paper cut-out on top.
- Space
- Needs about 0.33 × the product width below the card, so the next section never cuts it off.
- Never
- As a flat fill, behind text, or on more than one element per page.
12
Light and dark
The product and the website both ship a light and a dark theme, and the visitor’s system setting decides. The website also has a System, Light, Dark switch in its footer.
Light
Briefcase Ledger
Meet your new ledger.
Capture, coding, bank feeds and month-end in one system.
Dark
Briefcase Ledger
Meet your new ledger.
Capture, coding, bank feeds and month-end in one system.
Theme tokens
Dark is Deep Ink all over: deeper than Ink, but still in the brand’s hue. Surfaces differ only slightly, so every block keeps a 1px border. Teal text fails on dark backgrounds, so Aqua takes over for links, focus and icons; on the website, solid buttons stay Teal with white text. On a dark page, the Ink moments (closing band, footer, dark cards and explaining panels) lift one step, to #172931 with a #2C444D edge, so they still stand apart. Glows run at about half strength and one-colour customer logos turn white.
RoleLightDark
Canvas #F7F8FA #0A1418
Surface #FFFFFF #101D23
Raised #FFFFFF #172931
Border #DCE5E7 #20343C
Text #14252D #EEF4F5
Muted text #51646D #A3B4BA
Accent text #2E7480 #81CBC8
Primary button #2E7480 #81CBC8
Button label #FFFFFF #0A1418
- Product screenshots and animations keep the product’s own theme. Do not invert them.
- The logo switches to White or Aqua on dark. The Sculpted glow drops to half opacity.
- Every new component is checked in both themes before it ships.
13
Downloads
Master artwork. Always start from these files, never from a screenshot.
