Beacon Finance Partners

Design System

Tokens, type scale, grid and components. Every value below is defined once in src/styles.css and consumed semantically — ready for Next.js handoff.

Colour

Midnight Navy#071C33Hero, footer, major dark sections
Beacon Blue#32699DLinks, icons, selected states
Beacon Rich#0E2A47Statistics band, deep blue surfaces
Slate Blue#667C8FSecondary blue-grey
Blue Grey#DCE3E8Borders, dividers, subtle surfaces
Cool Mist#F2F5F6Alternate light sections
White#FFFFFFPrimary light content areas
Charcoal#17212ANeutral dark supporting colour
Beacon Yellow#D6B43CRestrained accent only

Typography

DisplayCommercial finance, structured.Playfair Display · clamp 44–72 / 1.04 / -2%
H1Commercial finance, structured.Playfair Display · clamp 36–52 / 1.1
H2Commercial finance, structured.Playfair Display · clamp 30–40 / 1.15
H3Commercial finance, structured.Playfair Display · clamp 22–28 / 1.25
H4Commercial finance, structured.Inter Semibold · 17 / 1.4
Body LargeCommercial finance, structured.Inter Regular · 18 / 1.65
BodyCommercial finance, structured.Inter Regular · 16 / 1.65
SmallCommercial finance, structured.Inter Regular · 14 / 1.55
EyebrowCommercial finance, structured.Inter Medium · 11 / +18% caps
NavigationCommercial finance, structured.Inter Medium · 15
ButtonCommercial finance, structured.Inter Medium · 15
CaptionCommercial finance, structured.Inter Regular · 12 / 1.5

Spacing — 8px system

8
16
24
32
40
48
56
64
80
96
128

Grid

Desktop — 1440 / 12 col / 80 margin / 24 gutter

Mobile — 390 / 4 col / 16 margin / 16 gutter

Buttons & states

On light

View all solutions

On dark

View all insights

Eyebrows, tags & section headings

Market updateFinance guideClient story

Section eyebrow

A reusable section heading component.

Eyebrow, headline and supporting copy, available in light and dark tones.

Cards

Business Acquisition

Acquiring an established professional practice

Challenge
Goodwill-heavy purchase with limited tangible security.
Approach
Blended cash flow facility with a staged vendor component.
Outcome
Settled on time with working capital retained.

Feature row

Aligned

We listen first and align with your objectives.

Independent

Unbiased advice across a wide panel of lenders.

Outcome focused

Structures that deliver measurable results.

Form fields

Icons — 1.25px line, 24px

Grow
Acquire
Invest
Develop
Restructure
Complex
Business
Asset
Specialist
Guidance

Borders, radius & elevation

Rules

1px hairlines only. No heavy strokes.

Radius

0px
2px
4px

Shadows

Sm
Md
Lg

Responsive examples

Beacon
FinanceWhyScenariosInsightsTalk to Beacon
Desktop 1440Commercial Finance.
Beacon
Mobile 390Commercial Finance.