EK Consulting
EK Consulting

Brand Style Guide

Single source of truth for colour, typography, components, and logo usage.

Colour palette

Ink#0B1220Primary text, dark surfaces
Indigo#4A43F0Primary brand, CTAs, links
Bright Indigo#6C63FFAccent highlights, emphasis
Signal Green#00C98DStatus, tags, final nodes
Slate#5B6478Body copy, secondary text
Line#E4E9F0Borders, dividers
Paper#FAFBFDPage background
White#FFFFFFCards, reversed text

Type scale — Inter

Display 1
clamp(48px, 6vw, 80px)900wt-0.04emHero headline
Display 2
clamp(36px, 4vw, 56px)900wt-0.03emSection headline
Heading 1
clamp(28px, 3vw, 40px)800wt-0.025emPage title
Heading 2
clamp(22px, 2.5vw, 32px)800wt-0.02emSub-section title
Heading 3
20px700wt-0.015emCard title, label
Body
16px400wtnormalParagraph copy
Small
14px400wtnormalCaptions, meta
Eyebrow
12px800wt0.18emSection kickers, labels

Button styles

On light surface
On dark surface (Ink)
Specifications
border-radius: 8pxfont-weight: 700padding: 10px 20pxfont-size: 14pxletter-spacing: -0.01em

Logo usage

Light surface — use /light variant
EK Consulting logo — light surface
Dark surface — use /dark variant
EK Consulting logo — dark surface
Monogram — when wordmark appears nearby
EK Consulting monogram
Minimum size — 24px tall
24px — minimum
36px
48px
✓ Do
  • →Use the light-surface variant on Paper (#FAFBFD) and White backgrounds
  • →Use the dark-surface variant on Ink (#0B1220) backgrounds
  • →Maintain clear space equal to the cap-height of the E on all sides
  • →Use the monogram alone when the wordmark appears nearby in the same layout
✗ Don't
  • ×Do not place the logo on a mid-tone or coloured background without a variant
  • ×Do not stretch, skew, or rotate the logo
  • ×Do not recolour the logo outside the approved variants
  • ×Do not use the logo at sizes below 24px tall

CSS variable tokens

hsl(var(--ink))Dark surface background
hsl(var(--primary))Indigo (primary brand)
hsl(var(--bright-indigo))Bright Indigo (accent)
hsl(var(--signal-green))Signal Green (status, tags)
hsl(var(--slate))Body copy
hsl(var(--border))Borders and dividers
hsl(var(--background))Page background (Paper)
hsl(var(--card))Card surface