Insight
A considered card title
Borderless image, serif title, tracked uppercase meta.
Design Standards
MRC Standards
The building blocks behind the McCulloch Regulatory Compliance (MRC) brand: the typefaces, colour palette, spacing and components that keep every page measured, legible, and unmistakably ours.
Logo
The mark and wordmark
A navy tile carrying a Kepler “M”, paired with the McCulloch wordmark and a tracked “Regulatory Compliance” descriptor. The mark ties straight back to the display serif used across the site.
McCullochRegulatory Compliance
MRC
monogram
McCullochRegulatory Compliance
Reversed on navy. Keep clear space around the lockup at least equal to the height of the “M”, and never recolour the mark.
Typography
A serif for authority, a sans for clarity
Display and headings are set in Kepler, a refined transitional serif, with Source Serif as the fallback. Body text is Inter / system sans for effortless reading on screen.
Aa
Kepler · display serif
Independent. Considered. Exact.
The quick brown fox jumps over the lazy dog. 1234567890. Measured typography that reads as calmly in a footnote as in a headline.
- DisplayKepler · 700 · clamp to 6xl on hero
- Heading 1Source Serif / Kepler · sections
- Heading 2subsection titles
- Heading 3card titles
- BodyInter / system sans · 1.6 leading
- Smallcaptions, meta
- Eyebrow labeluppercase · tracked · accent
Colour
A monochrome navy core, two quiet accents
Deep navy and cool slate on a light silver-grey ground, with a single desaturated mid-blue accent and a restrained teal for the client portal. No warm or gold tones; the palette stays disciplined.
Navy · primary
Navy
#0F2A4A
navy
Navy 800
#142F52
navy-800
Navy 700
#1C3C63
navy-700
Navy 600
#284E79
navy-600
Navy 100
#D7E0EA
navy-100
Navy 50
#EEF2F7
navy-50
Accent · mid-blue
Accent
#3A6489
accent
Accent 600
#2D4F6B
accent-600
Accent 100
#B9CBDD
accent-100
Teal · portal
Teal
#2F7D72
teal
Teal 600
#245F57
teal-600
Teal 100
#DCEBE7
teal-100
Slate · secondary text
Slate
#5B6B7E
slate
Slate 600
#4D5C6E
slate-600
Slate 400
#8493A3
slate-400
Slate 200
#C7CFD8
slate-200
Neutrals & ground
Ink
#16202E
ink
Mist
#F2F4F6
mist
Mist dark
#E8EBEE
mist-dark
Paper
#FFFFFF
paper
Border
#DDE1E6
border
On dark
The same system, reversed
On navy bands the accent lightens to accent-100 and text drops to slate-200, keeping contrast comfortable without shouting.
#0F2A4A#1C3C63#3A6489#B9CBDD#2F7D72#F2F4F6
Components
Consistent, reusable elements
Shape & spacing
radius 4px
lg 8px
2xl 16px
Content sits in a centred container (max-width 72rem), with generous vertical rhythm; section padding 4 to 6rem.
Card
Pills & badges
Practice areaSectorActiveTag
Principles
Restraint, hierarchy, and consistency
Every screen draws from these same tokens, which is why the marketing site, the client portal, and the documents we produce all feel like one firm.