UI Components — Breen Consulting Brand Guide

Navigation

Fixed position navigation bar with logo, horizontal link layout, and glass-morphism effect. The nav is always at the top of every page, providing consistent access to all major sections.

Nav Container Spec

Property	Value	Notes
Position	fixed	Always visible at top
Z-Index	100	Above content
Background	rgba(11, 29, 50, 0.97)	Navy with slight transparency
Backdrop Filter	blur(12px)	Glass effect
Border Bottom	1px solid rgba(255,255,255,0.06)	Subtle divider
Height	72px	Vertical center alignment

Nav Link Style

Property	Value	Notes
Font Size	0.8125rem / 13px	Small, condensed
Font Weight	500	Medium emphasis
Color (default)	var(--bc-gray-300) / #CBD5E1	Light gray
Color (hover)	var(--bc-white)	Full white
Letter Spacing	0.02em	Slight tracking
Gap Between Links	var(--space-xl) / 32px	Breathing room
Transition	color 0.2s	Smooth color change

Live Example — Navigation Bar

Hero Section

Full-viewport hero with gradient background, radial glow, and bottom accent line. The Hero H1 is the only web element that uses Mercury Display Bold — all other headings use Roman.

Hero Container

Property	Value	Notes
Background	linear-gradient(165deg, #0B1D32 0%, #0F2847 50%, #1E3A5F 100%)	Deep navy to light
Padding	160px 0 var(--space-4xl)	Top-heavy spacing
Min Height	85vh	Nearly full viewport
Display	flex align-items center	Vertical centering

Hero H1 Typography

Property	Value	Notes
Font Family	'Mercury Display Bold'	Use as named family
Font Weight	700	Bold
Font Size	4rem / 64px	Desktop size
Responsive	2.5rem @ 768px	Mobile scaling
-webkit-text-stroke	0.4px	Outline effect for rendering
Line Height	1.15	Tight leading
Letter Spacing	-0.02em	Negative tracking
Max Width	700px	Line length constraint
Color	var(--bc-white)	Full white

Hero Subtitle & Accents

Property	Value	Notes
Subtitle Color	rgba(255,255,255,0.6)	Muted white
Subtitle Font Size	1.1rem	Large supporting text
Subtitle Max Width	520px	Content column width
Overline Color	var(--bc-blue-light) / #60A5FA	Accent label
Overline Margin	var(--space-lg) / 24px	Below overline
Glow (::before)	radial-gradient rgba(37,99,235,0.08) 800px	Background accent
Bottom Line (::after)	linear-gradient rgba(37,99,235,0.3) 1px	Subtle divider

Live Example — Hero Section

Breen Consulting

Strategy that drives measurable outcomes

We partner with forward-thinking organisations to solve their most complex challenges through technology and innovation.

Start a conversation Our approach

Buttons

Two button variants: primary (filled blue) and outline (ghost). Both use Gotham HTF at weight 600 with a subtle arrow suffix that animates on hover.

Base Button

Property	Value	Notes
Font Family	var(--font-sans)	Gotham HTF
Font Size	0.8125rem / 13px	Condensed
Font Weight	600	Semi-bold
Letter Spacing	0.03em	Tracking
Padding	14px 32px	Generous hit area
Border	none	No default border
Transition	all 0.25s ease	Smooth animation

Primary Button

Property	Value	Notes
Background	var(--bc-blue) / #2563EB	Full blue
Color	white	White text
Hover Background	#1D4ED8	Darker blue
Hover Transform	translateY(-1px)	Lift on hover
Hover Box Shadow	0 4px 16px rgba(37,99,235,0.3)	Glow effect

Outline Button

Property	Value	Notes
Background	transparent	See-through
Color	white / navy (context dependent)	Inherit text color
Border	1px solid rgba(255,255,255,0.25)	Subtle outline
Hover Border	rgba(255,255,255,0.5)	Brighter outline
Hover Background	rgba(255,255,255,0.05)	Slight wash

Arrow Suffix

Property	Value	Notes
Content	'→'	Right arrow (U+2192)
Hover Transform	translateX(3px)	Slide right on hover
Transition	transform 0.2s	Smooth movement

Live Example — Button Variants (Dark Background)

Primary Button Outline Button

Live Example — Buttons on Light Background

Get Started Learn More

Cards & Sections

Card patterns for both light and dark contexts, with subtle hover interactions. Cards are used for capabilities, testimonials, and feature highlights throughout the site.

Section Variants

Property	Value	Notes
.section-dark	background var(--bc-navy)	Navy background
.section-light	background var(--bc-offwhite)	Off-white background
Padding	var(--space-4xl) 0 / 96px 0	Generous vertical spacing

Light Card Style

Property	Value	Notes
Background	white	Pure white
Padding	var(--space-2xl) / 48px	Generous internal spacing
Border	1px solid var(--bc-gray-200)	Subtle outline
Hover Border	var(--bc-gray-300)	Brightens on hover
Hover Shadow	0 8px 30px rgba(0,0,0,0.06)	Subtle lift
Hover Transform	translateY(-2px)	Slight upward movement
Transition	all 0.3s ease	Smooth animation

Dark Card Style

Property	Value	Notes
Background	var(--bc-navy-mid) / #152A45	Medium navy
Padding	var(--space-2xl) / 48px	Consistent spacing
Border	1px solid rgba(255,255,255,0.06)	Subtle white outline
Hover Border	rgba(255,255,255,0.12)	Brighter on hover
Hover Shadow	0 8px 30px rgba(0,0,0,0.2)	Deep lift effect
Transition	all 0.3s ease	Smooth animation

Card Icon (for Capability Cards)

Property	Value	Notes
Dimensions	48×48px	Square icon area
Background	rgba(37,99,235,0.1)	Pale blue tint
Border Radius	6px	Subtle rounding
Icon Color	var(--bc-blue-light)	Light blue icon
Hover Border	rgba(37,99,235,0.3)	Brighter border on hover

Live Example — Light Card Pair

⚙

Strategy

Deep analysis of your business challenges, market position, and growth opportunities.

🔧

Technology

Custom solutions built on modern platforms and proven frameworks for measurable impact.

Live Example — Dark Card Pair

✓

Delivered

200+ client engagements completed successfully across nine countries.

→

Growth

Average 35% increase in operational efficiency for our partner organisations.

Grid & Layout

Standard grid patterns and layout utilities used across the site. All grids use consistent gaps aligned to the spacing scale.

Grid Variants

Class	Spec	Usage
.grid-2	grid 1fr 1fr, gap var(--space-2xl)	Two-column layout
.grid-3	grid repeat(3,1fr), gap var(--space-xl)	Three-column layout
.capabilities-grid	grid repeat(3,1fr), gap var(--space-lg)	Three columns, tight spacing
.approach-grid	grid repeat(4,1fr), gap var(--space-lg)	Four columns (Discover/Design/Deliver/Evolve)
.cta-buttons	flex, gap var(--space-md), center	Button groups

Live Example — Three-Column Grid Layout

Column 1

Column 2

Column 3

Live Example — Four-Column Grid (Approach)

Step 1

Step 2

Step 3

Step 4

Testimonial / Blockquote

Serif blockquotes centered on the page. Used for client testimonials, case study highlights, and powerful quotes that deserve emphasis.

Blockquote Typography

Property	Value	Notes
Font Family	var(--font-serif) / Mercury Display	Serif emphasis
Font Size	1.625rem / 26px	Large and impactful
Font Style	italic	Quoted tone
Line Height	1.5	Spacious reading
Color	var(--bc-navy)	Dark navy
Max Width	800px	Reading column
Text Align	center	Centered layout

Citation

Property	Value	Notes
Font Family	var(--font-sans) / Gotham HTF	Sans serif for attribution
Font Size	0.875rem	Smaller than quote
Font Weight	500	Medium emphasis

Live Example — Testimonial / Blockquote

"Breen Consulting transformed our approach to digital strategy. Within six months, we saw measurable improvements across all key metrics."

Sarah Mitchell Chief Strategy Officer, Acme Inc.

Approach Steps

Four-column layout showcasing the methodology: Discover, Design, Deliver, Evolve. Each step has a large semi-transparent number, a heading, and supporting description.

Step Grid & Styling

Property	Value	Notes
Grid Layout	grid repeat(4, 1fr), gap var(--space-lg)	Four equal columns
Step Number	font-family var(--font-serif), font-size 3rem, opacity 0.3	Large light number
Step Number Color	var(--bc-blue)	Blue accent
Step Heading	font var(--font-sans) 600 0.9375rem, color white	White text on dark
Step Description	font-size 0.8125rem, color var(--bc-gray-400)	Muted gray

Live Example — Approach Steps Grid

01

Discover

Deep analysis of your current state, challenges, and opportunities.

02

Design

Strategic roadmap and solution architecture tailored to your needs.

03

Deliver

Expert execution with continuous communication and milestone tracking.

04

Evolve

Ongoing optimization and knowledge transfer for lasting impact.

CTA Section

Centered call-to-action block with heading, supporting text, and button group. Used at the end of sections to drive engagement.

CTA Container

Property	Value	Notes
Background	linear-gradient(165deg, #0B1D32, #0F2847)	Subtle navy gradient
Text Align	center	Centered layout
Padding	48px 40px	Generous spacing
Border Radius	4px	Subtle corner rounding

CTA Heading & Text

Property	Value	Notes
Heading Font	var(--font-serif), 2rem, 400	Large serif heading
Heading Color	var(--bc-white)	White text
Subtitle Color	rgba(255,255,255,0.6)	Muted white
Subtitle Max Width	500px, auto margins	Centered column

Live Example — CTA Section

Ready to transform your strategy?

Let's explore how Breen Consulting can help you achieve your most ambitious goals.

Start a conversation View case studies

Footer

Site footer with logo, copyright text, and links. Positioned at the bottom of every page with navy background and subtle top border.

Footer Container

Property	Value	Notes
Background	var(--bc-navy)	Navy background
Border Top	1px solid rgba(255,255,255,0.06)	Subtle divider
Padding	var(--space-2xl) / 48px 0	Vertical spacing
Text Align	center	Centered layout

Footer Typography

Property	Value	Notes
Text Color	var(--bc-gray-400)	Muted gray
Link Color	var(--bc-gray-300)	Light gray
Link Hover	var(--bc-white)	White on hover
Font Size	0.8125rem	Small and condensed

Live Example — Footer

Accent Line

Simple horizontal rule element used as a visual separator and brand accent throughout the design system.

Accent Line Spec

Property	Value	Notes
Width	48px	Proportional to heading
Height	2px	Thin line
Background	var(--bc-blue)	Blue accent

Live Example — Accent Line

Brand Note / Callout Box

Highlighted callout box with blue left border used for brand notes, important guidelines, and contextual information throughout the guide.

Brand Note Spec

Property	Value	Notes
Background	var(--bc-gray-100)	Light gray background
Border Left	3px solid var(--bc-blue)	Bold blue accent
Padding	var(--space-lg) / 24px	Comfortable spacing
Font Size	0.8125rem	Slightly smaller
Color	var(--bc-gray-600)	Dark gray text

Live Example — Brand Note

Pro Tip: The vertical rule motif is the most distinctive element of the Breen brand. Use it consistently across all touchpoints — from navigation and buttons to pull quotes and status indicators — to reinforce brand recognition and visual cohesion.

VR Accent Motif System

The vertical rule (VR) is the core brand motif — a 3px left-edge accent in blue (or sub-brand colour) that appears consistently across all contexts. The VR creates visual continuity and guides the eye through content hierarchies.

VR Motif Variants

Variant	Width	Colour	Usage
Pull Quote	3px (4px prominent)	--bc-blue-light / #60A5FA	Blockquotes with serif text
Section Divider	3px	--bc-blue-light	Section separators with label
Heading Accent	3px	--bc-blue-light	Left accent on h3 / h4
KPI Card	3px	--bc-blue-light	Metric displays
Content Card	4px	--bc-blue-light	Card left border
Nav Active	3px	--bc-blue-light	Active nav indicator
Table Highlight	3px	--bc-blue-light	Highlighted row
Timeline	3px	--bc-blue-light (gradient)	Vertical timeline
RAG Status	3px	green / amber / red	Status indicators
Form Focus	3px	--bc-blue-light	Input focus state
Comparison	3px	--bc-blue-light	Center divider
Sub-Brand Chip	3px	sub-brand colour	Branded chips

Standard Pull Quote with VR

Live Example — Pull Quote (Standard VR)

"The strategic partnership with Breen Consulting fundamentally changed how we approach digital transformation. Their deep expertise and collaborative approach delivered results that exceeded our expectations."

James Chen, CTO at Forward Industries

Prominent Pull Quote with VR

Live Example — Pull Quote (Prominent VR)

"Transformative results. Breen Consulting is the partner you want on your most important initiatives."

Michael Rodriguez, CEO at Catalyst Group

Section Divider with Label

Live Example — Section Divider with VR

New Topic Section

KPI Cards with VR

Live Example — KPI Cards with VR Accent

200+

Client Engagements

9

Countries Served

35%

Avg Efficiency Gain

Heading with VR Accent

Live Example — Heading with VR Left Accent

Our Strategic Capabilities

RAG Status Indicators with VR

Live Example — RAG Status Indicators with VR

On Track

Q1 delivery milestones are progressing according to plan with no blockers.

At Risk

Resource constraints require immediate attention to prevent timeline impact.

Off Track

Critical issues must be escalated and resolved within 48 hours.

Design Principle: The VR motif creates visual rhythm and guides the eye through content. Every VR use should reinforce hierarchy and meaning — never use it as decoration. Sub-brand accents replace the blue in practice areas (Digital, AI, Strategy, etc.).