BusinessPress
← Back to homepage Brand · Finch & Co.

Finch & Co.

Heritage-inspired ledger software for independent law firms. Quiet, precise, ink-on-cream.

Review tokens
Dark first viewportUse the black-blue hero shell for important marketing and tool-entry pages.
Dashboard-native proofShow actual product surfaces, charts, rows, and controls instead of generic illustrations.
Blue means actionReserve electric blue for primary actions, active tabs, focus, and live system states.
Motion stays structuralAnimate opacity, transform, and drawn charts. Avoid layout jumps and decorative noise.
Template rule Marketing page Dark hero, one product-native demo panel, then white sections with proof and clear handoff CTAs.
Template rule Product demo Lead with the workflow screen. Use staged rows, approvals, status pills, and one primary action.
Template rule Technical page Keep code, protocol, permissions, and architecture visible. Avoid brochure metaphors.

01

Colors

Brand pigments and the semantic tokens components actually consume.

Brand

Brand Blue

--color-blue

Brand Navy

--color-dark-blue

Mid Navy

--color-dark-blue-50

Primary Soft

--color-purple

Body

--color-dark-grey

Semantic surface

Background
--background
Card
--card
Muted
--muted
Accent
--accent
Border
--border
Ring (focus)
--ring

Status

Success
 
 
aA
Info
 
 
aA
Warning
 
 
aA
Danger
 
 
aA

02

Typography

Display, body, and supporting type. Switch families in the console — every block updates.

.h1

Run a business, not a stack of tools.

.h2

Pages, posts, products, leads — one cursor.

.h3

Built for operators who ship every week.

.h4

Sectional headline weight

.body

Body copy lives at sixteen pixels with relaxed line-height. Keep paragraphs to roughly sixty-five characters of measure — the eye stops tracking comfortably past that. BusinessPress prose should read like a memo from someone who knows what they're doing.

.text-muted

Muted captions for secondary information, helper text, and metadata rows.

.text-link
Inline link example
font-mono

INV-2847 · 2026-04-26 · €1,247.30 · paid

03

Spacing & Radius

Rhythm and softness. Use the console to feel the difference between sharp and pillowy.

Radius

Card sm
Card
Pill sm
Pill
Circle

Spacing scale

4px
8px
12px
16px
24px
32px
48px
64px
96px

04

Elevation

Three diffusion shadows tinted to the background hue.

XS

Subtle separation

--shadow-xs

SM

Card resting state

--shadow-sm

MD

Hover, popovers

--shadow-md

05

Buttons

One primary per view. Group secondaries to its right.

Default

Status

With icons

Sizes

On dark surface

06

Forms

Labels above. Helper text below. Errors replace helper.

07

Cards

Use cards when elevation communicates hierarchy. Otherwise use dividers.

Pipeline

Open deals across all owners.

€84,217

+12.4% vs. last quarter

Updated 4 min ago View →

Pages published

Last 30 days.

47

14 drafts in queue

AI assistant

Ask the platform anything.

"Draft a follow-up email for leads who opened the pricing page twice this week."

08

Badges & Chips

State labels. Use color sparingly — they communicate, not decorate.

Draft Live Scheduled Needs review Failed
Marketing CRM Page builder Stripe AI MCP

09

Data tables

Dense by default. Hairline dividers, monospaced numerals, no row stripes.

Lead Source Stage Value Touched
Helena Marchetti Pricing page Discovery €2,400 47m ago
Yusuf Aydın Cold outbound Proposal sent €8,950 2h ago
Camila Restrepo Referral · Atelier Norte Negotiation €18,720 yesterday
Theo Lindqvist Webinar — Q2 Discovery €1,150 3d ago
Mira Kowalska LinkedIn ad Closed lost €0 1w ago

10

Empty · Loading · Error

Mandatory states for every data-bound surface.

Loading

Skeleton matches eventual layout.

No leads yet

Connect a form or import a CSV to see your pipeline come alive.

Sync failed

Stripe returned 429 rate_limited at 14:32. We'll retry in 60 seconds.

11

Iconography

Phosphor regular weight. Standardize size, never mix weights.

house
users
storefront
shopping-cart
chart-bar
gear
envelope
calendar
file-text
cube
magnifying-glass
plus
arrow-right
sparkle
lightning
lock-key

12

Templates

Page-level composition rules for BusinessPress marketing and product demo views.

Composition Home / product Start with the CMS+CRM+commerce promise, then prove it with real dashboard panels, agent workflows, and integration paths.
Composition AI / MCP demo Use a terminal or dashboard preview above the fold, then explain permissions, actions, and approval gates.
Composition Sales handoff End every page with one clear next action: book a demo, browse templates, or read technical docs.

BusinessPress design system · Source: docs/design.md

v1.0

Token export

Paste into Settings → Branding → Global CSS

Cart