Seasalt Digest

About 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.

Color

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.

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.

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.

Elevation

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.

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.

Do

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