ZEN DESIGN KIT · v3 — open FROM the project folder so the real logo, symbol & “/” assets load · fully responsive (resize me)
The design kit · v3

The skin every Zen page is built from.

A defined header with the logo at full size, a locked type system, the brand tokens, and the real “/” motif used the way the mark intends. Responsive by default.

Primary actionSecondary
Brand · The mark

The symbol & the slash

The mark is a square frame holding three thick strokes — / (Z), — (e), \ (n) — crossing into an asterisk: telecoms, and the three brothers. The / is the pullable accent, always a true slash at its one fixed angle (~45°).

Zen symbol — the asterisk in a frame

Three strokes → one asterisk, inside the frame:

/ from Z — from e \ from n

Used as a list bullet (a real “/” glyph):

  • Provider intelligence
  • Cited evidence, dated
  • Your legal exit grounds
periwinkle slash
Asset still to add: a full-colour symbol/logo for light backgrounds (the mark is white-on-transparent, so it only shows on dark today), plus the standalone “—” and “\” strokes. Then the full motif kit is complete.
Locked · Typography

The type system

Seven named roles. Copy maps to a role, never an arbitrary size.

Display / H1Archivo Black · one per pagePhones that just work.
H2Archivo 700 · section headlinesTake back control
H3Archivo 700 · card / sub-headingsWhat’s in your pack
EyebrowArchivo 700 · the label above an H2For IT managers
Lead / subtitleMontserrat 500 · the intro lineThe evidence and the plain-English grounds to take back control.
BodyMontserrat 400 · running textReliable calls, happy customers, and a partner who actually picks up.
Small / captionMontserrat · legal · captionsEvidence of a pattern, not legal advice.
Tokens · Colour

Palette

Navy = structure & text · periwinkle = secondary + the slash · teal = positive accents · pink = the one call-to-action · grey = text & borders.

Navy

Navy 600--zen-navy-600 · #3041b0Links
Navy 700--zen-navy-700 · #2a3f8cMid-tone / depth
Navy 800 — primary--zen-navy-800 · #223982Strong text, headings
Navy 900--zen-navy-900 · #1c2645Deep backgrounds
Navy 950--zen-navy-950 · #12182eFooter / darkest

Periwinkle

Periwinkle 100--zen-periwinkle-100 · #eef2fcTinted surface
Periwinkle 200--zen-periwinkle-200 · #dfe7f7Light periwinkle
Periwinkle 300--zen-periwinkle-300 · #b9caefSoft accent
Periwinkle 400--zen-periwinkle-400 · #97a6e0Periwinkle mid
Periwinkle 500 — secondary--zen-periwinkle-500 · #7d8ed1Secondary · the slash

Teal

Teal 100--zen-teal-100 · #e3f6f3Lightest tint
NEW
Teal 200--zen-teal-200 · #ceeae5Soft success surface
NEW
Teal 300--zen-teal-300 · #a6e1daEyebrows (all sections)
NEW
Teal 400--zen-teal-400 · #7fd3c9Mid teal
Teal 500--zen-teal-500 · #339e96Positive · ticks
Teal 600--zen-teal-600 · #2b857eDeep teal
Teal 700--zen-teal-700 · #025256Deepest · safety

Pink

Pink 100--zen-pink-100 · #fde6ecSoft accent bg
Pink 400--zen-pink-400 · #ee3a58CTA hover
Pink 500 — CTA--zen-pink-500 · #e02753Primary call-to-action
Pink 600--zen-pink-600 · #c41e47CTA pressed · Stakes red

Grey

Grey 100--zen-grey-100 · #dde4eeBorders
Grey 200--zen-grey-200 · #c3cddeDividers
Grey 400--zen-grey-400 · #6c7790Muted text
Grey 500--zen-grey-500 · #4c566eBody text

Surfaces & gradient

Page · #fff
Mist · #f4f7fc
Tint · periwinkle 100
Navy 900
Gradient 135°
Components

Buttons, cards & the guide block

The repeatable pieces that build the StoryBrand sections.

Request your Pack Secondary A text link →
01

Provider intelligence

The real contract, SLA and exit terms — in plain English.

02

Cited evidence

Dated, documented failures others reported — the pattern.

03

Legal exit grounds

The UK levers that may apply, explained simply.

“We understand how it feels to be let down by a phone system that doesn’t meet your needs.”
  • 3CX Titanium Partner
  • Since 2007
  • Private cloud · 99.99% SLA