Internal Reference

Apex Executive
Brand Guidelines

This document defines how Apex Executive presents itself across all touchpoints — digital, print, and verbal. These are not suggestions. They are the standard.

Every element here exists because it earns its place. Nothing is decorative without purpose. Restraint is the design language. Consistency is the brand expression.

01

The Logo

Apex Executive
Primary — Light backgrounds
Apex Executive
Dark / Obsidian backgrounds
Apex Executive
Pine / dark green backgrounds
02

The Compass Mark

Standard
Extended (with rings)
On pine
Watermark / large-scale
03

Colour Palette

Obsidian
#141618
Primary text, dark sections, hero backgrounds
Pine
#1E3528
Featured cards, philosophy section, CTA buttons
Pine Light
#3D6B50
Eyebrows, links, compass mark, accent elements
Pine Pale
#6FA882
Dark-background accents, footer mark, AI badge
Pine Mist
#A8C9B4
Dark-section text, compass rings, illustrations
Stone
#E6E2DA
Light text on dark, button text, warm neutral
Stone Light
#F2F0EB
Page background, card hover states
Slate
#7A8088
Muted text, nav links, secondary copy
04

Typography

Display Headline
Cormorant Garamond
Weight: 300
Size: 52–88px
Leading: 1.05
Your schedule.
Reclaimed.
Section Headline
Cormorant Garamond
Weight: 300
Size: 36–58px
Leading: 1.12
Support that thinks ahead
Section Eyebrow
DM Sans
Weight: 300
Size: 11px
Tracking: 0.26em
All caps
What We Do
Body Copy
DM Sans
Weight: 300
Size: 16–17px
Leading: 1.85–1.9
Every hour your attention is pulled from what only you can do costs you in ways that don't appear on any balance sheet. We handle the rest — with precision and discretion.
Navigation / Labels
DM Sans
Weight: 300–400
Size: 11–12px
Tracking: 0.14em
All caps
ServicesTeamProcessEnquire
05

Voice & Tone

Write this
"We handle the rest — with precision and discretion."
Direct. Confident. No padding. The word "discretion" carries weight and is never diluted by adjacent superlatives.
Not this
"Our amazing team is here to help you achieve success!"
No exclamation marks. No "amazing." No "success" without a specific definition. Enthusiasm is expressed through competence, not punctuation.
Write this
"One person who knows your world deeply — and whose value grows the longer they're in it."
Specific. Implies depth of relationship. The em-dash creates a deliberate pause that signals care.
Not this
"Our dedicated professionals provide customised support solutions for busy executives."
Never "solutions." Never "busy." Never "customised" as a standalone claim. Every adjective must earn its place or be cut.
Write this
"No obligation. No pitch. An honest conversation."
Short sentences signal confidence. We do not need to fill space. The reader's time is respected by our economy of words.
Not this
"We'd love to connect and explore synergies in supporting your executive journey!"
No "journey." No "synergies." No "we'd love to." Conditional language implies uncertainty. We are certain of what we offer.
06

Motion & Interaction

Compass Rotation
On hover, the compass mark rotates 45°. This is the signature interaction — deliberate, orientational. Used on the nav logo and footer logo only.
transform: rotate(45deg) · 0.7s · cubic-bezier(0.34, 1.56, 0.64, 1)
Button Wipe
Buttons use a left-to-right colour wipe (translateX overlay) on hover. The text stays in place while the background transitions beneath it. Never use opacity fade on buttons.
transform: translateX(-101% → 0) · 0.4s · cubic-bezier(0.4, 0, 0.2, 1)
Scroll Reveal
Elements enter from 20px below, fading to full opacity. Staggered by 65ms per element group. Never animate elements that were already in the viewport on load.
opacity: 0→1, translateY: 20px→0 · 0.7s · ease · threshold: 7%
Service Expand
Service card descriptions expand on hover using max-height animation. The reveal is deliberate, not instant — it respects the user's attention rather than demanding it.
max-height: 0→180px · 0.45s · cubic-bezier(0.4, 0, 0.2, 1)
FAQ Accordion
FAQ items expand via max-height to their scroll height. Only one item open at a time. The icon transitions from + to a horizontal line — never an X, which implies dismissal, not closure.
max-height: 0→scrollHeight · 0.45s · cubic-bezier(0.4, 0, 0.2, 1)
Scroll Parallax
Forest divider sections move at 0.08× scroll speed. This is subtle — barely perceptible on first pass. It should never distract, only create a sense of depth when noticed.
translateY: offset × 0.08 · passive scroll · no easing (raw)