Amplifi Brand

Design tokens, assets, and usage reference. Not for public distribution.

Colour Palette

Spark Orange
#ff463a
--amplifi-spark
Boardroom Grey
#2e3138
--amplifi-boardroom
Canvas Grey
#f3f3ea
--amplifi-canvas
Signal Grey
#d6dae1
--amplifi-signal
Edge Grey
#cfd8d6
--amplifi-edge
Cream
#f0ede6
--amplifi-cream
Off White
#f6f7f5
--amplifi-off-white
Light Grey
#e8ebef
--amplifi-light-grey
Blue Grey
#c8cdd4
--amplifi-blue-grey

Typography

Space Grotesk Light (300) — var(--amplifi-font-sans)
Default body copy — paragraphs, nav, card text, descriptions
Space Grotesk Regular (400) — 500/600/700 also available
Buttons, form labels, UI chrome, and uppercase metadata labels
Playfair Display Regular (400) — var(--amplifi-font-serif)
Display headings — h1–h6, hero titles, section headers
Playfair Display Italic (400) — emphasis in Spark Orange
Emphasis phrases inside headings — wrap in <em>

Logo Variants

Logo light on dark
Logo dark on light
Logo light on spark
Strapline light on dark
Strapline dark on light

Spacing Scale

--amplifi-sp-1: 4px
--amplifi-sp-2: 8px
--amplifi-sp-3: 12px
--amplifi-sp-4: 16px
--amplifi-sp-5: 24px
--amplifi-sp-6: 32px
--amplifi-sp-7: 48px
--amplifi-sp-8: 64px
--amplifi-sp-9: 96px
--amplifi-sp-10: 128px

Quick Start

HTML projects (deck, website): add <link rel="stylesheet" href="https://brand.amplifi-impact.com/css/amplifi-brand.css"> then use var(--amplifi-spark) etc.

Tailwind projects (portal): add the preset to your config — presets: [require('./amplifi-preset.js')] then use bg-amplifi-spark, text-amplifi-boardroom, font-sans etc.

Logo assets: https://brand.amplifi-impact.com/assets/logos/amplifi-logo-dark.svg