Aljazeera Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

20tokens

8type steps

5radius steps

1pxspacing base

Aljazeera, in one page

Al Jazeera's news surface is a printing press, not a product. The page is flat {colors.canvas} paper packed edge-to-edge with photography and dense Roboto headline stacks; there are no shadows, no tonal card fills, no decorative gradients — hierarchy is carried entirely by type weight, rules, and the discipline of the grid. Against that severity the brand signs itself with a single saturated orange: the {colors.primary} logo block in the masthead and the short orange bar that fronts every section eyebrow ("MUST READ", "OPINION", "FEATURED"). Orange never fills a button and never colors a link — it is a marker pen, not a control.

Urgency has its own color. {colors.live-red} belongs exclusively to the live apparatus: the LIVE badge beside the masthead, the breaking-coverage band, the pulsing dots of the minute-by-minute timeline, and the LIVE UPDATES labels on running stories. Actions, by contrast, are quiet black objects — compact {colors.ink} pills at {rounded.lg} for Sign up and Subscribe, a rounded {rounded.xl} email capsule for the newsletter — so that nothing competes with the news imagery for attention.

The corporate network pages flip the polarity while keeping the family jewelry. On a near-black {colors.network-canvas} canvas, a {colors.night-navy} utility strip and royal {colors.indigo} hero panels frame monochrome leadership portraiture; {colors.gold} rules and {colors.amber} active links carry the network's gilded eagle identity; and vivid vertical rails in {colors.rail-teal} and {colors.rail-red} label whole sections from the margin. It reads as the broadcast brand's title-card language applied to the web.

Key Characteristics:

Flat white paper with zero elevation — {colors.hairline} rules and whitespace do all the separating on news surfaces
One-color signature: {colors.primary} appears only as the logo block and the 8px eyebrow bar before {typography.section-eyebrow} labels
A dedicated live-news color system — {colors.live-red} badges, bands, and timeline dots connected by a {colors.silver} rail
Compact black pill controls ({rounded.lg}) and a {rounded.xl} capsule input; media thumbnails round at {rounded.md} while article imagery stays square
Roboto-only hierarchy spanning 300-weight uppercase eyebrows to 900-weight LIVE and Trending labels
The network sub-surface: {colors.network-canvas} dark canvas, {colors.indigo} hero panels, {colors.gold}/{colors.amber} gilding, and teal/crimson section rails
Page rhythm runs white masthead → live strip → photo-dense grids → {colors.soft} newsletter card → white footer; network pages run navy strip → white nav → dark portrait canvas → black footer

Do's and don'ts

Do

Keep {colors.primary} to identity duty — the logo block and the eyebrow bar — and let black pills carry every action.
Reserve {colors.live-red} strictly for live/breaking state: badges, bands, timeline dots.
Open every editorial section with the section-eyebrow-lockup (orange bar + 300-weight uppercase label).
Keep the news surface flat: hairline rules and weight contrast, never shadows or tonal cards.
Run photography dense and square in article grids; save {rounded.md} for carousels and thumbs.
On network pages, keep the gilded family — {colors.gold} rules, {colors.amber} active links — over the dark {colors.network-canvas}.
Use the wide Roboto weight spread deliberately: 300 eyebrows, 700 headlines, 900 urgent labels.

Don't

Don't fill buttons or links with {colors.primary} — orange interaction chrome breaks the marker-pen rule.
Don't use {colors.live-red} decoratively; if it isn't live coverage, it isn't red.
Don't add shadows, gradients, or card fills to news grids — density and rules are the aesthetic.
Don't round article photography; square crops are part of the wire-service voice.
Don't mix the network's gold/amber/indigo family into the news surface, or the orange eyebrow system into corporate pages.
Don't soften the eyebrows — they stay uppercase, light-weight, and barred.
Don't introduce new accent hues; the palette's color budget is spent on orange, live-red, and the network's gold and rails.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Aljazeera design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #fa9000
- on-primary: #ffffff
- live-red: #c31833
- ink: #000000
- charcoal: #333333
- slate: #595959
- canvas: #ffffff
- soft: #f0f0f0
- hairline: #d8d8d8
- silver: #bebebe

Type:
- families: Roboto
- scale: 12, 14, 16, 18, 24, 32, 36, 40
- weights: 300, 400, 700, 900

Shape:
- radius: 2, 4, 10, 18, 22
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 1, 2, 4, 6, 8, 12, 16, 20, 24, 30

Rules:
- Keep `{colors.primary}` to identity duty — the logo block and the eyebrow bar — and let black pills carry every action.
- Reserve `{colors.live-red}` strictly for live/breaking state: badges, bands, timeline dots.
- Open every editorial section with the `section-eyebrow-lockup` (orange bar + 300-weight uppercase label).
- Keep the news surface flat: hairline rules and weight contrast, never shadows or tonal cards.
- Run photography dense and square in article grids; save `{rounded.md}` for carousels and thumbs.
- On network pages, keep the gilded family — `{colors.gold}` rules, `{colors.amber}` active links — over the dark `{colors.network-canvas}`.

Avoid:
- Don't fill buttons or links with `{colors.primary}` — orange interaction chrome breaks the marker-pen rule.
- Don't use `{colors.live-red}` decoratively; if it isn't live coverage, it isn't red.
- Don't add shadows, gradients, or card fills to news grids — density and rules are the aesthetic.
- Don't round article photography; square crops are part of the wire-service voice.
- Don't mix the network's gold/amber/indigo family into the news surface, or the orange eyebrow system into corporate pages.
- Don't soften the eyebrows — they stay uppercase, light-weight, and barred.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Source pages — the news front page, a live blog, and the network's leadership and awards pages — share one identity across two polarities.

Brand & Accent

Jazeera Orange ({colors.primary} — #fa9000): the masthead logo block and the section-eyebrow bar. Identity, never interaction.
Live Red ({colors.live-red} — #c31833): breaking bands, LIVE badges, timeline dots, live labels. The color of "happening now" and nothing else.
Gold ({colors.gold} — #dba200): the network's rule and control-border gilding.
Amber ({colors.amber} — #ffa000): active nav links on network pages.
Select Gold ({colors.select-gold} — #ffc500): the network's heavy 3px control border on filters.
Rail Teal ({colors.rail-teal}) and Rail Crimson ({colors.rail-red}): the vertical section-label rails beside leadership grids — broadcast lower-third colors standing on the page margin.

Surface

Paper ({colors.canvas} — #ffffff): the news canvas, the nav, the footer.
Soft ({colors.soft} — #f0f0f0): the newsletter card fill and the faintest divider tone.
Night Canvas ({colors.network-canvas} — #181818): the network pages' dark ground for portrait cards.
Royal Indigo ({colors.indigo} — #272967): the network hero panel behind page titles.
Night Navy ({colors.night-navy} — #100e2f): the network's slim utility strip.
Hairline ({colors.hairline} — #d8d8d8) and Silver ({colors.silver} — #bebebe): rule tones — list dividers, card edges, and the live-timeline rail.

Text

Ink ({colors.ink}): headlines, standing labels, and the black pill fills.
Charcoal ({colors.charcoal} — #333333): article body text.
Slate ({colors.slate} — #595959): secondary text, eyebrow labels, the oversized Most Popular numerals, input borders, and the monochrome logo rendering.
Mist ({colors.mist} — #dddddd): light text on the network's dark surfaces.
Graphite ({colors.graphite} — #323232): network body text and rules on light bands.

Semantic

The only semantic signal is {colors.live-red} for live/breaking state. There are no success or warning colors — news chrome stays neutral.

Brand Gradient

None. Every brand surface is a flat fill; even the network's indigo panels and gold rules are solid.

Type scaleRead the full spec

Font Family

Roboto carries the entire system — news and corporate alike — from 300-weight uppercase eyebrows to 900-weight status labels. The only other face is the network's custom Al-Jazeera wordmark lettering, used solely as logo art. Body text on article pages sits on Roboto's neutral 400.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.headline-xl}`	40px	700	1.2	Live-blog and article lead headlines
`{typography.headline-lg}`	32px	700	1.25	Front-page top stories
`{typography.headline-md}`	24px	700	1.3	Card headlines, newsletter title
`{typography.headline-sm}`	18px	700	1.35	List headlines, Most Popular rows
`{typography.network-display}`	36px	700	1.2	Network page titles and leader names
`{typography.section-eyebrow}`	24px	300	1.2	Uppercase section labels behind the orange bar
`{typography.label-black}`	14px	900	1	Trending, LIVE, and status labels
`{typography.body}`	16px	400	1.5	Article and interface body
`{typography.body-sm}`	14px	400	1.45	Metadata, nav links, footer columns
`{typography.caption}`	12px	400	1.4	Timestamps, credits, fine print
`{typography.button}`	16px	400	1	Pill labels

Principles

Weight is the hierarchy: 700 for every headline tier, 300 for the airy uppercase eyebrows, 900 reserved for tiny urgent labels — a deliberately wide 300↔900 spread inside one family.
Headlines are set tight and dense; the system tolerates — and embraces — crowded news grids.
Timestamps and wire-style metadata sit in {typography.caption} {colors.slate}, always subordinate to the headline block.

Note on Font Substitutes

Roboto is open source — use it directly. The Al-Jazeera wordmark lettering is proprietary logo art; do not approximate it with a text face.

Components and layoutRead the full spec

Buttons

button-pill-dark — Sign up, Subscribe, the LIVE masthead control

Fill {colors.ink}, label {colors.on-primary} at {typography.button}, rounded {rounded.lg}, padding 6px 17px. The standing action shape across the news surface.

button-pill-mini

The tiny {colors.ink} counter pill at {rounded.full}, padding 1px 6px — photo-count overlays and compact toggles.

Cards & Containers

news-card

Square photography above or beside an {typography.headline-md}/{typography.headline-sm} ink headline with {typography.caption} metadata; no fill, no border — position and weight define it.

media-thumb

The {rounded.md} still used in video carousels and thumb-link rows.

newsletter-card

{colors.soft} panel, {typography.headline-md} title, supporting {typography.body-sm}, containing text-input and a button-pill-dark, padded {spacing.xl}.

most-popular-row + popular-numeral

Ranked list rows divided by {colors.hairline} with an oversized {colors.slate} numeral at {typography.headline-lg} beside an {typography.headline-sm} headline.

award-card

Network awards grid cell: square news photo, {typography.headline-sm} title, {typography.caption} date, {colors.graphite} summary.

leader-card + leader-band

Portrait cards on {colors.network-canvas} with base scrims and {colors.on-primary} name/role text; senior leaders get full-width gray studio bands with {typography.network-display} names over a short white rule.

Inputs & Forms

text-input — the email capsule

{colors.canvas} fill, 1px {colors.slate} border, rounded {rounded.xl}, padding 0px 15px, {typography.body} text.

network-select

The network filter control: {colors.canvas} fill with a heavy 3px {colors.select-gold} border — the system's loudest control edge.

Navigation

nav-bar — Top Nav (Desktop, news)

White strip: logo-block left (the {colors.primary} square with the white eagle), black {typography.body} links with caret dropdowns, then the LIVE pill, search, and Sign up pill right. A Trending strip runs beneath with a {typography.label-black} label and topic links.

network-utility-strip + network-nav + network-nav-active

The corporate header stacks a {colors.night-navy} utility strip (language + social) over a white caps-link nav where the active item switches to {colors.amber}; the gold eagle mark sits left.

Top Nav (Mobile)

News nav collapses to hamburger + logo block + LIVE pill.

footer / network-footer

News footer: white, hairline-topped link columns with the eagle mark. Network footer: {colors.ink} black with {colors.mist} links and the gold network lockup.

Signature Components

section-eyebrow-lockup

The system's signature: an 8px-wide {colors.primary} bar flush against an uppercase {typography.section-eyebrow} label in {colors.slate}. Every editorial section opens with it.

live-badge + breaking-band + live-strip-item

The live apparatus: a {typography.label-black} LIVE UPDATES label in {colors.live-red} (badged at {rounded.xs}); a full-width {colors.live-red} breaking band with {colors.on-primary} headline text; and the minute-by-minute strip — {colors.live-red} dots on a {colors.silver} rail beside timestamped {typography.body-sm} items.

section-rail-teal / section-rail-red

Network section rails: full-height vertical bars in {colors.rail-teal} and {colors.rail-red} carrying rotated white uppercase labels beside portrait grids.

network-hero-panel

The {colors.indigo} title panel opening network pages: {typography.network-display} white heading over {typography.body-sm} copy, set beside full-bleed photography.

logo-block

The masthead identity: a solid {colors.primary} square carrying the white eagle calligraphy mark beside the wordmark. The single largest orange surface in the system.

avatar-circle

Circular {rounded.full} author portraits in Opinion lists.

Examples (illustrative)

Kit-mirror demonstration surfaces. Each ex-* entry references brand-native primitives via token syntax so downstream consumers re-skin the same 10 surfaces consistently — these are illustrative compositions stamped with this brand's tokens, not components extracted from the site.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-aljazeera {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #aa6000;
  --link-hover-color: #774300;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #af6300;
  --button-text-color: #ffffff;
  --button-hover-bg: #7c4600;
  --button-border: none;
  --button-border-radius: 10px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-roboto);
  --heading-font: var(--font-roboto);
  --card-border-radius: 10px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

1616arita 76.6%
claude 70.6%

Where this came from

Source document: volt/design-md/aljazeera/DESIGN.md · 27.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.