Overview
The MediaOne Design Language
An editorial system in the Wired tradition — a strict black-on-white magazine, rendered for a Malayalam newsroom. Cool navy neutrals sampled from the live site, Anek type, and the MediaOne blue as the only accent.
The system
Foundations
→What are the raw values?
Type scales, color tokens, spacing and geometry — every value that lives in the @theme block, shown at its real size.
Gallery
→What can I compose with?
Atoms, blocks and bands rendered live, with a filter and status chips. The band set is what the homepage is built from.
Catalogue
→What props does it take?
The composition components and their public API — the reference to check before wiring one into a page.
Archive
→What did this replace?
Superseded lockups, still rendering because the older homepage variants ship them. Not for new work.
Principles
- 01
Editorial restraint
The interface serves the story, never the other way around. Almost everything lives flat on the canvas. Chrome earns its place or it is removed.
- 02
Type carries the identity
Anek Latin and Anek Malayalam, a single metrically matched superfamily on fixed scales. Hierarchy comes from size and weight, not decoration.
- 03
Blue, spent once
One reserved accent, the MediaOne blue, for eyebrows, links, hover, and the masthead rule. Navy ink on a cool white canvas does the rest. No second voice, and no red.
- 04
Square and hairline
Zero-radius geometry, 1px rules, and no drop-shadows. Elevation is a single line; surfaces meet with rules, not glow.
- 05
No gradients, no glass
Honest flat surfaces. Photography brings the color; placeholders are tinted blocks, never rainbow fills or blurred panes.
- 06
One identity
MediaOne only. The legacy multi-brand switcher is archived, not wired. A single voice reads as confidence.