---
version: alpha
name: Blacktop
description: The brand colour is white. Asphalt ground, road-paint type, and one hazard orange that only marks what is closed.
meta:
  id: "theme-blacktop"
  model: "Claude Opus 5"
  author: "Claude Code"
  createdAt: "2026-09-01T19:34:32+09:00"
  updatedAt: "2026-09-02T16:52:37+09:00"
  version: "1.0.0"
  isNew: false
lookbook:
  tagline: White is the brand. Orange means stop.
  bestFor: Transport and mobility, delivery and courier tracking, motorsport, night-shift operations
  avoidFor: Soft consumer brands, healthcare, long-form editorial
  defaultMode: dark
  surfaceStyle: outline
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 2px
  imageTreatment: grayscale
  motion:
    intensity: 3
    duration: 150ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "Dashes travel along a path, like road markings passing under you."
  displayFont: Anton
  displayKind: sans
  bodyFont: Inter
  monoFont: Martian Mono
colors:
  background: "#E8E7E6"
  foreground: "#211F1C"
  card: "#DFDEDB"
  card-foreground: "#211F1C"
  popover: "#DFDEDB"
  popover-foreground: "#211F1C"
  primary: "#121210"
  primary-foreground: "#FBFAF7"
  secondary: "#D5D4D0"
  secondary-foreground: "#211F1C"
  muted: "#D5D4D0"
  muted-foreground: "#5C5A56"
  accent: "#DA4624"
  accent-foreground: "#0E0D0A"
  destructive: "#2A0001"
  destructive-foreground: "#FBFAF7"
  border: "#C4C3BF"
  input: "#C4C3BF"
  ring: "#121210"
  chart-1: "#3D2E00"
  chart-2: "#353B00"
  chart-3: "#023400"
  chart-4: "#5B3300"
  chart-5: "#430F00"
colorsDark:
  background: "#0F0E0C"
  foreground: "#DAD8D4"
  card: "#191815"
  card-foreground: "#DAD8D4"
  popover: "#191815"
  popover-foreground: "#DAD8D4"
  primary: "#F4F3F0"
  primary-foreground: "#0F0D09"
  secondary: "#25231F"
  secondary-foreground: "#DAD8D4"
  muted: "#25231F"
  muted-foreground: "#8D8B86"
  accent: "#FF8064"
  accent-foreground: "#0F0D09"
  destructive: "#FFEFED"
  destructive-foreground: "#0F0D09"
  border: "#33312D"
  input: "#33312D"
  ring: "#F4F3F0"
  chart-1: "#F1D589"
  chart-2: "#C9D689"
  chart-3: "#BBF2B4"
  chart-4: "#F2B67E"
  chart-5: "#FFDFD6"
typography:
  display-lg:
    fontFamily: Anton
    fontSize: 92px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: Anton
    fontSize: 46px
    fontWeight: 700
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Anton
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.2em
  label-mono:
    fontFamily: Martian Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: Martian Mono
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 0px
  md: 0px
  lg: 2px
  xl: 2px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 52px
  gutter: 18px
  margin: 26px
  measure: 66ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.none}"
    padding: 14px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 18px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Blacktop

## Overview

Blacktop inverts the usual arrangement of a dark theme. The ground is asphalt,
and the brand colour — the thing that fills the primary button, marks the active
route, and carries the identity — is white. Not a tinted off-white used as text:
an actual white fill, used the way road paint is used.

The only other colour in the system is a hazard orange, and it is reserved
entirely for closure, delay and stoppage. If something is orange, it is not
working.

Personality: nocturnal, functional, fast. Signage at 90 kilometres an hour.

## Colors

Asphalt, paint, hazard.

- **Ground (#0F0E0C):** Asphalt. Almost perfectly neutral — this is the least
  chromatic palette in the library, and that is what makes the orange land.
- **Primary (#F4F3F0 in dark):** Road paint. Fills the primary button, marks the
  active leg of a route, underlines the current nav item. In light mode the
  primary flips to near-black, because the paint is always the opposite of the
  road.
- **Accent (#FF8064):** Hazard orange. Closures, delays, stoppages. Nothing
  else, ever.
- **Neutrals** carry almost no chroma at all. Grey here really is grey.
- Charts are analogous in the orange family at low chroma, so a chart never
  competes with a live alert.

## Typography

Anton for display, Inter for body, Martian Mono for every code and time.

- **Display:** Anton at 92px, uppercase by nature, extremely condensed. A route
  name or a city should fill the width.
- **Headings:** uppercase at every level. Labels are sentence case.
- **Body:** Inter at 15px, 1.58, 66ch. Body copy is instructions.
- **Codes and times:** Martian Mono. Its wide, mechanical figures are meant to
  be read quickly and out of the corner of an eye.

## Layout

A 12-column grid at 1360px, 18px gutters. The signature layout is a route strip:
a horizontal band 96px tall running the full width, with stops as 2px vertical
ticks and the current position as a white block, above a stacked list of legs.

Vertical rhythm is 4px. Sections are separated by a 2px dashed rule.

## Elevation & Depth

No shadows. Regions are 2px outlined boxes on the asphalt. The one dynamic depth
cue is the dashed rule, whose dashes travel slowly along the path to indicate
that something is in motion — the only animation in the system that loops.

## Shapes

Square: zero radius on buttons, badges and inputs, 2px on cards and modals. The
2px border is uniform.

Images are grayscale and full-bleed. A photograph here is a road, a depot or a
vehicle, never a person smiling.

## Components

- **Buttons:** white fill, asphalt text, zero radius, 14px padding. Secondary
  buttons are a 2px white outline with no fill.
- **Route strip:** the signature component. 96px band, 2px tick marks, a solid
  white block for current position, an orange block for any closed segment.
- **Leg rows:** mono code on the left, name in Inter, ETA in mono on the right,
  2px rule beneath, orange left bar if delayed.
- **Inputs:** zero radius, 2px border, asphalt fill, white focus outline.
- **Badges:** square, 2px border, uppercase, no fill except for hazard states.

## Do's and Don'ts

- Do let white be the brand colour and keep it as a fill.
- Do reserve the orange for things that are not working.
- Do set headings uppercase and condensed.
- Don't tint the neutrals; this is the one theme where grey should be grey.
- Don't add a radius above 2px.
- Don't use the orange as a decorative accent.
- Don't loop any animation except the travelling dashes.