---
version: alpha
name: Tide Table
description: An almanac: sea-mist paper, a muted olive that carries structure, and one indigo reserved for the number that matters.
meta:
  id: "theme-tide-table"
  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 quiet page, and the one figure you came for.
  bestFor: Almanacs and reference data, weather and marine services, timetables, scientific reporting, long tables
  avoidFor: Consumer marketing, anything that needs urgency, image-led storefronts
  defaultMode: light
  surfaceStyle: ruled
  accentUse: text
  caseStyle: labels-upper
  borderWidth: 1px
  imageTreatment: cool
  motion:
    intensity: 1
    duration: 180ms
    ease: "cubic-bezier(0.33, 1, 0.68, 1)"
    signature: "Rows reveal by height only. Nothing moves horizontally, ever."
  displayFont: Spectral
  displayKind: serif
  bodyFont: Spectral
  monoFont: Inconsolata
colors:
  background: "#D9F3F7"
  foreground: "#0C1919"
  card: "#CCE1E4"
  card-foreground: "#0C1919"
  popover: "#CCE1E4"
  popover-foreground: "#0C1919"
  primary: "#72754F"
  primary-foreground: "#F1FDFE"
  secondary: "#B3D0D4"
  secondary-foreground: "#0C1919"
  muted: "#B3D0D4"
  muted-foreground: "#445857"
  accent: "#0D51B0"
  accent-foreground: "#F1FDFE"
  destructive: "#B6322D"
  destructive-foreground: "#F1FDFE"
  border: "#A9C1C6"
  input: "#A9C1C6"
  ring: "#72754F"
  chart-1: "#73763D"
  chart-2: "#5F79A8"
  chart-3: "#3E7757"
  chart-4: "#A96D7D"
  chart-5: "#146F7A"
colorsDark:
  background: "#001C21"
  foreground: "#D1EDEA"
  card: "#172427"
  card-foreground: "#D1EDEA"
  popover: "#172427"
  popover-foreground: "#D1EDEA"
  primary: "#C0C49B"
  primary-foreground: "#001014"
  secondary: "#1E3134"
  secondary-foreground: "#D1EDEA"
  muted: "#1E3134"
  muted-foreground: "#7A9D9A"
  accent: "#5394F9"
  accent-foreground: "#001014"
  destructive: "#FFA499"
  destructive-foreground: "#001014"
  border: "#2E3F42"
  input: "#2E3F42"
  ring: "#C0C49B"
  chart-1: "#B7BC80"
  chart-2: "#91ADDF"
  chart-3: "#94CFAA"
  chart-4: "#CE8F9F"
  chart-5: "#85D5E0"
typography:
  display-lg:
    fontFamily: Spectral
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.16
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Spectral
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.24
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Spectral
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.35
  body-lg:
    fontFamily: Spectral
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.7
  body-md:
    fontFamily: Spectral
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.66
  body-sm:
    fontFamily: Spectral
    fontSize: 12.5px
    fontWeight: 400
    lineHeight: 1.5
  label-caps:
    fontFamily: Spectral
    fontSize: 10.5px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  label-mono:
    fontFamily: Inconsolata
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  numeral-xl:
    fontFamily: Inconsolata
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  none: 0px
  sm: 1px
  md: 2px
  lg: 2px
  xl: 3px
  full: 9999px
spacing:
  base: 16px
  xs: 3px
  sm: 6px
  md: 14px
  lg: 22px
  xl: 40px
  gutter: 20px
  margin: 28px
  measure: 70ch
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    rounded: "{rounded.sm}"
    padding: 10px
  card-panel:
    backgroundColor: "{colors.card}"
    textColor: "{colors.foreground}"
    rounded: "{rounded.md}"
    padding: 18px
  table-row:
    backgroundColor: transparent
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
  badge-label:
    backgroundColor: transparent
    textColor: "{colors.accent}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
---

# Tide Table

## Overview

Tide Table is built for the kind of page nobody reads — they look something up
in it. An almanac, a timetable, a set of readings. The design's whole job is to
get out of the way of a number and then, at exactly one moment, point at it.

It inverts the usual arrangement. The primary is a muted olive with barely any
chroma: it does structure — rules, headers, the active row — and never shouts.
The loud colour in this system is the *accent*, an indigo that appears on
roughly one element per screen. If two things are indigo, one of them is wrong.

It is a poor fit for marketing. There is no hierarchy of excitement here, only a
hierarchy of precision.

## Colors

Sea mist, olive, and a single indigo.

- **Ground:** a pale cool paper with a green-blue cast, chosen so that black text
  reads slightly softer than it would on white over long sessions.
- **Primary (olive):** structural. Table headers, the current row, the submit
  button. Deliberately low chroma so a full page of it stays calm.
- **Accent (indigo):** the answer. The high tide, the departure time, the
  reading that is out of range. One per screen.
- **Neutrals** carry the ground's cast, so rules look like they were printed on
  this paper rather than laid over it.
- Charts use the accented strategy: olive and indigo lead, three quiet hues
  support.

## Typography

Spectral throughout, Inconsolata for figures.

- **One family for everything.** Spectral is a screen-first serif with a large
  x-height, and using it for display *and* body makes the page read as a single
  printed object.
- **Display:** 46px at weight 500. Restrained — this is a title, not a headline.
- **Body:** 14.5px, 1.66, 70ch. The measure is long on purpose; this is
  reference prose and it wants few line breaks.
- **Figures:** Inconsolata, tabular. Every number in a column lines up, which is
  the entire reason a table exists.
- **Labels:** uppercase at 0.14em. Labels are the only uppercase in the system.

## Layout

A 12-column grid at 1280px, 20px gutters. The signature structure is a **ruled
table with a hanging index**: the table occupies columns 3–12 and the date or
station name hangs out to the left in columns 1–2, unruled, so the eye can run
down it without crossing a line.

Rows are 34px. Every sixth row gets a slightly stronger rule, the way a printed
tide table groups by six hours.

## Elevation & Depth

Rules only. There are no shadows and no fills at any level — hierarchy is
carried entirely by rule weight: hairline between rows, 1px between groups, 2px
under a table head.

The one motion is vertical: an expanding row grows in height. Nothing slides.

## Shapes

Effectively square. 1px on controls, 2px on cards. This is a printed page and
printed pages do not have rounded corners.

Photography is cool-treated and rare — a coastline, a gauge, an instrument.
Never a person.

## Components

- **Reading table:** hanging index, 34px rows, hairline rules, every sixth rule
  doubled, the out-of-range figure in indigo.
- **Buttons:** olive fill, 1px radius, 10px padding. Compact, because this
  system's pages are dense.
- **Badges:** no fill and no border — accent-coloured uppercase text only.
- **Inputs:** 1px border, square, olive focus ring, mono figures.
- **Sparkline:** 1px olive stroke, no fill, one indigo dot at the extreme.

## Do's and Don'ts

- Do let the olive carry structure and keep it quiet.
- Do reserve the indigo for one element per screen.
- Do set every number in the mono face with tabular figures.
- Do use rule weight, not colour, for grouping.
- Don't add fills or shadows to tables.
- Don't animate anything horizontally.
- Don't shorten the measure; this system is for reading down a column.