icOn · Life-Changer Audio UK

Gets out of the way of the music.

This is your icOn design system. Every colour, heading, button, and card on this page is wired to your global tokens — change a value in Site Settings and the whole site responds.

View components
Browse products →

01 — Colour

A palette tuned for precision and warmth.

Four brand colours do all the work. Swap Accent, Accent Soft, Ink in Site Settings → Global Colors and every button, heading, and section transforms with them.

Accent — Deep Saffron #f59023

Accent Soft — Honeydew #cce2d1

Ink — Carbon Black #191c1a

Ink Soft #3a4040

Ink Muted #6b7575

BG Page — Linen #f4ebe1

BG Surface — White Smoke #f5f5f5

Border #dde8e0

02 — Typography

When less is truly more.

Smart passive AVC preamplifier.

Built in Manchester, UK.

Life-Changer Audio features.

Autoformer volume control.
FET switch architecture.

Lead paragraph. Many music lovers today use just one or two source components: a DAC for streaming or CDs, and perhaps a phono stage for vinyl. What they really need is a pure, transparent control unit.

Body paragraph text. The icOn 5 features a new autoformer with lower inductance, larger air gap, and improved linearity — contributing to a livelier and more natural sound profile.

Small / caption text. Used for notes, metadata, and secondary information. 0.875rem with relaxed line-height.

Eyebrow / Label · Uppercase · 0.75rem · tracking 0.18em

03 — Buttons · Light background

Three button styles on page background.

Learn More
View Specs
Read the review →

03 — Buttons · Dark background

Three button styles on dark background.

Shop Now
View Specs
Read the review →

04 — Components

The building blocks, ready to place.

Cards built on presets, not one-off styles. Edit the blurb preset once and every card on every page responds.

No additions or subtractions from the sound. Pure signal attenuation — no coloration, no noise, no distortion.

Full control from your listening position with a large display. Volume, balance, mute, AV bypass and tilt — from your armchair.

Precise volume in 0.5 dB increments from +3 dB down to −80 dB. The finest control available in a passive preamplifier.

05 — Token Reference

All design tokens at a glance.

Colour tokens (gcid-icon-*)

  • gcid-icon-accent — Accent — Deep Saffron · #f59023
  • gcid-icon-accent-soft — Accent Soft — Honeydew · #cce2d1
  • gcid-icon-ink — Ink — Carbon Black · #191c1a
  • gcid-icon-ink-soft — Ink Soft · #3a4040
  • gcid-icon-ink-muted — Ink Muted · #6b7575
  • gcid-icon-bg-page — BG — Page (Linen) · #f4ebe1
  • gcid-icon-bg-surface — BG — Surface (White Smoke) · #f5f5f5
  • gcid-icon-bg-alt — BG — Alt (Honeydew) · #cce2d1
  • gcid-icon-bg-dark — BG — Dark (Carbon Black) · #191c1a
  • gcid-icon-border — Border · #dde8e0
  • gcid-icon-white — White · #ffffff
  • gcid-icon-success — Success · #4a7c59
  • gcid-icon-warning — Warning · #c68b3e
  • gcid-icon-error — Error · #9c3e3e

Size / type tokens (gvid-*)

  • gvid-1mufnvc30f — Type — Body · clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)
  • gvid-jievn2utwh — Button Padding V · 0.95rem
  • gvid-j82aljblpk — Button Padding H · 2.25rem
  • gvid-6ayma986av — Type — H1 · clamp(2.8125rem, 1.96rem + 4.25vw, 5.0625rem)
  • gvid-phd1d2ci1s — Type — H2 · clamp(2.3125rem, 1.8rem + 2.55vw, 3.5625rem)
  • gvid-fo5gu3vj8q — Type — H3 · clamp(1.8125rem, 1.5rem + 1.55vw, 2.5625rem)
  • gvid-r0j5bczvce — Type — H4 · clamp(1.5625rem, 1.35rem + 1.05vw, 2.0625rem)
  • gvid-7lvzt9drsr — Type — H5 · clamp(1.3125rem, 1.2rem + 0.55vw, 1.5625rem)
  • gvid-al7l2l01kp — Type — H6 · clamp(1.1875rem, 1.125rem + 0.4vw, 1.4375rem)

06 — Setup

Two minutes to a live site.

  1. Import this file via Divi Library → Import & Export — tick Import Presets
  2. Go to Visual Builder → Variable Manager → Fonts — set Heading Font to Raleway, Body Font to Open Sans
  3. Save Variables
  4. Export from Preset Manager → save as icon-presets.json
  5. Start building pages — every module picks up the brand automatically
Start building