Sign in Join free

Styles

ReferenceNot for readers

The pieces the site is built from, drawn live from its own stylesheet. Switch below to see the other palette.

Calm, editorial, monochrome. Hairline rules and a newspaper grotesk do the work; one yellow accent marks what matters. Nothing decorative.

Colour

Tokens live at the top of screen.css, once for light and once for dark. Change both. Yellow is a fill or a bold mark, never text on white; type on yellow uses --on-yellow. Red is for errors only. Ratios are against the page background (yellow: type on yellow); 4.5 is the minimum for text.

Background

--bg
Light #ffffff · Dark #121212

Panel

--bg-2 image placeholders, code
Light #f4f4f4 · Dark #1c1c1c

Ink

--ink headlines, labels, buttons
Light #111111 (18.9) · Dark #ececea (15.8)

Ink 2

--ink-2 body text, standfirsts
Light #2b2b2b (14.2) · Dark #c8c8c4 (11.2)

Muted

--muted dates, counts, captions
Light #6f6f6f (5.0) · Dark #92928d (6.0)

Rule

--rule hairlines; --rule-strong = ink
Light #e3e3e3 · Dark #2c2c2a

Yellow

--yellow the one accent
#f6ce53 in both · --on-yellow #32290f (9.5)

Error

--error form errors only
Light #c62a1e (5.6) · Dark #ec6457 (5.8)

Footer

--footer-bg / --footer-muted
#111111 (dark #000000) · #a3a3a3 (7.5)

Type

Schibsted Grotesk (--sans) for headlines, labels and the interface, weights 400 to 900. Newsreader (--serif) for reading: story text, quotes, the manifesto. Both are self-hosted. Big headlines are tight (negative letter-spacing); small capitals are open (+.1 to .12em).

Lagos

Page title · .archive-head__title · sans 800, 64–168px, line-height .82, −.065em

The sound of a city learning to listen

Story headline · .article__title · sans 800, 36–72px, −.04em

Inside the studio where Amapiano grew up

Lead card headline · .card--lead .card__title · sans 800, 32–54px

Latest

Section title · .section__title · sans 800, 24–32px, under a 2px ink rule

Twelve albums that changed Afrobeats

A painter’s return to Kinshasa

List and card headlines · .ranked__title 21px, .card__title 20px (17–18px in grids and on phones) · sans 700

How a generation of producers turned bedroom laptops into the continent’s loudest export, and what it cost them.

Standfirst · .article__dek · 16px, ink 2. Cards use .card__excerpt, 15px

The sound, the vision and the people shaping what comes next.

Statement · .statement__text · serif italic, 28–46px

Story text is set in Newsreader at 20px with generous leading, kept to a comfortable 680px line so long reads stay easy.

Story text · .gh-content · serif 20px, line-height 1.6, measure 680px

MusicEditor’s Pick

By Amara Okafor

Text link

Caption: the photographer and where it was taken. Photo: Jane Doe

Small type · .label 11px 700 caps (ink) · .byline 11px caps (muted, name in ink) · .text-link 12px caps · figcaption 12px muted

Buttons and controls

Square corners everywhere. Hover fills with yellow; a chosen state is shown with ink or a yellow chip, never colour alone. Every control is at least 32px tall.

Primary button · .btn, .btn--sm · ink fill, yellow on hover

Respond3

Story actions · .action · off and on (aria-pressed). The like count is everyone’s total; Save has no count

Follow · .follow-btn, .follow-btn--sm in lists

Toggles and tabs · .sortbar, .tabs__tab · muted caps; the chosen one sits on a yellow chip

See all
MusicLagos

More link · .more-link · Tags · .article__tags a

Please enter a valid email address.

Field · .field · a single underline that thickens on focus · .form-error

Avatars · .avatar 40px, .avatar--md 56px · .avatar--blank shows an initial when there’s no photo

Icons

One sprite in partials/icons.hbs, drawn in the current text colour. Use {{> "icon" name="heart" size="18"}}. Icons sit beside a word; an icon on its own needs hidden text for screen readers.

  • search
  • close
  • plus
  • check
  • arrow-right
  • arrow-left
  • arrow-down
  • arrow-up
  • arrow-up-right
  • expand
  • zoom
  • heart
  • bookmark
  • respond
  • reply
  • edit
  • trash
  • flag
  • link
  • mail
  • play
  • x
  • facebook
  • whatsapp

Cards and lists

Homepage

Real stories, drawn with partials/post-card.hbs. Pictures are square in grids and 3:2 for the lead. The label shows the section; Editor’s Pick marks featured stories.

Lead card · size="lead"

Grid card · .grid--4 (3 columns under 1000px, 2 under 800px; excerpts hide on phones)

Mini card · size="mini" · 96px picture beside the headline

  1. 1 Lifestyle In Cape Town, a concrete house that lets the mountain do the talking By Aubrey Patsika
  2. 2 Lifestyle At home with Ngozi Eze, who dyed her way to the house she wanted By Folake Adeyemi
  3. 3 Lifestyle At home with Alicia Keys and Swizz Beatz, above the Pacific By Aubrey Patsika

Ranked list · .ranked (Popular, More stories); .ranked--row lays it out in five columns on the homepage

Story text

What Ghost’s editor produces, as readers see it. Text stays in the reading column; wide and full-width images break out of it.

The first paragraph is set a little larger to open the story. After it, story paragraphs are set in Newsreader. A link inside the text is underlined in ink, and bold darkens to ink. Short paragraphs read best on a phone.

A heading inside a story

Use headings to break a long read into movements. Heading 2 is the main break, with an ink rule above it.

A smaller heading

Heading 3 for a step down, inside a movement.

A kicker heading

Heading 4 is set in small capitals, for lists of credits or a dateline.

The big quote: bold, wide, with a yellow mark.

That is Ghost’s first quote style. Press the quote button again for the second one, the pull quote, below.

  • A list item
  • Another, kept short
  1. A numbered step
  2. The next step
The pull quote: serif italic, centred between rules.

A divider marks a change of scene:

Inline code is rare, but supported.

Story formats

A story’s layout comes from one internal tag in its settings (internal tags start with # and readers never see them). Each example below opens the newest story in that format.

Standard

No tag. Headline, standfirst and the feature image.

Cinematic · #cinematic

Standard layout; first choice for the homepage’s Long read.

Photo essay · #photo-essay

Built around pictures: every photo and gallery at the page’s full width. Fills the In Pictures reel.

No story in this format yet.

Video · #video

The first video moves into a dark theatre at the top. Shown in Watch.

Listen · #listen

The first audio card or music embed sits beside the cover. Shown in Listen.

No story in this format yet.

Track of the Day · #track-of-the-day

Listen layout, kept at /tracks/. The newest heads the homepage player.