Design Systems

DIAL

Design system for consumer electronics and music hardware catalogues: hairline type, square 0px cuts, and studio product photography.

HorizonX

Subscribe to download

Instant access Included with every membership
Tokens & components HTML, CSS & design tokens
Commercial license With a membership, for client work

Overview

DIAL is an industry design system for consumer electronics and music hardware catalogues: lineup pages, product cells, spec sheets, compare tables, pre-order and cart flows, and catalogue decks for synths, speakers and radios. It pairs IBM Plex Sans in Thin and Light weights with IBM Plex Mono for prices and spec values, a quiet Bench White / Steel / Ink / Slate token set, one near-black Vitrine band for the product, a single Pilot Amber signal for stock and pre-order, Patch Blue links, square 0px controls with no shadows, status LEDs, and a studio imagery language with Hero, Material and Detail photo roles built around a fictional hardware lineup with placeholder names, prices and specifications. Included: foundations (color, type, spacing, imagery, patterns), components (buttons & tags, cards, dialog, forms, navigation, feedback, table), theme sheet, Catalogue 06 store landing starter, 16:9 lineup deck, and sample web photography in assets/imagery/.

Highlights

Consumer electronics and music hardware catalogue system
Bench White / Steel / Ink / Slate + Vitrine band + Pilot Amber signal + IBM Plex Sans and Mono
Square 0px controls and surfaces, flat with 1px Steel hairlines instead of shadows
Web imagery roles: Hero · Material · Detail (fictional synth, speaker and radio lineup)
Catalogue grid with status LEDs, mono spec sheets, compare table, square transport keys
Catalogue 06 store landing + 16:9 lineup deck

What's included

theme.json + styles.css tokens
Foundations docs (color, type, spacing, imagery, patterns)
Component specimens with states (HTML)
Catalogue 06 store landing + lineup deck
Sample web photography in assets/imagery/
Commercial license with a membership

Frequently asked questions

A complete design system kit: foundations, tokens, HTML/CSS components and written guidelines, ready to adopt in your product.
It's included with a HorizonX membership. Download the kit and drop the tokens and components into your project.
Yes, with a HorizonX membership. Members get a commercial license: use and adapt these files in personal, client and commercial projects. If your plan ends, projects you already built keep their license, but the files can't be used to start new ones.