Aljazeera DESIGN.md

Overview

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

Colors

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.

Typography

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

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.

Layout

Spacing System

• Base unit: 8px with tight 2/4px steps for chrome and metadata.
• Tokens (front matter): {spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 20px · {spacing.xxl} 24px · {spacing.huge} 30px
• News density keeps gaps small — {spacing.sm}-{spacing.lg} between cards; the newsletter card pads at {spacing.xl}; network sections breathe at {spacing.xxl}+.

Grid & Container

• The front page runs a packed 1100px multi-column news grid: lead story + secondary column + rail, then full-width bands (video carousel, features, galleries).
• Live blogs run a single reading column with a right rail; updates stack as timestamped blocks.
• Network pages run full-bleed bands: hero panels, then 4-up portrait grids with the vertical rail occupying the left margin.

Whitespace Philosophy

Whitespace is rationed like column inches. The design deliberately runs dense — separation comes from hairline rules, timestamps, and weight contrast rather than air. Only the network pages allow generous dark voids around portraiture.

Responsive Strategy

Breakpoints

Touch Targets

The black pills pad 6px 17px around 16px labels — keep their surrounding row spacing so targets clear 44×44. Timeline items and Most Popular rows are full-width tap zones.

Collapsing Strategy

The nav collapses into a hamburger while the LIVE pill and logo block persist. News grids collapse column-by-column toward the single-column mobile feed; the live timeline keeps its dot rail at every width; network portrait grids step 4 → 2 → 1 with the section rails moving above the grid.

Image Behavior

News photography is aggressively cropped 16:9 and 4:3, square-cornered in article grids, {rounded.md} in video carousels and thumb rows. Network leadership portraits are consistent studio gray, displayed in tall cards with name overlays.

Elevation & Depth

Shadow philosophy: news reads flat. Photography supplies all depth on the editorial side; the network's dark canvas supplies it on the corporate side. The single dropdown shadow exists for usability, not style.

Decorative Depth

• Photo scrims: leadership portrait cards fade to dark at the base so white names hold contrast.
• Section rails: the teal and crimson vertical bars read like broadcast side-straps, giving flat pages a stage-set depth.
• Polarity shift: the jump from white news paper to {colors.network-canvas} corporate darkness is itself the system's depth move.

Shapes

Border Radius Scale

The scale is bimodal: editorial imagery and badges stay near-square (2-10px) while every control is a capsule (18-22px, full circles for icons) — buttons announce themselves by shape alone on a flat page.

Photography Geometry

• Article grids: square-cornered 16:9 and 4:3 crops, packed edge to edge.
• Video carousel: portrait cards at {rounded.md}.
• Thumb rows: small 130×87 stills at {rounded.md} beside {typography.headline-sm} links.
• Opinion: circular {rounded.full} author avatars.
• Network: tall portrait cards with base scrims, square-cornered.

Components

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).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

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.