Design Foundations — Breen Consulting Brand Guide

Font Declarations

Web browsers cannot resolve Hoefler & Co. fonts by family name alone on macOS. Each weight requires an explicit @font-face declaration with local() PostScript name references. No Google Fonts or web font CDN dependencies — all fonts must be installed locally.

@font-face Declarations

These declarations must appear at the top of any Breen Consulting web page stylesheet. They map CSS font-family + font-weight combinations to locally installed font files via their PostScript names.

Font Family	Declaration	Notes
Mercury Display 400	local('Mercury-DisplayRoman')	Document headings, general serif
Mercury Display 700	local('Mercury-DisplayBold')	Hero headlines, emphasis
Mercury Display Bold*	'Mercury Display Bold' as family	Hero H1 — use as named family at weight 700
Gotham HTF 200	local('GothamHTF-XLight')	Logo subtitle, accents
Gotham HTF 300	local('GothamHTF-Light')	Light body text
Gotham HTF 400	local('GothamHTF-Book')	Default body text
Gotham HTF 500	local('GothamHTF-Medium')	Navigation, overlines
Gotham HTF 700	local('GothamHTF-Bold')	Strong emphasis

* The Hero H1 uses font-family: 'Mercury Display Bold' directly (as a named family) with font-weight: 700 and -webkit-text-stroke: 0.4px. This is a workaround for macOS font resolution — see Hero Section.

Fallback Stacks

CSS Variable	Value	Purpose
--font-serif	'Mercury Display', Georgia, serif	Headings, display type
--font-sans	'Gotham HTF', 'Helvetica Neue', sans-serif	Body text, UI elements

Colour Tokens

All colours are defined as CSS custom properties on :root. Token names use the --bc- prefix (Breen Consulting). The web palette extends the print guide's 5 core colours with additional extended neutrals and semantic colours.

Visual Palette

Core Brand Colours

Navy Primary

#0B1D32

--bc-navy

Navy Mid

#152A45

--bc-navy-mid

Navy Light

#1E3A5F

--bc-navy-light

Blue Accent

#2563EB

--bc-blue

Blue Light

#60A5FA

--bc-blue-light

Neutrals

White

#FFFFFF

--bc-white

Off-White

#F8FAFC

--bc-offwhite

Gray 200

#E2E8F0

--bc-gray-200

Gray 500

#64748B

--bc-gray-500

Gray 700

#334155

--bc-gray-700

Sub-Brand Accents

Consulting

#60A5FA

--sb-consulting

Digital

#34D399

--sb-digital

AI

#A78BFA

--sb-ai

Strategy

#FBBF24

--sb-strategy

Marketing

#FB923C

--sb-marketing

Creative

#F472B6

--sb-creative

Engineering

#38BDF8

--sb-engineering

Token Reference

Primary Palette

--bc-navy#0B1D32

--bc-navy-mid#152A45

--bc-navy-light#1E3A5F

Token	Hex	Usage
--bc-navy	#0B1D32	Primary dark — backgrounds, wordmark
--bc-navy-mid	#152A45	Secondary dark — cards, depth layers
--bc-navy-light	#1E3A5F	Tertiary — hover states, borders

Accent Blues

--bc-blue#2563EB

--bc-blue-light#60A5FA

--bc-blue-pale#DBEAFE

Token	Hex	Usage
--bc-blue	#2563EB	Primary accent — CTAs, links
--bc-blue-light	#60A5FA	Light accent — hovers, highlights
--bc-blue-pale	#DBEAFE	Very light — tag backgrounds

Neutrals

--bc-white#FFFFFF

--bc-offwhite#F8FAFC

--bc-gray-100#F1F5F9

--bc-gray-200#E2E8F0

--bc-gray-300#CBD5E1

--bc-gray-400#94A3B8

--bc-gray-500#64748B

--bc-gray-600#475569

--bc-gray-700#334155

--bc-gray-800#1E293B

Token	Hex	Usage
--bc-white	#FFFFFF	Primary background
--bc-offwhite	#F8FAFC	Section backgrounds
--bc-gray-100	#F1F5F9	Light fills, cards
--bc-gray-200	#E2E8F0	Borders, dividers
--bc-gray-300	#CBD5E1	Inactive borders
--bc-gray-400	#94A3B8	Placeholder text, footer links
--bc-gray-500	#64748B	Secondary body text, captions
--bc-gray-600	#475569	Metadata, labels
--bc-gray-700	#334155	Primary body text
--bc-gray-800	#1E293B	Near-black text

Semantic

--bc-success#059669

--bc-warning#D97706

--bc-error#DC2626

Sub-Brand Accents

--sb-consulting#60A5FA

--sb-digital#34D399

--sb-ai#A78BFA

--sb-strategy#FBBF24

--sb-marketing#FB923C

--sb-creative#F472B6

--sb-engineering#38BDF8

Token	Hex	Usage
--sb-consulting	#60A5FA	Consulting sub-brand
--sb-digital	#34D399	Digital sub-brand
--sb-ai	#A78BFA	AI sub-brand
--sb-strategy	#FBBF24	Strategy sub-brand
--sb-marketing	#FB923C	Marketing sub-brand
--sb-creative	#F472B6	Creative sub-brand
--sb-engineering	#38BDF8	Engineering sub-brand

Typography System

The web typography system defines a complete scale from Display/H1 down to small captions and overlines. All sizes are set in rem units (base: 16px). Font weights reference specific @font-face declarations.

Live specimens below — these are rendering in the actual brand fonts installed on this machine. If Mercury Display or Gotham HTF are not installed, system fallbacks (Georgia, Helvetica Neue) will be used instead.

Type Scale — Live Specimens

Complex problems,
clear solutions.

Display / H1 Mercury Display Roman · 3.5rem (56px) · weight 400 · -0.02em tracking

Transform your business
with technology.

Hero H1 (Bold) Mercury Display Bold (named family) · 4rem (64px) · weight 700 · stroke 0.4px

Technical expertise.
Business acumen.

Heading / H2 Mercury Display Roman · 2.5rem (40px) · weight 400 · -0.01em tracking

Delivering what matters, on time.

Heading / H3 Mercury Display Roman · 1.75rem (28px) · weight 400

When strategy meets execution

Heading / H4 Mercury Display Roman · 1.25rem (20px) · weight 400

Strategy · Technology · Delivery

Overline Gotham HTF · 0.75rem (12px) · weight 600 · 0.15em tracking · uppercase

Where deep technical skill meets practical business understanding — delivering solutions that actually work.

Subtitle Gotham HTF Light · 1.125rem (18px) · weight 300 · line-height 1.8

Breen Consulting partners with small and medium businesses to solve their hardest technical challenges. We combine deep technical expertise with practical business understanding to deliver solutions that actually work — on time, every time.

Body Gotham HTF Book · 1rem (16px) · weight 400 · line-height 1.7

Capabilities Approach About Contact

Start a conversation →

Nav + Button Nav: Gotham HTF Medium 13px · Button: Gotham HTF 600wt 13px

The Hero H1 is the only web element that uses Mercury Display Bold. All other headings use Mercury Display Roman (weight 400). The -webkit-text-stroke: 0.4px adds subtle optical weight on Retina displays.

Base Styles

Property	Value	Notes
html font-size	16px	Root for rem calculation
body font-family	var(--font-sans)	Gotham HTF Book
body font-weight	400	Book weight
body line-height	1.7	Generous for readability
body color	var(--bc-gray-700) #334155	Primary text colour
body background	var(--bc-white) #FFFFFF
-webkit-font-smoothing	antialiased	On html element
-moz-osx-font-smoothing	grayscale	On html element
scroll-behavior	smooth	On html element

Heading Defaults

Property	Value	Notes
font-family	var(--font-serif)	Mercury Display
font-weight	400	Roman — not bold
color	var(--bc-navy) #0B1D32
line-height	1.2	Tight for display type

Spacing System

A rem-based spacing scale provides consistent rhythm. All spacing tokens are defined as CSS custom properties.

Spacing Scale

Token	Value	Pixels (at 16px base)
--space-xs	0.25rem	4px
--space-sm	0.5rem	8px
--space-md	1rem	16px
--space-lg	1.5rem	24px
--space-xl	2rem	32px
--space-2xl	3rem	48px
--space-3xl	4rem	64px
--space-4xl	6rem	96px

Section Padding

Element	Value	Notes
section	var(--space-4xl) 0	96px vertical padding
.container max-width	1200px	Content constraint
.container padding	0 var(--space-xl)	32px horizontal gutters