---
version: alpha
name: Frost Index
description: A cold reference table. Near-white with a blue bias, one steel blue, chart series that are all the same hue, and 2px radii.
meta:
  id: "theme-frost-index"
  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: Everything is one hue, because everything is one quantity
  bestFor: Financial data, reference tables, comparison tools, market and index dashboards
  avoidFor: Consumer marketing, storytelling pages, anything that needs warmth
  defaultMode: light
  surfaceStyle: ruled
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 1
    duration: 110ms
    ease: "cubic-bezier(0.4, 0, 0.2, 1)"
    signature: "Almost none. Sorting is instant; only the sort arrow transitions."
  displayFont: IBM Plex Sans
  displayKind: sans
  bodyFont: IBM Plex Sans
  monoFont: IBM Plex Mono
colors:
  background: "#EAF1F5"
  foreground: "#1F2A31"
  card: "#E2E9EE"
  card-foreground: "#1F2A31"
  popover: "#E2E9EE"
  popover-foreground: "#1F2A31"
  primary: "#006F83"
  primary-foreground: "#F5FBFF"
  secondary: "#D7E1E7"
  secondary-foreground: "#1F2A31"
  muted: "#D7E1E7"
  muted-foreground: "#53646E"
  accent: "#515D7A"
  accent-foreground: "#F5FBFF"
  destructive: "#B02B27"
  destructive-foreground: "#F5FBFF"
  border: "#C5CED3"
  input: "#C5CED3"
  ring: "#006F83"
  chart-1: "#007F95"
  chart-2: "#3294A9"
  chart-3: "#0C6677"
  chart-4: "#6DA9B8"
  chart-5: "#224F59"
colorsDark:
  background: "#0C151A"
  foreground: "#D2E0E7"
  card: "#151E23"
  card-foreground: "#D2E0E7"
  popover: "#151E23"
  popover-foreground: "#D2E0E7"
  primary: "#31BDDA"
  primary-foreground: "#030F16"
  secondary: "#1D2930"
  secondary-foreground: "#D2E0E7"
  muted: "#1D2930"
  muted-foreground: "#81929B"
  accent: "#909EC2"
  accent-foreground: "#030F16"
  destructive: "#FF7F73"
  destructive-foreground: "#030F16"
  border: "#2B363D"
  input: "#2B363D"
  ring: "#31BDDA"
  chart-1: "#41B5CF"
  chart-2: "#3597AD"
  chart-3: "#7FCBDE"
  chart-4: "#407B8A"
  chart-5: "#ABDAE6"
typography:
  display-lg:
    fontFamily: IBM Plex Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: IBM Plex Sans
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.12
    letterSpacing: -0.02em
  headline-md:
    fontFamily: IBM Plex Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.01em
  body-lg:
    fontFamily: IBM Plex Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: IBM Plex Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.58
  body-sm:
    fontFamily: IBM Plex Sans
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: IBM Plex Sans
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.12em
  label-mono:
    fontFamily: IBM Plex Mono
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  numeral-xl:
    fontFamily: IBM Plex Mono
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.03em
rounded:
  none: 0px
  sm: 1px
  md: 2px
  lg: 2px
  xl: 4px
  full: 9999px
spacing:
  base: 16px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 36px
  gutter: 16px
  margin: 22px
  measure: 72ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.md}"
    padding: 9px
  button-secondary:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 9px
  card-article:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.lg}"
    padding: 14px
  badge-label:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.sm}"
---

# Frost Index

## Overview

Frost Index is built for the case where a person is comparing forty numbers and
does not want to be entertained. The ground is a cool near-white, everything is
separated by hairlines rather than space, radii are effectively zero, and the
density is high enough that a table of thirty rows fits above the fold.

The distinguishing decision is the chart palette: every series is the same blue
at a different lightness. That is correct here because the series *are* the same
quantity measured differently — five countries' inflation, five funds' returns —
and giving them five unrelated hues would imply a difference that does not exist.

Personality: cold, precise, unsentimental. It should feel like a terminal that
went to design school.

## Colors

One blue, five lightnesses, and a great deal of grey.

- **Ground (#EAF1F5):** Cool near-white with a blue bias.
- **Primary (#006F83):** Steel blue. Links, the sorted column, the focused cell.
  It is a text and rule colour far more often than a fill.
- **Accent (#515D7A):** Slate violet. Used only as text, for secondary
  annotations and footnote markers.
- **Positive and negative** are the destructive red and a darkened primary — not
  green and red — because in this system up and down are the same measurement.
- Charts are monochrome: chart-1 through chart-5 are one hue stepping in
  lightness. If two series need to be told apart at a glance, they need a legend,
  not a hue.

## Typography

IBM Plex throughout — Sans for structure and prose, Mono for every figure.

- **Display:** Plex Sans at 40px, 600. Headings here are small; the table is the
  hero.
- **Body:** Plex Sans at 14px with a 1.58 line height. Dense, but Plex holds up.
- **Labels:** uppercase at 10.5px with 0.12em tracking. Column headers are
  labels, always.
- **Figures:** Plex Mono with tabular figures and a slashed zero, right-aligned
  in every numeric column. Negative numbers are parenthesised, not prefixed.

## Layout

A 12-column grid at 1440px with 16px gutters and a 22px margin — deliberately
tight, because horizontal space belongs to columns.

The signature layout is a sticky first column and a sticky header row, with the
body scrolling in both directions inside a hairline frame. Vertical rhythm is
4px and row height is 34px.

## Elevation & Depth

No shadows except on the sticky header, which gets a 1px hairline and a
hair of shadow only once the table has scrolled. Everything else is separated by
hairlines. A "panel" is a region bounded by rules.

## Shapes

Effectively square: 2px on cards and buttons, 1px on badges, 4px on modals. The
2px is not zero on purpose — it keeps the interface from reading as a terminal
emulator, which is a different theme.

Images are rare and cool-graded. This theme mostly does not have images.

## Components

- **Buttons:** 2px radius, 9px padding, hairline border. The primary is a filled
  steel blue; everything else is a bordered card fill.
- **Tables:** the main component. Hairline row rules, no zebra, sticky header and
  first column, mono right-aligned numerics, sorted column header in primary.
- **Inputs:** 2px radius, hairline border, 8px padding, no fill change on focus
  — just a 2px primary ring.
- **Sparklines:** 1px stroke, primary, no fill, 20px tall, inline in a cell.
- **Badges:** 1px radius, uppercase, on the secondary fill.

## Do's and Don'ts

- Do keep chart series to one hue at different lightnesses.
- Do right-align and monospace every number.
- Do use hairlines instead of gaps to separate things.
- Don't use green-and-red for up and down; use the primary and the destructive.
- Don't add radius, shadow or motion to make it friendlier — a different theme
  is the right answer for that.
- Don't let a row be taller than 34px.
- Don't put marketing copy in this theme. It has nowhere to go.