Tidemark

# Tidemark

## Philosophy

Tidemark reads a screen as a deep, still pool seen from below the surface. A single drop lands; what matters is dense and near the strike, and everything else diffuses outward into the dark water until it dissolves to a pale wash. Hierarchy is radial distance from the strike, not stacked weight or coloured chrome. The mode is dark on purpose — a wet-slate ground where pale wash and a lone vermillion seal read as light rising through water. The name is the line the receding water leaves behind.

### Values

- Radial hierarchy — importance is distance from the strike-point, not size or stacking order
- The void is direction — dark space is where the ink is going, not empty filler
- Impermanence — notes do not delete; they sink a band deeper and fade to wash
- One waterline — a single luminous hairline gives the whole system its rhythm
- One seal — a single vermillion accent per view for the one live action

### Anti-Values

- Never a light cream or white ground — the pool is deep wet-slate
- Never a second vermillion or saturated colour competing in a view
- Never bars or pie wedges — magnitude blooms as a diffusion ring
- Never a calligraphic serif masthead — the type is structural, like a tide table
- Never a hard mechanical border or a boxed-in pill nav

### Visual Character

- background:#0d1417 deep wet-slate pool with cool cyan/vermillion ink-diffusion radial fields
- one luminous waterline hairline (#7fd4d0) threading every section with lit strike dots
- diffusion-ring data: SVG arcs blooming from a bright core, never bars
- wash panels: top-down dark gradient surface with one corner cyan bloom, no edge accent
- cool deep-water shadows only; long tidal easing cubic-bezier(.22,.61,.36,1) 820ms

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0d1417` |
| surface | `#141d22` |
| surface_2 | `#1b262c` |
| text | `#eef2f1` |
| text_2 | `#b9c4c5` |
| muted | `#7e8c8e` |
| ink_pale | `#56676b` |
| accent | `#e2402c` |
| accent_strong | `#c2331f` |
| on_accent | `#fbf3ee` |
| glow | `#7fd4d0` |
| glow_deep | `#3f8f8c` |
| border | `rgba(180,200,202,0.12)` |
| success | `#6fae8f` |
| warning | `#d6a253` |
| error | `#e2402c` |
| info | `#6fa6c4` |

### Typography

- **Base Size**: 17.5px
- **Body Font**: Inter
- **Heading Font**: Space Grotesk
- **Mono Font**: Space Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap

### Radii

- **None**: 0px
- **Control**: 16px
- **Panel**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 2px 12px rgba(0,0,0,0.40)
- **Md**: 0 10px 36px rgba(0,0,0,0.46)
- **Lg**: 0 22px 64px rgba(0,0,0,0.55)
- **Glow**: 0 0 28px rgba(127,212,208,0.28)

### Spacing

- **Base**: 8px
- **Scale**: ["8px","16px","24px","32px","48px","64px","96px","120px"]

### Surfaces

- **Pool**: #0d1417
- **Panel**: linear-gradient(180deg,#141d22,#1b262c)
- **Overlay**: rgba(13,20,23,0.82)
- **Bloom**: radial-gradient(circle,rgba(127,212,208,0.12),transparent 68%)

### Borders

- **Soft**: 1px solid rgba(180,200,202,0.12)
- **Hairline**: 1px solid rgba(180,200,202,0.07)

### Motion

- **Ease**: cubic-bezier(0.22,0.61,0.36,1)
- **Normal**: 480ms
- **Slow**: 820ms
- **Reduced Motion**: honored

## Rules

### Composition

Compose on a horizontal tideline grid: a single luminous waterline crosses each section with lit strike dots marking where the section's drop landed; content blooms above and below it. The one focal element is the strike-point at full ink; supporting forms diffuse outward and lighten with distance.

### Hierarchy

Radial distance from the strike encodes importance, reinforced by ink density — lit surface #eef2f1 for the focus washing to ink-pale #56676b for the receding. The single vermillion #e2402c seal is the one live action per view; cyan glow #7fd4d0 is the waterline/focus light.

### Density

Low-to-medium. Three or four breathing groups per screen separated by tidal space and wet bleed-dividers, never hard rules. Airy 15-16px table rows.

### Signature

Diffusion-ring data (arcs blooming from a bright core), a continuous luminous waterline with strike dots, wash panels with a corner bloom and no edge accent, a vertical depth gauge, wet bleed-dividers, and the lone vermillion seal.

## Layout

### Grid

Horizontal tideline grid; max content 1200px centred; only the hero spans 100vw. minmax(0,1fr) columns so children shrink, never overflow.

### Whitespace

Generous tidal section gaps 56-120px; pad above every title; void carries weight as the direction ink is travelling.

### Density

low-to-medium

### Responsive

Single column below ~880px; rail nav collapses to a top row; rings and tables go full-width; never overflow horizontally from 390px to 2560px+.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 880px
- **Desktop**: 1200px
- **Wide**: 2560px

## Guidance

### Do

- Place exactly one strike-point at full ink per view and diffuse everything else outward into the dark
- Thread one luminous waterline through the sections and ride lit strike dots on it
- Show magnitude as a diffusion ring arc blooming from a bright core, never a bar
- Reserve the vermillion seal for the single live action; use cyan glow for waterline and focus
- Keep the deep wet-slate ground and cool deep-water shadows; let panels bloom from one corner

### Don't

- Don't use a light cream/white ground, a second vermillion, or saturated colour beyond the one seal
- Don't draw bars or pie wedges for data, or give any card a single highlighted edge
- Don't trap navigation in a boxed pill bar or nest cards
- Don't use a calligraphic serif masthead, warm/blue-grey chrome shadows, or symbol glyphs in copy

### Accessibility

Lit surface #eef2f1 on Pool #0d1417 is ~15:1. Cyan glow and vermillion are used for accent and large/structural type, not small body text. Muted #7e8c8e only for 14.5px+ labels. Focus rings use the cyan glow; every form control is explicitly styled. The settled page is the no-JS default behind a .js gate; prefers-reduced-motion collapses all motion.

## Imagery Direction

### Pairs With

inkpool

### Summary

Inkpool wet ink-wash technique applied to luminous blooms dispersing in deep dark water; the tonal world is inverted from cream-ground to wet-slate so the wash reads as light rising through the pool.

### Subjects

- a single ink drop blooming in a deep still pool
- dispersing tendrils and water-blooms in dark water
- a tidemark line left by receding water
- faint diffusing forms drifting in the void

### Usage

One full-bleed hero of a luminous bloom against vast dark water with a vermillion seal low in a corner; feature imagery as mid-scale blooms; empty-states as a faint diluted suggestion in mist.

---
version: "alpha"
name: "Tidemark"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0d1417"
  surface: "#141d22"
  surface_2: "#1b262c"
  text: "#eef2f1"
  text_2: "#b9c4c5"
  muted: "#7e8c8e"
  ink_pale: "#56676b"
  accent: "#e2402c"
  accent_strong: "#c2331f"
  on_accent: "#fbf3ee"
  glow: "#7fd4d0"
  glow_deep: "#3f8f8c"
  success: "#6fae8f"
  warning: "#d6a253"
  error: "#e2402c"
  info: "#6fa6c4"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.136rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.709rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17.5px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  control: "16px"
  panel: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "32px"
  xl: "48px"
  2xl: "64px"
  3xl: "96px"
  4xl: "120px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-text_2:
    backgroundColor: "{colors.text_2}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-ink_pale:
    backgroundColor: "{colors.ink_pale}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_strong:
    backgroundColor: "{colors.accent_strong}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-glow:
    backgroundColor: "{colors.glow}"
  color-reference-glow_deep:
    backgroundColor: "{colors.glow_deep}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Tidemark

## Overview

Tidemark reads a screen as a deep, still pool seen from below the surface. A single drop lands; what matters is dense and near the strike, and everything else diffuses outward into the dark water until it dissolves to a pale wash. Hierarchy is radial distance from the strike, not stacked weight or coloured chrome. The mode is dark on purpose — a wet-slate ground where pale wash and a lone vermillion seal read as light rising through water. The name is the line the receding water leaves behind.

### Values

- Radial hierarchy — importance is distance from the strike-point, not size or stacking order
- The void is direction — dark space is where the ink is going, not empty filler
- Impermanence — notes do not delete; they sink a band deeper and fade to wash
- One waterline — a single luminous hairline gives the whole system its rhythm
- One seal — a single vermillion accent per view for the one live action

### Anti-Values

- Never a light cream or white ground — the pool is deep wet-slate
- Never a second vermillion or saturated colour competing in a view
- Never bars or pie wedges — magnitude blooms as a diffusion ring
- Never a calligraphic serif masthead — the type is structural, like a tide table
- Never a hard mechanical border or a boxed-in pill nav

### Visual Character

- background:#0d1417 deep wet-slate pool with cool cyan/vermillion ink-diffusion radial fields
- one luminous waterline hairline (#7fd4d0) threading every section with lit strike dots
- diffusion-ring data: SVG arcs blooming from a bright core, never bars
- wash panels: top-down dark gradient surface with one corner cyan bloom, no edge accent
- cool deep-water shadows only; long tidal easing cubic-bezier(.22,.61,.36,1) 820ms

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#0d1417` |
| surface | `#141d22` |
| surface_2 | `#1b262c` |
| text | `#eef2f1` |
| text_2 | `#b9c4c5` |
| muted | `#7e8c8e` |
| ink_pale | `#56676b` |
| accent | `#e2402c` |
| accent_strong | `#c2331f` |
| on_accent | `#fbf3ee` |
| glow | `#7fd4d0` |
| glow_deep | `#3f8f8c` |
| success | `#6fae8f` |
| warning | `#d6a253` |
| error | `#e2402c` |
| info | `#6fa6c4` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.136rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.709rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17.5px, weight 400, line-height 1.5.
- **Label-Md**: Space Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `32px`
- **Xl**: `48px`
- **2xl**: `64px`
- **3xl**: `96px`
- **4xl**: `120px`

### Grid

Horizontal tideline grid; max content 1200px centred; only the hero spans 100vw. minmax(0,1fr) columns so children shrink, never overflow.

### Whitespace

Generous tidal section gaps 56-120px; pad above every title; void carries weight as the direction ink is travelling.

### Density

low-to-medium

### Responsive

Single column below ~880px; rail nav collapses to a top row; rings and tables go full-width; never overflow horizontally from 390px to 2560px+.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 880px
- **Desktop**: 1200px
- **Wide**: 2560px

## Elevation & Depth

### Shadows

- **Sm**: 0 2px 12px rgba(0,0,0,0.40)
- **Md**: 0 10px 36px rgba(0,0,0,0.46)
- **Lg**: 0 22px 64px rgba(0,0,0,0.55)
- **Glow**: 0 0 28px rgba(127,212,208,0.28)

## Shapes

### Rounded

- **None**: `0px`
- **Control**: `16px`
- **Panel**: `24px`
- **Full**: `9999px`

### Surfaces

- **Pool**: #0d1417
- **Panel**: linear-gradient(180deg,#141d22,#1b262c)
- **Overlay**: rgba(13,20,23,0.82)
- **Bloom**: radial-gradient(circle,rgba(127,212,208,0.12),transparent 68%)

### Borders

- **Soft**: 1px solid rgba(180,200,202,0.12)
- **Hairline**: 1px solid rgba(180,200,202,0.07)

## Components

### Composition

Compose on a horizontal tideline grid: a single luminous waterline crosses each section with lit strike dots marking where the section's drop landed; content blooms above and below it. The one focal element is the strike-point at full ink; supporting forms diffuse outward and lighten with distance.

### Hierarchy

Radial distance from the strike encodes importance, reinforced by ink density — lit surface #eef2f1 for the focus washing to ink-pale #56676b for the receding. The single vermillion #e2402c seal is the one live action per view; cyan glow #7fd4d0 is the waterline/focus light.

### Density

Low-to-medium. Three or four breathing groups per screen separated by tidal space and wet bleed-dividers, never hard rules. Airy 15-16px table rows.

### Signature

Diffusion-ring data (arcs blooming from a bright core), a continuous luminous waterline with strike dots, wash panels with a corner bloom and no edge accent, a vertical depth gauge, wet bleed-dividers, and the lone vermillion seal.

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019efa12-1e32-7332-a30b-a5b31811f429/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Place exactly one strike-point at full ink per view and diffuse everything else outward into the dark
- Do Thread one luminous waterline through the sections and ride lit strike dots on it
- Do Show magnitude as a diffusion ring arc blooming from a bright core, never a bar
- Do Reserve the vermillion seal for the single live action; use cyan glow for waterline and focus
- Do Keep the deep wet-slate ground and cool deep-water shadows; let panels bloom from one corner
- Don't Don't use a light cream/white ground, a second vermillion, or saturated colour beyond the one seal
- Don't Don't draw bars or pie wedges for data, or give any card a single highlighted edge
- Don't Don't trap navigation in a boxed pill bar or nest cards
- Don't Don't use a calligraphic serif masthead, warm/blue-grey chrome shadows, or symbol glyphs in copy

### Accessibility

Lit surface #eef2f1 on Pool #0d1417 is ~15:1. Cyan glow and vermillion are used for accent and large/structural type, not small body text. Muted #7e8c8e only for 14.5px+ labels. Focus rings use the cyan glow; every form control is explicitly styled. The settled page is the no-JS default behind a .js gate; prefers-reduced-motion collapses all motion.

## Imagery Direction

### Pairs With

inkpool

### Summary

Inkpool wet ink-wash technique applied to luminous blooms dispersing in deep dark water; the tonal world is inverted from cream-ground to wet-slate so the wash reads as light rising through the pool.

### Subjects

- a single ink drop blooming in a deep still pool
- dispersing tendrils and water-blooms in dark water
- a tidemark line left by receding water
- faint diffusing forms drifting in the void

### Usage

One full-bleed hero of a luminous bloom against vast dark water with a vermillion seal low in a corner; feature imagery as mid-scale blooms; empty-states as a faint diluted suggestion in mist.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tidemark",
  "type": "registry:theme",
  "title": "Tidemark shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0d1417",
      "foreground": "#eef2f1",
      "card": "#141d22",
      "card-foreground": "#eef2f1",
      "popover": "#141d22",
      "popover-foreground": "#eef2f1",
      "primary": "#eef2f1",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#7e8c8e",
      "muted-foreground": "#eef2f1",
      "accent": "#e2402c",
      "accent-foreground": "#ffffff",
      "destructive": "#e2402c",
      "border": "rgba(180,200,202,0.12)",
      "input": "rgba(180,200,202,0.12)",
      "ring": "#e2402c",
      "chart-1": "#eef2f1",
      "chart-2": "#f4f4f5",
      "chart-3": "#e2402c",
      "chart-4": "#6fae8f",
      "chart-5": "#d6a253",
      "sidebar": "#141d22",
      "sidebar-foreground": "#eef2f1",
      "sidebar-primary": "#eef2f1",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#6fa6c4",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(180,200,202,0.12)",
      "sidebar-ring": "#e2402c",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#eef2f1",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#e2402c",
      "accent-foreground": "#ffffff",
      "destructive": "#e2402c",
      "border": "#303642",
      "input": "#303642",
      "ring": "#e2402c",
      "chart-1": "#eef2f1",
      "chart-2": "#f4f4f5",
      "chart-3": "#e2402c",
      "chart-4": "#6fae8f",
      "chart-5": "#d6a253",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#eef2f1",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#e2402c",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#e2402c",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efa12-1e32-7332-a30b-a5b31811f429",
    "slug": "tidemark",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_strong",
        "bg",
        "border",
        "error",
        "glow",
        "glow_deep",
        "info",
        "ink_pale",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_2",
        "text",
        "text_2",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "control",
        "full",
        "none",
        "panel"
      ],
      "shadows": [
        "glow",
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bloom",
        "overlay",
        "panel",
        "pool"
      ],
      "borders": [
        "hairline",
        "soft"
      ],
      "motion": [
        "ease",
        "normal",
        "reduced_motion",
        "slow"
      ]
    }
  }
}
```