---
version: alpha
name: Sprint Board
description: Acid chartreuse on cream, with numerals large enough to read from across a room.
meta:
  id: "theme-sprint-board"
  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: The number is the interface.
  bestFor: Live scoring and leaderboards, fitness and racing, sales boards, competitive analytics, wall displays
  avoidFor: Long-form reading, settings-heavy apps, anything with a subtle message
  defaultMode: light
  surfaceStyle: filled
  accentUse: bar
  caseStyle: headings-upper
  borderWidth: 1px
  imageTreatment: punch
  motion:
    intensity: 3
    duration: 180ms
    ease: "cubic-bezier(0.2, 0, 0, 1)"
    signature: "Numerals roll vertically when they change; rows slide when their rank changes."
  displayFont: League Spartan
  displayKind: sans
  bodyFont: Epilogue
  monoFont: Chivo Mono
colors:
  background: "#FFECD7"
  foreground: "#28211A"
  card: "#FCDEBE"
  card-foreground: "#28211A"
  popover: "#FCDEBE"
  popover-foreground: "#28211A"
  primary: "#8F8800"
  primary-foreground: "#150B01"
  secondary: "#F8D0A4"
  secondary-foreground: "#28211A"
  muted: "#F8D0A4"
  muted-foreground: "#665A51"
  accent: "#576DC6"
  accent-foreground: "#FFF9F3"
  destructive: "#B6322D"
  destructive-foreground: "#FFF9F3"
  border: "#E5C19B"
  input: "#E5C19B"
  ring: "#8F8800"
  chart-1: "#7B7500"
  chart-2: "#918A00"
  chart-3: "#635E00"
  chart-4: "#A9A332"
  chart-5: "#4E4A00"
colorsDark:
  background: "#21190F"
  foreground: "#F6EFE8"
  card: "#362208"
  card-foreground: "#F6EFE8"
  popover: "#362208"
  popover-foreground: "#F6EFE8"
  primary: "#CFC500"
  primary-foreground: "#150B01"
  secondary: "#4A2D06"
  secondary-foreground: "#F6EFE8"
  muted: "#4A2D06"
  muted-foreground: "#A49B93"
  accent: "#B9CAFF"
  accent-foreground: "#150B01"
  destructive: "#FFA499"
  destructive-foreground: "#150B01"
  border: "#5A4021"
  input: "#5A4021"
  ring: "#CFC500"
  chart-1: "#B2A900"
  chart-2: "#948D00"
  chart-3: "#CCC32D"
  chart-4: "#7B7500"
  chart-5: "#DAD685"
typography:
  display-lg:
    fontFamily: League Spartan
    fontSize: 88px
    fontWeight: 800
    lineHeight: 0.94
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: League Spartan
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: -0.02em
  headline-md:
    fontFamily: League Spartan
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.01em
  body-lg:
    fontFamily: Epilogue
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.58
  body-md:
    fontFamily: Epilogue
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.54
  body-sm:
    fontFamily: Epilogue
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.42
  label-caps:
    fontFamily: Epilogue
    fontSize: 10.5px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.16em
  label-mono:
    fontFamily: Chivo Mono
    fontSize: 12.5px
    fontWeight: 500
    lineHeight: 1.36
  numeral-xl:
    fontFamily: Chivo Mono
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.04em
rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 6px
  xl: 8px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 52px
  gutter: 18px
  margin: 26px
  measure: 58ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 13px
  panel-rank:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 16px
  numeral-block:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.numeral-xl}"
  badge-label:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Sprint Board

## Overview

Sprint Board is designed to be read from six metres away. The numeral scale goes
to 96px and it is used constantly — not as a hero flourish but as the normal
size for any figure that matters. Everything else on the page exists to label
those figures.

The palette is an acid chartreuse on cream, which is a combination almost no
interface uses because it is uncomfortable at close range. That is the point: it
is not meant to be looked at closely, it is meant to be glanced at from the far
side of a room, where high-chroma yellow-green is the most visible thing a
screen can do.

It suits leaderboards, live scoring, sales boards and wall displays. It is a bad
system for reading anything longer than a caption.

## Colors

Cream, chartreuse, and one violet.

- **Ground (cream):** warm and slightly yellow, so the chartreuse sits on it as
  a family member rather than a stranger.
- **Primary (chartreuse):** rank, lead, gain, the figure that is winning. It
  fills large blocks, which almost no other theme in this library permits its
  primary to do.
- **Accent (violet):** the only non-numeric thing on the board — a name change,
  a penalty, a note. It is a 3px bar and never a fill.
- **Neutrals** are heavily tinted toward the cream.
- Charts are monochrome chartreuse at five lightnesses; on a scoreboard every
  series is the same kind of quantity.

## Typography

League Spartan for display, Epilogue for body, Chivo Mono for figures.

- **Numerals:** Chivo Mono at 96px is the defining type in this system. Tabular,
  so a score changing from 9 to 10 does not shift the layout.
- **Display:** League Spartan at 88px, weight 800, uppercase, tracked tight.
  Geometric and extremely heavy.
- **Headings:** uppercase throughout.
- **Body:** Epilogue at 14.5px, 1.54. It appears only in labels and captions —
  there is no long-form register in this theme.

## Layout

A 12-column grid at 1360px with 18px gutters. The signature structure is the
**rank stack**: full-width rows, 76px tall, each with a rank numeral in a fixed
96px left column, a name, and a large figure right-aligned — and rows physically
reorder when ranks change.

Vertical rhythm is 4px, but the visual rhythm is set by the 76px row, which
repeats everywhere.

## Elevation & Depth

Filled. Panels are solid cards with no border and no shadow, separated by the
cream showing through between them. Depth is not a concept here; the board is
flat and lit evenly, like a real one.

Numerals roll vertically when they change and rows slide when they reorder.
Those are the only two animations, and both carry meaning.

## Shapes

Small radii — 2px on controls, 4px on cards. Just enough that the board does not
look like a spreadsheet.

Photography is punch-treated, square, and used only as small identity crops
inside a rank row.

## Components

- **Rank row:** the signature component. 76px, rank numeral in a 96px column,
  name, right-aligned figure, chartreuse fill if in the lead.
- **Numeral block:** 96px tabular mono with a small uppercase label above. The
  most-used component in the system.
- **Delta chip:** small mono figure with a triangle, chartreuse up, muted down.
- **Buttons:** chartreuse fill, 2px radius, uppercase.
- **Note bar:** 3px violet at the left of any row carrying a human note.

## Do's and Don'ts

- Do use the 96px numeral as the default size for a figure that matters.
- Do set every figure in tabular mono.
- Do let the chartreuse fill large areas.
- Do reorder rows physically when ranks change.
- Don't set body copy longer than a caption.
- Don't use the violet for anything numeric.
- Don't add shadows; the board is flat.