---
version: alpha
name: Late Edition
description: Newsprint with column rules and a condensed masthead. Every colour in the system is a red.
meta:
  id: "theme-late-edition"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T23:26:31+09:00"
  updatedAt: "2026-09-01T23:26:31+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: Set in columns, closed at midnight.
  bestFor: News and newsletters, opinion and analysis, sports coverage, live blogs, long-form journalism
  avoidFor: Product marketing, dashboards, anything with a soft brand voice
  defaultMode: light
  surfaceStyle: ruled
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 1px
  imageTreatment: grayscale
  motion:
    intensity: 1
    duration: 140ms
    ease: "cubic-bezier(0.4, 0, 1, 1)"
    signature: "Nothing animates except a live counter ticking. Print does not move."
  displayFont: Fjalla One
  displayKind: sans
  bodyFont: Zilla Slab
  monoFont: Anonymous Pro
colors:
  background: "#F9F1ED"
  foreground: "#312421"
  card: "#EDE7E5"
  card-foreground: "#312421"
  popover: "#EDE7E5"
  popover-foreground: "#312421"
  primary: "#A43543"
  primary-foreground: "#FEF9F6"
  secondary: "#E3DCD8"
  secondary-foreground: "#312421"
  muted: "#E3DCD8"
  muted-foreground: "#715B57"
  accent: "#912C63"
  accent-foreground: "#FEF9F6"
  destructive: "#AE2926"
  destructive-foreground: "#FEF9F6"
  border: "#D2CBC8"
  input: "#D2CBC8"
  ring: "#A43543"
  chart-1: "#B14C55"
  chart-2: "#C1686D"
  chart-3: "#894247"
  chart-4: "#CB8A8C"
  chart-5: "#65393B"
colorsDark:
  background: "#140D0A"
  foreground: "#E8D4D0"
  card: "#1C1816"
  card-foreground: "#E8D4D0"
  popover: "#1C1816"
  popover-foreground: "#E8D4D0"
  primary: "#DE6972"
  primary-foreground: "#120C09"
  secondary: "#28221F"
  secondary-foreground: "#E8D4D0"
  muted: "#28221F"
  muted-foreground: "#9D8681"
  accent: "#E276AA"
  accent-foreground: "#120C09"
  destructive: "#E96157"
  destructive-foreground: "#120C09"
  border: "#36302E"
  input: "#36302E"
  ring: "#DE6972"
  chart-1: "#EB8087"
  chart-2: "#C46B70"
  chart-3: "#F6A4A7"
  chart-4: "#9B5E61"
  chart-5: "#F8C1C2"
typography:
  display-lg:
    fontFamily: Fjalla One
    fontSize: 82px
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Fjalla One
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Fjalla One
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.18
  body-lg:
    fontFamily: Zilla Slab
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Zilla Slab
    fontSize: 15.5px
    fontWeight: 400
    lineHeight: 1.56
  body-sm:
    fontFamily: Zilla Slab
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.46
  label-caps:
    fontFamily: Zilla Slab
    fontSize: 10.5px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Anonymous Pro
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
  numeral-xl:
    fontFamily: Anonymous Pro
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  base: 16px
  xs: 3px
  sm: 7px
  md: 14px
  lg: 22px
  xl: 44px
  gutter: 18px
  margin: 26px
  measure: 38ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 11px
  card-story:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 0px
  rule-column:
    backgroundColor: "{colors.border}"
    textColor: "{colors.foreground}"
  badge-label:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Late Edition

## Overview

Late Edition is a newspaper, and it behaves like one. Text sets in narrow
columns separated by vertical rules; headlines span columns rather than sitting
inside them; the measure is 38 characters, which is short enough that the eye
never loses its place going down a column and far shorter than any other theme
in this library.

The palette is a single family. Every chromatic value in the system is a red —
the masthead red, the section red, the correction red. There is no blue link, no
green success, no amber warning. Status is carried by rule weight and by
position, the way it is on a printed page.

It is built for news, opinion, live coverage and long analysis. It is wrong for
product marketing: nothing here is designed to persuade you of anything, only to
be read quickly and in order.

## Colors

Newsprint and three reds.

- **Ground:** warm near-white. Slightly yellow, like cheap stock, so photography
  and rules sit down into it instead of on top.
- **Primary (masthead red):** the section, the kicker, the live badge. Fills
  small blocks; never a large area.
- **Accent (crimson):** the correction and the update. Appears as a 3px bar at
  the left of a story that has been amended.
- **Neutrals** are near-achromatic — the reds have to be the only colour, or the
  restriction stops meaning anything.
- Charts are monochrome red at five lightnesses. A chart in a newspaper is a
  figure, not a palette.

## Typography

Fjalla One for headlines, Zilla Slab for text, Anonymous Pro for figures.

- **Display:** Fjalla One at 82px, uppercase, tight. Condensed enough that a
  six-word headline fits across four columns, which is the whole reason
  condensed faces exist.
- **Headings:** uppercase at every level, including the section labels. Body is
  the only mixed case in the system.
- **Body:** Zilla Slab at 15.5px, 1.56, 38ch. A slab holds up at small sizes on
  cheap-looking grounds, which is precisely the effect being imitated.
- **Bylines and datelines:** Anonymous Pro, small caps-adjacent, uppercase.

## Layout

A 12-column grid at 1360px, but the *text* grid is five columns with 18px
gutters and a 1px vertical rule between each. The signature structure is a
**span-and-column front page**: a headline spanning columns 1–3, its deck
beneath it, then body text flowing down all five columns with a boxed sidebar
occupying column 5 from the fold down.

Vertical rhythm is 4px. Stories are separated by a 1px horizontal rule with 22px
of air above and 14px below — asymmetric, so the rule belongs to the story
underneath it.

## Elevation & Depth

There is no elevation. Nothing has a shadow, nothing has a fill, and nothing
floats. Hierarchy is rules and type size only.

The single animation in the system is a live counter incrementing. Print does
not move, and the one thing that does is the one thing that is genuinely live.

## Shapes

Zero radius on every element without exception, including badges and avatars. A
rounded corner anywhere in this system reads as a foreign object.

Photography is grayscale and column-width, with a 1px rule above the caption.
Images never bleed to the page edge.

## Components

- **Column set:** the signature component. Five columns, 1px rules, headline
  spans declared in column counts rather than pixels.
- **Kicker / head / deck:** every story carries all three — a red uppercase
  kicker, an uppercase headline, and a mixed-case deck at body-lg.
- **Correction bar:** 3px crimson at the left of an amended story, with the
  amendment time in mono.
- **Buttons:** square, red fill, 11px padding, uppercase label.
- **Live badge:** red fill, uppercase, with a mono counter beside it.

## Do's and Don'ts

- Do set body text in columns with vertical rules.
- Do keep every chromatic value in the red family.
- Do span headlines across columns rather than centring them.
- Do use uppercase for every heading and label.
- Don't add a second hue for status.
- Don't round any corner.
- Don't animate anything except a genuinely live figure.