---
version: alpha
name: Seasalt Digest
description: "Calm clinical analytics UI: sage-grey neutrals, one muted amber action color and a serif reserved for report titles."
colors:
  background: "#f4f7f6"
  foreground: "#111817"
  card: "#ffffff"
  card-foreground: "#111817"
  popover: "#ffffff"
  popover-foreground: "#111817"
  primary: "#a65a1f"
  primary-foreground: "#ffffff"
  secondary: "#e8eeed"
  secondary-foreground: "#1f2827"
  muted: "#e8eeed"
  muted-foreground: "#4a5753"
  accent: "#ffeadb"
  accent-foreground: "#49250d"
  destructive: "#b52552"
  destructive-foreground: "#ffffff"
  success: "#1b6441"
  success-foreground: "#ffffff"
  warning: "#fde28e"
  warning-foreground: "#3f2e05"
  border: "#d3dcda"
  input: "#94a39f"
  ring: "#a65a1f"
  dark-background: "#111817"
  dark-foreground: "#f4f7f6"
  dark-card: "#1f2827"
  dark-card-foreground: "#f4f7f6"
  dark-popover: "#1f2827"
  dark-popover-foreground: "#f4f7f6"
  dark-primary: "#e48d4c"
  dark-primary-foreground: "#2d1405"
  dark-secondary: "#364140"
  dark-secondary-foreground: "#e8eeed"
  dark-muted: "#364140"
  dark-muted-foreground: "#b8c4c1"
  dark-accent: "#49250d"
  dark-accent-foreground: "#ffeadb"
  dark-destructive: "#ef6288"
  dark-destructive-foreground: "#340316"
  dark-success: "#5bb283"
  dark-success-foreground: "#052015"
  dark-warning: "#d9ae2c"
  dark-warning-foreground: "#261b02"
  dark-border: "#364140"
  dark-input: "#4a5753"
  dark-ring: "#e48d4c"
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.022em
  display-md:
    fontFamily: Playfair Display
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.018em
  heading-lg:
    fontFamily: Playfair Display
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.012em
  heading-md:
    fontFamily: Source Sans 3
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.006em
  heading-sm:
    fontFamily: Source Sans 3
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
  body-lg:
    fontFamily: Source Sans 3
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  body-md:
    fontFamily: Source Sans 3
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: Source Sans 3
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: Source Sans 3
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0.005em
  caption:
    fontFamily: Source Sans 3
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 6px
  md: 10px
  lg: 14px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 16px
    height: 40px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 40px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 24px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 8px
    height: 22px
---

# Seasalt Digest

## Overview

Seasalt Digest is for dashboards and reports read by analysts, clinicians and operations leads who need to trust the numbers. Surfaces are a quiet green-grey (neutral, OKLCH hue about 175). Charts and tables get the space. One warm amber (brand, hue about 55) marks the single thing to act on. Status colors are desaturated, so a dashboard full of badges never reads as an alarm.

Moods: calm, clinical, reassuring, clean. Built for: data-analytics, healthcare, research. Density: comfortable.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

All scales follow the same curve. Chroma peaks at steps 400–600 and tapers toward 50 and 950, so no mid-step turns muddy. Neutrals carry a deliberate low-chroma green tint at every step, and shadows use the same tint (neutral.950, rgb 17 24 23). Amber is the only warm accent. It is used for primary (light brand.600, 5.1:1 with white; dark brand.400, 6.8:1 with brand.950), for ring and for selected states. Destructive is a cool crimson (danger.600 light, danger.400 dark), well over ΔE 18 from amber in both modes. Success is a sage-leaning green and warning a yellow-ochre, so both sit beside the warm brand without clashing. Contrast in light mode: muted-foreground neutral.700 is about 6.4:1 on muted and 7.4:1 on background. Contrast in dark mode: neutral.300 is about 5.9:1 on muted and 10:1 on background.

- **Primary** `#a65a1f` / dark `#e48d4c`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f4f7f6` / dark `#111817` on `#111817` / dark `#f4f7f6`: page surface and body text.
- **Card** `#ffffff` / dark `#1f2827`: raised surfaces.
- **Secondary** `#e8eeed` / dark `#364140`: secondary buttons and quiet controls.
- **Muted** `#e8eeed` / dark `#364140` with **muted-foreground** `#4a5753` / dark `#b8c4c1`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#ffeadb` / dark `#49250d`: highlights, selected rows, badges.
- **Destructive** `#b52552` / dark `#ef6288`, **Success** `#1b6441` / dark `#5bb283`, **Warning** `#fde28e` / dark `#d9ae2c`: status only, always paired with an icon or label.
- **Border** `#d3dcda` / dark `#364140`, **Input** `#94a39f` / dark `#4a5753`, **Ring** `#a65a1f` / dark `#e48d4c`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

The scale follows a ~1.25 (major third) ratio: 12, 14, 16, 20, 30, 38 and 48px, with the 24–25px step left out on purpose so headings separate clearly from body. Playfair Display (500/600) is used only for heading-lg (30px) and above. Letter spacing tightens as size grows: -0.012em at 30px down to -0.022em at 48px. Source Sans 3 (400/500/600) carries all functional UI. body-md is 16px with a 1.6 line height for long report reading. IBM Plex Mono (400/500) sets IDs, query snippets and exact values at 14px.

- Display: **Playfair Display** (fallback Georgia, serif)
- Interface: **Source Sans 3** (fallback system-ui, sans-serif)
- Mono: **IBM Plex Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Playfair Display | 48px | 1.08 | 500 |
| display-md | Playfair Display | 38px | 1.12 | 500 |
| heading-lg | Playfair Display | 30px | 1.2 | 600 |
| heading-md | Source Sans 3 | 20px | 1.3 | 600 |
| heading-sm | Source Sans 3 | 16px | 1.4 | 600 |
| body-lg | Source Sans 3 | 18px | 1.6 | 400 |
| body-md | Source Sans 3 | 16px | 1.6 | 400 |
| body-sm | Source Sans 3 | 14px | 1.5 | 400 |
| label | Source Sans 3 | 14px | 1.25 | 600 |
| caption | Source Sans 3 | 12px | 1.4 | 500 |
| code | IBM Plex Mono | 14px | 1.5 | 400 |

## Layout

Comfortable density on a 4px base grid. Content max width is 1280px and dashboard cards use a 24px ({space.6}) gutter. Table rows are at least 44px tall. Card padding is {space.6}. Separate groups with whitespace ({space.8} between sections) rather than divider lines.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Nearly flat. Cards use a 1px border token and shadow.sm. shadow.md is for dropdowns, popovers and tooltips. shadow.lg is for dialogs only. In dark mode, depth comes from surface steps (background neutral.950 → card neutral.900 → muted neutral.800) rather than from shadows.

- sm: `0 1px 2px rgba(17, 24, 23, 0.06)`
- md: `0 6px 16px -4px rgba(17, 24, 23, 0.11)`
- lg: `0 18px 44px -10px rgba(17, 24, 23, 0.20)`

## Shapes

Restrained rounding: radius.sm 6px for checkboxes and tags, radius.md 10px for buttons and inputs, radius.lg 14px for cards and panels, radius.xl 20px for dialogs. radius.full is used only for badges and filter chips.

Radius scale: sm 6px, md 10px, lg 14px, xl 20px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use one primary button (brand.600 light, brand.400 dark) per view; render all other actions as secondary or ghost buttons.
- **Do:** Show focus as a 2px ring token with a 2px offset on buttons, inputs and table rows; do not replace it with a color change alone.
- **Do:** Set numeric table columns in Source Sans 3 with font-feature-settings: 'tnum' and right-align them.
- **Do:** Use Playfair Display only for heading-lg (30px), display-md (38px) and display-lg (48px) page and report titles.
- **Do:** Separate dashboard cards with a 1px border token and {space.6} (24px) gutters.
- **Do:** Keep table rows at least 44px tall; use the muted token for row hover and zebra striping, and accent for the selected row.
- **Do:** Pair every success, warning and destructive badge or alert with an icon or text label.
- **Do:** Use typography.code (IBM Plex Mono 14px) for IDs, query text and exact raw values.
- **Don't:** Don't use amber (primary or brand.*) for errors or negative trends; use destructive with an icon or label.
- **Don't:** Don't give more than one series per chart group a brand color; draw supporting series in neutral.500 to neutral.700.
- **Don't:** Don't use #000000 or untinted grey; take every neutral, border and shadow from the green-grey neutral ramp.
- **Don't:** Don't apply shadow.md or shadow.lg to cards; reserve md for popovers and dropdowns and lg for dialogs.
- **Don't:** Don't set Playfair Display below 24px, in all caps, or inside buttons, badges, inputs or table cells.
- **Don't:** Don't put long body text on the accent (brand.100 / brand.900) surface; limit accent to selected rows and highlights.
- **Don't:** Don't use the warning token as a text color on background or card; set warning-foreground text on the warning surface.