KLH Audio
A digital brand foundation and flagship product page for an American hi-fi icon.
KLH has been building speakers since 1957, and its Model series carries that heritage into today’s homes. Working alongside Bighorn Web Solutions, our team at Techni-color Grayscale was brought in to define KLH’s digital presence: a brand guide built as a living Figma system, plus a flagship product page that grew into a new home page. The budget didn’t allow a full rebuild, so we designed for iteration: a system strong enough to launch with a few key pages and expand from there.
Client
KLH Audio
Agency
TechGrayscale
Partner
Bighorn Web Solutions
Role
Creative Lead
Scope
Brand guide, product page, home page
01 — The Idea
A product page you read like a story.
A $5,000 pair of speakers shouldn’t be sold like a commodity. We structured the product page as six short chapters, from the flagship introduction through real rooms, craftsmanship, performance, comparison and reviews. A quiet numbered guide tracks your place, while the price and Add to cart stay within reach all the way down.
03 — Color
A color for every model.
Each model owns a color in two steps, a softer 400 and a brighter 500, that themes its whole product page, down to the Add to cart button.
Model colors 400 / 500
- Seven#C97F5D / #EA733DRGB 201 127 93 / 234 115 61
- Five#8D9167 / #8F993ERGB 141 145 103 / 143 153 62
- Four#3A79AB / #236192RGB 58 121 171 / 35 97 146
- Three#5EB7BD / #00A3ADRGB 94 183 189 / 0 163 173
Neutrals
- Dark Gray#292827RGB 41 40 39
- Medium Gray#75736FRGB 117 115 111
- Light Gray#D9D5CERGB 217 213 206
- Ground#FFFEFARGB 255 254 250
One color per model
Model Seven400 #C97F5D · 500 #EA733D
Model Five400 #8D9167 · 500 #8F993E
Model Four400 #3A79AB · 500 #236192
Model Three400 #5EB7BD · 500 #00A3AD
04 — Performance
Engineering, made tactile.
KLH’s story is acoustic engineering, but spec sheets rarely feel premium. The Performance chapter pairs an exploded view of the 13-inch woofer with plain-language specs, like “effortless low end with depth, speed, and control.” The numbers support the feeling instead of replacing it.
Chapter 04, Performance: the drivers taken apart, beside the specs that matter.
05 — Typography
One typeface. Two sizes. Three weights
Quiet by design.
KLH speakers are built on honest principles: acoustic suspension, real wood, nothing extra. The typography follows the same rule. The site runs on a single typeface, Inter, at just two sizes. Hierarchy comes from color, case, tracking and space instead of scale, so the product and the photography do the talking.
Display
Seven
Inter Light · 300
56 / 56 · +20% · Caps
Lead
Designed to be seen. Built to be heard.
Inter Bold · 700
14 / 25 · 0%
Body
Built around a 13-inch high-displacement woofer and acoustic suspension design, Model Seven delivers deep, accurate bass with exceptional clarity across every frequency.
Inter Light · 300
14 / 19.6 · 0%
Label
Model
Inter Light · 300
14 / 19.6 · Caps · Med Gray
Navigation
Inter Light · 300
14 / 19.6 · Title Case
Action
Inter Medium · 500
14 / 19.6 · White on accent
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & $ / | % —
Color
Selected, content, supporting, inactive. Four tones carry most of the hierarchy.
Case
Title case guides. Uppercase labels and names.
Tracking
+20% tracking turns a product name into a display moment.
Weight
Bold is used once per section, for the line that matters.
Navigation · Light 14
Model selector · Light 56, tracked
Buy as: Pair | Individually
Purchase · Light, Bold & Medium 14