Skip to main content
Wander.africa
Subscribe

Internal

Design system

Every primitive this theme ships. Tailwind CSS v4 generates all of it from the tokens in assets/css/wander.css. Structure and measurements follow docs/design-reference.md.

Typography

Four roles. Bodoni Moda for the masthead and section titles, EB Garamond for every headline and the article body, IBM Plex Mono for bylines and credits, and Inter for navigation only. Sizes are the ones measured on the reference.

Section title · Bodoni Moda · 32px, tracked

WHERE TO STAY

Lead headline · EB Garamond · 38px

Where the migration actually is in August

Card headline · EB Garamond · 24px

Best time to visit Zanzibar

List headline · EB Garamond · 18px

Gorilla permits, and how to book one

Standfirst · EB Garamond italic

The dry window is not one window. Zanzibar has two, and the one everybody quotes collides with mainland lodge pricing.

Body · EB Garamond · 19px/1.62

Park fees, permit tiers and entry rules change without notice, so every figure we publish carries a currency, a date and a source. Where a number is an estimate we say so, and where a cheaper option pays us nothing we still recommend it.

Byline and dateline · IBM Plex Mono

WANDER DESK

AUGUST 11, 2026

Photo credit · IBM Plex Mono · 11px

Charles J. Sharp · CC BY-SA 4.0

Kicker · IBM Plex Mono · carmine

COVER STORY

Tabular figures, so cost columns align

$1,500 · $800 · $110 · 1,510 km²

Colour

A white page and black text do the work. Carmine marks action and the mark; ultramarine marks verified information. The grid is drawn with hairlines, never with cards or shadows.

Ink

#000000

Paper

#FFFFFF

Warm band

#F8F7F4

Carmine

#9F2942

Ultramarine

#24427E

Rule

#DCDCDC

Ink on paper · 21:1, AAA

Paper on carmine · 7.1:1, AAA

Paper on ultramarine · 9.4:1, AAA

Light is always the first-visit theme. Readers can switch to dark from the masthead and the choice persists locally. Ratios are asserted in QA, not trusted from this note.

Actions

Minimum target 44 px in both axes on every control, including on desktop. Focus is a 2 px ultramarine ring and is never suppressed.

Subscribe Sign up Compare destinations See all

Provenance

These carry the publication's credibility. Verified appears only when an editor re-checked the figures, and prints the page's real updated date. Accommodation entries must carry one of the four provenance labels: we never imply a stay we have not had.

Verified Aug 2026 Estimate Sponsored
Editorial research First-hand Reader reports Platform data

The hairline grid

Columns are divided by 1 px rules and rows are closed by them. There are no cards, no shadows and no rounded corners anywhere in the grid.

Data table

The base primitive for cost tables and trip briefs. Every figure it carries must state a currency, a date and a source.

Illustrative structure only. Not published figures.
ItemLocalUSDSource
Park entry, per adult per dayNot setNot setOfficial fee schedule
Mid-range lodge, per nightNot setNot setPublished rates
Airport transferNot setNot setOperator quote

Accessibility

  • One <main> landmark and exactly one h1 per page, asserted for every route in qa/audit-pages.mjs.
  • The skip link is the first focusable element. Press Tab from the top of any page.
  • The sections menu is full-screen on mobile and a left-side drawer on desktop. Both trap focus, lock page scroll, close on Esc and return focus to the button.
  • Document order matches visual importance. The cover story is first in the markup and repositioned with CSS, never the reverse.
  • All motion is transform and opacity only, and is disabled under prefers-reduced-motion.
  • Images never carry information alone. Data lives in real tables.