Reference

Design system

Red, ink and paper. Fraunces for headlines, Inter for text. Every token lives in src/styles/tokens.css; components in components.css. Pages add markup only.

v3.0Light and darkNo framework

Principles

01Editorial firstThe typography carries the design. Fraunces headlines at generous sizes, Inter for everything that must be read quickly.

02Three coloursRed is for action and emphasis only. Ink and paper do the rest. Rules, not boxes, separate content.

03Honest statesEmpty states say what will be there and when. Nothing is faked with placeholders.

Colour

Light values shown. Dark scheme swaps paper and ink and keeps red; see tokens.css.

--red#C8102E
Red. Actions, emphasis, the dot in the masthead.

--red-deep#9E0B24
Red, pressed state.

--red-tint#FBE9EC
Red tint. Chips and selection.

--ink#161616
Ink. Text, rules, primary buttons.

--ink-2#3D3D3D
Ink 2. Body copy in cards and deks.

--grey#6B6B6B
Grey. Meta text and captions.

--grey-2#9A9A9A
Grey 2. Placeholders.

--rule#E4E1DC
Rule. Hairlines and dividers.

--paper-2#F6F4F0
Stone. Panels and quiet sections.

--paper#FFFFFF
Paper. The page.

Band

Inverted section. Ink becomes paper.

Band red

For rare, loud moments only.

Typography

Fraunces (optical size 144, soft 30) for display and headings; italics for the emphasised half of a statement. Inter for text, UI and eyebrows.

.display-xl
Fraunces 500 · clamp(3rem, 8vw, 7.5rem) · 0.98

Recognised by a jury.

.display
Fraunces 500 · clamp(2.6rem, 6vw, 5.5rem) · 1.02

Power Brands and Leaders

.h1
Fraunces 500 · clamp(2.2rem, 4.5vw, 4rem) · 1.02

How the awards are decided

.h2
Fraunces 500 · clamp(1.7rem, 3vw, 2.6rem) · 1.02

Criteria and weights

.h3
Fraunces 500 · clamp(1.25rem, 1.8vw, 1.6rem) · 1.15

Independent jury scoring

.lead
Inter 400 · clamp(1.15rem, 1.6vw, 1.45rem) · 1.4

A named jury decides. The editorial team researches and shortlists; it does not vote.

.body
Inter 400 · 17px · 1.55

Every shortlisted entry is assessed on a research dossier, not on the entry form alone.

.small
Inter 400 · 14px

Photographs and the ceremony film are added within two weeks.

.eyebrow
Inter 600 · 11.5px · uppercase · 0.1em

CoverStory Awards

statement
Fraunces 400 · em in red

A named jury decides against published criteria.

Spacing and layout

4px base. Sections use --section (3rem to 5.5rem, fluid). Container .wrap is 1360px with a fluid gutter.

--s-1 · 4

--s-2 · 8

--s-3 · 12

--s-4 · 16

--s-5 · 24

--s-6 · 32

--s-7 · 48

--s-8 · 64

--s-9 · 96

cols-4 · 1

cols-4 · 2

cols-4 · 3

cols-4 · 4

cols-3 · 1

cols-3 · 2

cols-3 · 3

.article main (minmax(0,1fr))

aside 320px

Buttons and links

Primary Red Ghost Small Large Disabled

Link rule With arrow Inline link

On band Ghost on band Red on band Link on band

Status

Nominations openAnnouncedComingJudgingShortlistPublished

PillSolidRedSoftTag · Metanewshortlistedwinner

Neutral alert. Something to know.

Success. Draft saved.

Warning. Entries close in three days.

Problem. That did not go through.

Cards

News

Card with eyebrow

8 September 2026 · Editorial team

Rule on top, title, meta, summary. The whole card is clickable.

Red-rule card

Leader · Singapore

For people. The red rule marks the Asia’s Most Promising Leaders series.

03NoteA numbered explanatory block. Used for processes and what-you-get lists.

Winner

Honoree card

Category · Organisation · Country

“The jury citation sits here, in Fraunces italic.”

Panel

Stone background for quiet, secondary content.

Editions

Nominations open

Asian Power Brands and Leaders 2026

Dubai · 19 November 2026

Announced

India Power Brands and Leaders 2027

Mumbai · February 2027 (to be confirmed)

Coming

Global Power Brands and Leaders 2027

London · April 2027 (to be confirmed)

Stats

3Editions

26Categories

300Profiles

1Cover per edition

Tables

Criterion	Weight	What the jury looks for
Market leadership and growth	25%	Position in its market, sustained growth over three years.
Brand strength and trust	25%	Clarity of brand promise, customer loyalty and reputation.