Tidemark

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Published

Download DESIGN.md

Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.

the spec

specification

philosophy

summary

An ink studio for conservators reading the wet front. A reimagination of the calligraphic fine-art spread brief, conceived independently: the screen is not a static literary spread held open by voids but a continuous rail the handscroll is unrolled along, on a dark wet-stone ground across which one luminous tide-line advances. Ink is watched as a moving wet front, not laid as a resting plate.

values

Read ink as a moving wet front: the live boundary where saturation meets dry fiber is the subject, not a settled plate.Make the rail the spine: every screen is mounted left-to-right like an unrolled handscroll on one registered baseline.Let the luminous wet seam carry hierarchy and division — a tide-line, never a box or a card edge.Record what the ink does: granulation, pooling, and the dried iron tideline are the data the studio keeps.

anti-values

×Avoid the bone-ivory museum spread and the negative-space void column; this language takes the dark ground and the advancing gesture instead.×Avoid radial smoke plumes behind plates and a single brush-bar edge per card; the seam and the rail do that work.×Avoid an oversized italic literary serif masthead; the display is a tall condensed grotesque.×Avoid centred symmetry and dense admin grids; the rail reads in one asymmetric sweep.

visual character

A dark wet-stone ground (#11130F) — damp paper one step up — with a tall all-caps condensed Archivo display set against warm Newsreader body and wide-tracked mono marginalia.Sections are divided by a luminous wet seam: a hard pale tide-line at the top with a celadon granulation halo bleeding downward into the damp surface, register ticks riding along it.The layout is a register rail — a continuous baseline with stations and ticks, read left to right like a handscroll, collapsing to a single vertical scroll on mobile.Data inherits the mechanic: every progress fill ends in a glowing wet-front leading edge; the dried iron-oxide tideline is the one warm stain the system records permanently.Damp-paper panels carry faint dry-brush striation and are separated by the seam and measured space, never by keylines or a single coloured edge.

tokens

colors16 items

#11130F

surface

#181A15

surface_2

#20231C

text

#ECE8DA

muted

#8F9183

border

#2B2E25

accent

#D6E6E2

on_accent

#11130F

accent_2

#6FB3A0

on_accent_2

#11130F

accent_3

#C2724A

on_accent_3

#11130F

success

#6FB3A0

warning

#C9962F

error

#B4503C

info

#5E8FA6

typography11 items

base size: 17px
body font: Newsreader
heading font: Archivo
mono font: Spline Sans Mono
heading weight: 800
heading transform: uppercase
letter spacing: -0.02em
scale ratio: 1.3
line height: 1.62
display stretch: 78%
google fonts url: https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

radii5 items

none: 0
sm: 0
md: 0
lg: 0
full: 9999px

shadows3 items

sm: 0 -1px 0 rgba(214,230,226,0.25)
md: 0 14px 40px rgba(0,0,0,0.45)
lg: 0 -1px 0 rgba(214,230,226,0.35), 0 28px 70px rgba(0,0,0,0.55)

surfaces3 items

treatment: damp-paper
card style: dark damp-paper panels carrying faint dry-brush striation, separated by a luminous wet seam rather than keylines
bg pattern: dry-brush-striation

borders4 items

default width: 1px
accent width: 2px
style: solid
character: structure comes from the luminous wet seam and measured space; faint hairline only as a baseline rail or inside dense tables; never a single coloured card edge

motion3 items

duration: 520ms
easing: cubic-bezier(0.16, 1, 0.3, 1)
philosophy: the wet front advances; the settled state is the default and renders with no JavaScript, motion reveals sections as the rail advances, respects prefers-reduced-motion

rules

composition

Mount every screen on one continuous register rail read left-to-right like an unrolled handscroll; divide sections with the luminous wet seam, not boxes. Dark wet-stone ground throughout.

hierarchy

Tall condensed all-caps Archivo display drives hierarchy by scale against warm Newsreader body and wide-tracked mono marginalia; the wet-front silver is the single brightest pigment.

density

Curatorial and asymmetric; generous gutters, isolated controls, register-style metadata in mono — never a dense admin grid.

signature

The bleed front: a luminous wet seam (hard pale line + downward celadon granulation halo) divides every station and registration ticks ride along it; the same wet-front leading edge terminates every progress fill, and the dried iron-oxide tideline is the one recorded warm stain.

layout

grid

Desktop is a register rail: a continuous baseline with evenly registered stations and ticks, content read left to right; the dashboard pairs a 248px rail sidebar with a fluid canvas. Tablet relaxes the columns; mobile becomes one vertical scroll of the scroll.

whitespace

Whitespace is the damp margin around the advancing front; gutters stay generous and the seam's bleed-halo is given room to breathe below each divide.

density

curatorial

responsive

Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 so they never overflow; mobile stacks to one column and hides the rail sidebar.

breakpoints

desktop: >=1100px
tablet: 700-1099px
mobile: <700px

guidance

Keep the dark wet-stone ground and let the luminous wet seam carry division and hierarchy.
Mount content on the register rail and read it left to right; let registration ticks mark the stations.
Use the three inks like highlighters: wet-front silver for the active edge, celadon for structure and verified states, iron-oxide for the one warm tideline note.
Terminate progress and advance indicators with the glowing wet-front leading edge so data carries the signature.
Restyle every form control with the damp-paper baseline-underline system; keep the top nav open across the header.

avoid

Do not revert to a bone-ivory ground, a held-open void column, radial smoke plumes, or a per-card brush-bar edge.
Do not use an oversized italic literary serif headline; the display is tall condensed Archivo.
Do not let the three inks become surface fields; keep them as highlighter-like marks on the dark ground.
Do not box the nav into a floating pill, nest cards, or stamp a single coloured edge on a card.
Do not centre everything or fill every cell into a dense admin grid.

imagery

pairs with

suiboku

summary

Monochrome gestural sumi ink-wash inverted onto a dark wet-stone ground: a single luminous wet tide-line / bleed front advances across a near-black field, dry-brush granulation along its leading edge. No colour enters the imagery; the brightest passage is the pale wet seam, not the paper.

subjects

an advancing wet bleed-front across dark stonea single tide-line receding on damp papergranulation pooling at an ink boundarya calligraphic gesture caught mid-bleedsmoke threading off a wet stroke

usage

Hero and feature imagery are full-frame inverted suiboku plates where a luminous wet front sweeps diagonally across a dark field, the dark corners reserved for overlay text; the landing hero is a swappable background-image: var(--hero-image).

katagami spec

# Tidemark

## Philosophy

An ink studio for conservators reading the wet front. A reimagination of the calligraphic fine-art spread brief, conceived independently: the screen is not a static literary spread held open by voids but a continuous rail the handscroll is unrolled along, on a dark wet-stone ground across which one luminous tide-line advances. Ink is watched as a moving wet front, not laid as a resting plate.

### Values

- Read ink as a moving wet front: the live boundary where saturation meets dry fiber is the subject, not a settled plate.
- Make the rail the spine: every screen is mounted left-to-right like an unrolled handscroll on one registered baseline.
- Let the luminous wet seam carry hierarchy and division — a tide-line, never a box or a card edge.
- Record what the ink does: granulation, pooling, and the dried iron tideline are the data the studio keeps.

### Anti-Values

- Avoid the bone-ivory museum spread and the negative-space void column; this language takes the dark ground and the advancing gesture instead.
- Avoid radial smoke plumes behind plates and a single brush-bar edge per card; the seam and the rail do that work.
- Avoid an oversized italic literary serif masthead; the display is a tall condensed grotesque.
- Avoid centred symmetry and dense admin grids; the rail reads in one asymmetric sweep.

### Visual Character

- A dark wet-stone ground (#11130F) — damp paper one step up — with a tall all-caps condensed Archivo display set against warm Newsreader body and wide-tracked mono marginalia.
- Sections are divided by a luminous wet seam: a hard pale tide-line at the top with a celadon granulation halo bleeding downward into the damp surface, register ticks riding along it.
- The layout is a register rail — a continuous baseline with stations and ticks, read left to right like a handscroll, collapsing to a single vertical scroll on mobile.
- Data inherits the mechanic: every progress fill ends in a glowing wet-front leading edge; the dried iron-oxide tideline is the one warm stain the system records permanently.
- Damp-paper panels carry faint dry-brush striation and are separated by the seam and measured space, never by keylines or a single coloured edge.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#11130F` |
| surface | `#181A15` |
| surface_2 | `#20231C` |
| text | `#ECE8DA` |
| muted | `#8F9183` |
| border | `#2B2E25` |
| accent | `#D6E6E2` |
| on_accent | `#11130F` |
| accent_2 | `#6FB3A0` |
| on_accent_2 | `#11130F` |
| accent_3 | `#C2724A` |
| on_accent_3 | `#11130F` |
| success | `#6FB3A0` |
| warning | `#C9962F` |
| error | `#B4503C` |
| info | `#5E8FA6` |

### Typography

- **Base Size**: 17px
- **Body Font**: Newsreader
- **Heading Font**: Archivo
- **Mono Font**: Spline Sans Mono
- **Heading Weight**: 800
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Scale Ratio**: 1.3
- **Line Height**: 1.62
- **Display Stretch**: 78%
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

- **None**: 0
- **Sm**: 0
- **Md**: 0
- **Lg**: 0
- **Full**: 9999px

### Shadows

- **Sm**: 0 -1px 0 rgba(214,230,226,0.25)
- **Md**: 0 14px 40px rgba(0,0,0,0.45)
- **Lg**: 0 -1px 0 rgba(214,230,226,0.35), 0 28px 70px rgba(0,0,0,0.55)

### Surfaces

- **Treatment**: damp-paper
- **Card Style**: dark damp-paper panels carrying faint dry-brush striation, separated by a luminous wet seam rather than keylines
- **Bg Pattern**: dry-brush-striation

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: structure comes from the luminous wet seam and measured space; faint hairline only as a baseline rail or inside dense tables; never a single coloured card edge

### Motion

- **Duration**: 520ms
- **Easing**: cubic-bezier(0.16, 1, 0.3, 1)
- **Philosophy**: the wet front advances; the settled state is the default and renders with no JavaScript, motion reveals sections as the rail advances, respects prefers-reduced-motion

## Rules

### Composition

Mount every screen on one continuous register rail read left-to-right like an unrolled handscroll; divide sections with the luminous wet seam, not boxes. Dark wet-stone ground throughout.

### Hierarchy

Tall condensed all-caps Archivo display drives hierarchy by scale against warm Newsreader body and wide-tracked mono marginalia; the wet-front silver is the single brightest pigment.

### Density

Curatorial and asymmetric; generous gutters, isolated controls, register-style metadata in mono — never a dense admin grid.

### Signature

The bleed front: a luminous wet seam (hard pale line + downward celadon granulation halo) divides every station and registration ticks ride along it; the same wet-front leading edge terminates every progress fill, and the dried iron-oxide tideline is the one recorded warm stain.

## Layout

### Grid

Desktop is a register rail: a continuous baseline with evenly registered stations and ticks, content read left to right; the dashboard pairs a 248px rail sidebar with a fluid canvas. Tablet relaxes the columns; mobile becomes one vertical scroll of the scroll.

### Whitespace

Whitespace is the damp margin around the advancing front; gutters stay generous and the seam's bleed-halo is given room to breathe below each divide.

### Density

curatorial

### Responsive

Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 so they never overflow; mobile stacks to one column and hides the rail sidebar.

### Breakpoints

- **Desktop**: >=1100px
- **Tablet**: 700-1099px
- **Mobile**: <700px

## Guidance

### Do

- Keep the dark wet-stone ground and let the luminous wet seam carry division and hierarchy.
- Mount content on the register rail and read it left to right; let registration ticks mark the stations.
- Use the three inks like highlighters: wet-front silver for the active edge, celadon for structure and verified states, iron-oxide for the one warm tideline note.
- Terminate progress and advance indicators with the glowing wet-front leading edge so data carries the signature.
- Restyle every form control with the damp-paper baseline-underline system; keep the top nav open across the header.

### Don't

- Do not revert to a bone-ivory ground, a held-open void column, radial smoke plumes, or a per-card brush-bar edge.
- Do not use an oversized italic literary serif headline; the display is tall condensed Archivo.
- Do not let the three inks become surface fields; keep them as highlighter-like marks on the dark ground.
- Do not box the nav into a floating pill, nest cards, or stamp a single coloured edge on a card.
- Do not centre everything or fill every cell into a dense admin grid.

### Accessibility

Body text 17px in pale wash over wet-stone at AA-plus contrast; focus states use a 2px wet-front underline/ring; status is carried by both pill colour and label text; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

suiboku

### Summary

Monochrome gestural sumi ink-wash inverted onto a dark wet-stone ground: a single luminous wet tide-line / bleed front advances across a near-black field, dry-brush granulation along its leading edge. No colour enters the imagery; the brightest passage is the pale wet seam, not the paper.

### Subjects

- an advancing wet bleed-front across dark stone
- a single tide-line receding on damp paper
- granulation pooling at an ink boundary
- a calligraphic gesture caught mid-bleed
- smoke threading off a wet stroke

### Usage

Hero and feature imagery are full-frame inverted suiboku plates where a luminous wet front sweeps diagonally across a dark field, the dark corners reserved for overlay text; the landing hero is a swappable background-image: var(--hero-image).

DESIGN.md

---
version: "alpha"
name: "Tidemark"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#11130F"
  surface: "#181A15"
  surface_2: "#20231C"
  text: "#ECE8DA"
  muted: "#8F9183"
  border: "#2B2E25"
  accent: "#D6E6E2"
  on_accent: "#11130F"
  accent_2: "#6FB3A0"
  on_accent_2: "#11130F"
  accent_3: "#C2724A"
  on_accent_3: "#11130F"
  success: "#6FB3A0"
  warning: "#C9962F"
  error: "#B4503C"
  info: "#5E8FA6"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.334rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.796rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
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-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-on_accent_2:
    backgroundColor: "{colors.on_accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-on_accent_3:
    backgroundColor: "{colors.on_accent_3}"
  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.md}"
    padding: "12px"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "16px"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Tidemark

## Overview

An ink studio for conservators reading the wet front. A reimagination of the calligraphic fine-art spread brief, conceived independently: the screen is not a static literary spread held open by voids but a continuous rail the handscroll is unrolled along, on a dark wet-stone ground across which one luminous tide-line advances. Ink is watched as a moving wet front, not laid as a resting plate.

### Values

- Read ink as a moving wet front: the live boundary where saturation meets dry fiber is the subject, not a settled plate.
- Make the rail the spine: every screen is mounted left-to-right like an unrolled handscroll on one registered baseline.
- Let the luminous wet seam carry hierarchy and division — a tide-line, never a box or a card edge.
- Record what the ink does: granulation, pooling, and the dried iron tideline are the data the studio keeps.

### Anti-Values

- Avoid the bone-ivory museum spread and the negative-space void column; this language takes the dark ground and the advancing gesture instead.
- Avoid radial smoke plumes behind plates and a single brush-bar edge per card; the seam and the rail do that work.
- Avoid an oversized italic literary serif masthead; the display is a tall condensed grotesque.
- Avoid centred symmetry and dense admin grids; the rail reads in one asymmetric sweep.

### Visual Character

- A dark wet-stone ground (#11130F) — damp paper one step up — with a tall all-caps condensed Archivo display set against warm Newsreader body and wide-tracked mono marginalia.
- Sections are divided by a luminous wet seam: a hard pale tide-line at the top with a celadon granulation halo bleeding downward into the damp surface, register ticks riding along it.
- The layout is a register rail — a continuous baseline with stations and ticks, read left to right like a handscroll, collapsing to a single vertical scroll on mobile.
- Data inherits the mechanic: every progress fill ends in a glowing wet-front leading edge; the dried iron-oxide tideline is the one warm stain the system records permanently.
- Damp-paper panels carry faint dry-brush striation and are separated by the seam and measured space, never by keylines or a single coloured edge.

## 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 | `#11130F` |
| surface | `#181A15` |
| surface_2 | `#20231C` |
| text | `#ECE8DA` |
| muted | `#8F9183` |
| border | `#2B2E25` |
| accent | `#D6E6E2` |
| on_accent | `#11130F` |
| accent_2 | `#6FB3A0` |
| on_accent_2 | `#11130F` |
| accent_3 | `#C2724A` |
| on_accent_3 | `#11130F` |
| success | `#6FB3A0` |
| warning | `#C9962F` |
| error | `#B4503C` |
| info | `#5E8FA6` |

## Typography

- **Headline-Lg**: Archivo, 2.334rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.796rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader, 17px, weight 400, line-height 1.62.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Grid

Desktop is a register rail: a continuous baseline with evenly registered stations and ticks, content read left to right; the dashboard pairs a 248px rail sidebar with a fluid canvas. Tablet relaxes the columns; mobile becomes one vertical scroll of the scroll.

### Whitespace

Whitespace is the damp margin around the advancing front; gutters stay generous and the seam's bleed-halo is given room to breathe below each divide.

### Density

curatorial

### Responsive

Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 so they never overflow; mobile stacks to one column and hides the rail sidebar.

### Breakpoints

- **Desktop**: >=1100px
- **Tablet**: 700-1099px
- **Mobile**: <700px

## Elevation & Depth

### Shadows

- **Sm**: 0 -1px 0 rgba(214,230,226,0.25)
- **Md**: 0 14px 40px rgba(0,0,0,0.45)
- **Lg**: 0 -1px 0 rgba(214,230,226,0.35), 0 28px 70px rgba(0,0,0,0.55)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: damp-paper
- **Card Style**: dark damp-paper panels carrying faint dry-brush striation, separated by a luminous wet seam rather than keylines
- **Bg Pattern**: dry-brush-striation

### Borders

- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: structure comes from the luminous wet seam and measured space; faint hairline only as a baseline rail or inside dense tables; never a single coloured card edge

## Components

### Composition

Mount every screen on one continuous register rail read left-to-right like an unrolled handscroll; divide sections with the luminous wet seam, not boxes. Dark wet-stone ground throughout.

### Hierarchy

Tall condensed all-caps Archivo display drives hierarchy by scale against warm Newsreader body and wide-tracked mono marginalia; the wet-front silver is the single brightest pigment.

### Density

Curatorial and asymmetric; generous gutters, isolated controls, register-style metadata in mono — never a dense admin grid.

### Signature

The bleed front: a luminous wet seam (hard pale line + downward celadon granulation halo) divides every station and registration ticks ride along it; the same wet-front leading edge terminates every progress fill, and the dried iron-oxide tideline is the one recorded warm stain.

## 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-019ef896-82fa-7362-9fa6-adc788cbe98a/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 Keep the dark wet-stone ground and let the luminous wet seam carry division and hierarchy.
- Do Mount content on the register rail and read it left to right; let registration ticks mark the stations.
- Do Use the three inks like highlighters: wet-front silver for the active edge, celadon for structure and verified states, iron-oxide for the one warm tideline note.
- Do Terminate progress and advance indicators with the glowing wet-front leading edge so data carries the signature.
- Do Restyle every form control with the damp-paper baseline-underline system; keep the top nav open across the header.
- Don't Do not revert to a bone-ivory ground, a held-open void column, radial smoke plumes, or a per-card brush-bar edge.
- Don't Do not use an oversized italic literary serif headline; the display is tall condensed Archivo.
- Don't Do not let the three inks become surface fields; keep them as highlighter-like marks on the dark ground.
- Don't Do not box the nav into a floating pill, nest cards, or stamp a single coloured edge on a card.
- Don't Do not centre everything or fill every cell into a dense admin grid.

### Accessibility

Body text 17px in pale wash over wet-stone at AA-plus contrast; focus states use a 2px wet-front underline/ring; status is carried by both pill colour and label text; motion respects prefers-reduced-motion and the settled state renders with no JavaScript.

## Imagery Direction

### Pairs With

suiboku

### Summary

Monochrome gestural sumi ink-wash inverted onto a dark wet-stone ground: a single luminous wet tide-line / bleed front advances across a near-black field, dry-brush granulation along its leading edge. No colour enters the imagery; the brightest passage is the pale wet seam, not the paper.

### Subjects

- an advancing wet bleed-front across dark stone
- a single tide-line receding on damp paper
- granulation pooling at an ink boundary
- a calligraphic gesture caught mid-bleed
- smoke threading off a wet stroke

### Usage

Hero and feature imagery are full-frame inverted suiboku plates where a luminous wet front sweeps diagonally across a dark field, the dark corners reserved for overlay text; the landing hero is a swappable background-image: var(--hero-image).

shadcn/ui theme

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tidemark",
  "type": "registry:theme",
  "title": "Tidemark shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#11130F",
      "foreground": "#ECE8DA",
      "card": "#181A15",
      "card-foreground": "#ECE8DA",
      "popover": "#181A15",
      "popover-foreground": "#ECE8DA",
      "primary": "#ECE8DA",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8F9183",
      "muted-foreground": "#ECE8DA",
      "accent": "#D6E6E2",
      "accent-foreground": "#111111",
      "destructive": "#B4503C",
      "border": "#2B2E25",
      "input": "#2B2E25",
      "ring": "#D6E6E2",
      "chart-1": "#ECE8DA",
      "chart-2": "#f4f4f5",
      "chart-3": "#D6E6E2",
      "chart-4": "#6FB3A0",
      "chart-5": "#C9962F",
      "sidebar": "#181A15",
      "sidebar-foreground": "#ECE8DA",
      "sidebar-primary": "#ECE8DA",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5E8FA6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2B2E25",
      "sidebar-ring": "#D6E6E2",
      "radius": "0"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#ECE8DA",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#D6E6E2",
      "accent-foreground": "#111111",
      "destructive": "#B4503C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#D6E6E2",
      "chart-1": "#ECE8DA",
      "chart-2": "#f4f4f5",
      "chart-3": "#D6E6E2",
      "chart-4": "#6FB3A0",
      "chart-5": "#C9962F",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#ECE8DA",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#D6E6E2",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#D6E6E2",
      "radius": "0"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef896-82fa-7362-9fa6-adc788cbe98a",
    "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_2",
        "accent_3",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "on_accent_2",
        "on_accent_3",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "display_stretch",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```

in the wild

embodiments

DESIGN.md

at a glance

Typography

headline-lgArchivo · 37px · 700

The quick brown fox jumps

headline-mdArchivo · 29px · 600

The quick brown fox jumps

body-mdNewsreader · 17px · 400

The quick brown fox jumps

label-mdSpline Sans Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

needs agent-authored kitcompatibility fallback

shadcn compatibility only

The generated theme variables are available, but the polished shadcn component recipes and shots have not been authored by the Katagami agent yet.

fallbackprimitives render

Compatibility proof

Local shadcn-style primitives accept the generated theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

recommendedcompatibility fallback

DESIGN.md with shadcn

Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.

advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #11130F;
  --foreground: #ECE8DA;
  --card: #181A15;
  --card-foreground: #ECE8DA;
  --popover: #181A15;
  --popover-foreground: #ECE8DA;
  --primary: #ECE8DA;
  --primary-foreground: #111111;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #8F9183;
  --muted-foreground: #ECE8DA;
  --accent: #D6E6E2;
  --accent-foreground: #111111;
  --destructive: #B4503C;
  --border: #2B2E25;
  --input: #2B2E25;
  --ring: #D6E6E2;
  --chart-1: #ECE8DA;
  --chart-2: #f4f4f5;
  --chart-3: #D6E6E2;
  --chart-4: #6FB3A0;
  --chart-5: #C9962F;
  --sidebar: #181A15;
  --sidebar-foreground: #ECE8DA;
  --sidebar-primary: #ECE8DA;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #5E8FA6;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #2B2E25;
  --sidebar-ring: #D6E6E2;
  --radius: 0;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #ECE8DA;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #D6E6E2;
  --accent-foreground: #111111;
  --destructive: #B4503C;
  --border: #303642;
  --input: #303642;
  --ring: #D6E6E2;
  --chart-1: #ECE8DA;
  --chart-2: #f4f4f5;
  --chart-3: #D6E6E2;
  --chart-4: #6FB3A0;
  --chart-5: #C9962F;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #ECE8DA;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #D6E6E2;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #D6E6E2;
  --radius: 0;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function TidemarkShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Tidemark</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONstored + verified

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tidemark",
  "type": "registry:theme",
  "title": "Tidemark",
  "description": "An ink studio for reading the wet front. Dark wet-stone ground (#11130F) across which one luminous wet-front silver advances; the signature surface treatment is a hard luminous seam with a celadon bleed-halo, never a box or a card edge. Condensed Archivo display, Newsreader body, Spline Sans Mono metadata. Hard 0 corners; full pills only on ticks and status dots.",
  "visualProfile": {
    "mode": "dark",
    "ground": "wet slate-green-black (#11130F) — the wet stone the handscroll lies on; damp-paper surfaces one step up carry faint dry-brush striation",
    "material": "damp-paper panels separated by a luminous wet seam (hard pale line + downward celadon granulation halo), not by keylines or accent edges",
    "radius": "0px everywhere (cut paper / mounted scroll); 9999px only on registration ticks, status dots and toggles",
    "borders": "structure is the seam and measured space, not outlines; faint #2B2E25 hairline only as a baseline rail or inside dense tables",
    "typography": "Archivo condensed (font-stretch 78%, weight 800) all-caps display at poster scale; Newsreader humanist serif body; Spline Sans Mono wide-tracked uppercase metadata with celadon kickers",
    "accentUse": "three inks like highlighters on dark — wet-front silver primary, celadon for structure/verified states, iron-oxide for the one warm tideline note",
    "shadow": "a soft wet-bloom under the seam (0 14px 40px black + a 1px luminous top edge); no neutral drop shadows on cards"
  },
  "cssVars": {
    "theme": {
      "font-sans": "Newsreader, Georgia, serif",
      "font-serif": "Newsreader, Georgia, serif",
      "font-mono": "Spline Sans Mono, ui-monospace, monospace",
      "font-display": "Archivo, Helvetica Neue, sans-serif",
      "font-heading": "Archivo, Helvetica Neue, sans-serif",
      "radius": "0px"
    },
    "light": {
      "background": "#11130F",
      "foreground": "#ECE8DA",
      "card": "#181A15",
      "card-foreground": "#ECE8DA",
      "popover": "#181A15",
      "popover-foreground": "#ECE8DA",
      "primary": "#D6E6E2",
      "primary-foreground": "#11130F",
      "secondary": "#6FB3A0",
      "secondary-foreground": "#11130F",
      "muted": "#20231C",
      "muted-foreground": "#8F9183",
      "accent": "#6FB3A0",
      "accent-foreground": "#11130F",
      "destructive": "#B4503C",
      "destructive-foreground": "#ECE8DA",
      "success": "#6FB3A0",
      "warning": "#C9962F",
      "border": "#2B2E25",
      "input": "#2B2E25",
      "ring": "#D6E6E2",
      "chart-1": "#D6E6E2",
      "chart-2": "#6FB3A0",
      "chart-3": "#C2724A",
      "chart-4": "#5E8FA6",
      "chart-5": "#C9962F",
      "radius": "0px"
    },
    "dark": {
      "background": "#11130F",
      "foreground": "#ECE8DA",
      "card": "#181A15",
      "card-foreground": "#ECE8DA",
      "popover": "#181A15",
      "popover-foreground": "#ECE8DA",
      "primary": "#D6E6E2",
      "primary-foreground": "#11130F",
      "secondary": "#6FB3A0",
      "secondary-foreground": "#11130F",
      "muted": "#20231C",
      "muted-foreground": "#8F9183",
      "accent": "#6FB3A0",
      "accent-foreground": "#11130F",
      "destructive": "#B4503C",
      "destructive-foreground": "#ECE8DA",
      "success": "#6FB3A0",
      "warning": "#C9962F",
      "border": "#2B2E25",
      "input": "#2B2E25",
      "ring": "#D6E6E2",
      "chart-1": "#D6E6E2",
      "chart-2": "#6FB3A0",
      "chart-3": "#C2724A",
      "chart-4": "#5E8FA6",
      "chart-5": "#C9962F",
      "radius": "0px"
    }
  }
}

component recipescompatibility fallback

# Tidemark shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef896-82fa-7362-9fa6-adc788cbe98a`
Slug: `tidemark`

## Intent

An ink studio for conservators reading the wet front. A reimagination of the calligraphic fine-art spread brief, conceived independently: the screen is not a static literary spread held open by voids but a continuous rail the handscroll is unrolled along, on a dark wet-stone ground across which one luminous tide-line advances. Ink is watched as a moving wet front, not laid as a resting plate.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

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

## Token cues

Colors:

{
  "bg": "#11130F",
  "surface": "#181A15",
  "surface_2": "#20231C",
  "text": "#ECE8DA",
  "muted": "#8F9183",
  "border": "#2B2E25",
  "accent": "#D6E6E2",
  "on_accent": "#11130F",
  "accent_2": "#6FB3A0",
  "on_accent_2": "#11130F",
  "accent_3": "#C2724A",
  "on_accent_3": "#11130F",
  "success": "#6FB3A0",
  "warning": "#C9962F",
  "error": "#B4503C",
  "info": "#5E8FA6"
}

Typography:

{
  "base_size": "17px",
  "body_font": "Newsreader",
  "heading_font": "Archivo",
  "mono_font": "Spline Sans Mono",
  "heading_weight": 800,
  "heading_transform": "uppercase",
  "letter_spacing": "-0.02em",
  "scale_ratio": 1.3,
  "line_height": 1.62,
  "display_stretch": "78%",
  "google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap"
}

## Visual character to preserve

- A dark wet-stone ground (#11130F) — damp paper one step up — with a tall all-caps condensed Archivo display set against warm Newsreader body and wide-tracked mono marginalia.
- Sections are divided by a luminous wet seam: a hard pale tide-line at the top with a celadon granulation halo bleeding downward into the damp surface, register ticks riding along it.
- The layout is a register rail — a continuous baseline with stations and ticks, read left to right like a handscroll, collapsing to a single vertical scroll on mobile.
- Data inherits the mechanic: every progress fill ends in a glowing wet-front leading edge; the dried iron-oxide tideline is the one warm stain the system records permanently.
- Damp-paper panels carry faint dry-brush striation and are separated by the seam and measured space, never by keylines or a single coloured edge.

## ShadSync visual profile

{
  "family": "paper-collage",
  "material": "paper",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": true,
  "stickerBadges": false,
  "motion": "still",
  "density": "dense",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/tidemark/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: Keep the dark wet-stone ground and let the luminous wet seam carry division and hierarchy.; Mount content on the register rail and read it left to right; let registration ticks mark the stations.; Use the three inks like highlighters: wet-front silver for the active edge, celadon for structure and verified states, iron-oxide for the one warm tideline note.; Terminate progress and advance indicators with the glowing wet-front leading edge so data carries the signature.; Restyle every form control with the damp-paper baseline-underline system; keep the top nav open across the header.
- Do not: Do not revert to a bone-ivory ground, a held-open void column, radial smoke plumes, or a per-card brush-bar edge.; Do not use an oversized italic literary serif headline; the display is tall condensed Archivo.; Do not let the three inks become surface fields; keep them as highlighter-like marks on the dark ground.; Do not box the nav into a floating pill, nest cards, or stamp a single coloured edge on a card.; Do not centre everything or fill every cell into a dense admin grid.

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function TidemarkShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Tidemark</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "grid": "Desktop is a register rail: a continuous baseline with evenly registered stations and ticks, content read left to right; the dashboard pairs a 248px rail sidebar with a fluid canvas. Tablet relaxes the columns; mobile becomes one vertical scroll of the scroll.",
  "whitespace": "Whitespace is the damp margin around the advancing front; gutters stay generous and the seam's bleed-halo is given room to breathe below each divide.",
  "density": "curatorial",
  "responsive": "Full-bleed hero spans 100vw x 100svh; contained content caps and centres on ultra-wide; grids use minmax(0,1fr) and min-width:0 so they never overflow; mobile stacks to one column and hides the rail sidebar.",
  "breakpoints": {
    "desktop": ">=1100px",
    "tablet": "700-1099px",
    "mobile": "<700px"
  }
}

preview shotscompatibility fallback

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-019ef896-82fa-7362-9fa6-adc788cbe98a",
    "name": "Tidemark",
    "slug": "tidemark"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [
    "A dark wet-stone ground (#11130F) — damp paper one step up — with a tall all-caps condensed Archivo display set against warm Newsreader body and wide-tracked mono marginalia.",
    "Sections are divided by a luminous wet seam: a hard pale tide-line at the top with a celadon granulation halo bleeding downward into the damp surface, register ticks riding along it.",
    "The layout is a register rail — a continuous baseline with stations and ticks, read left to right like a handscroll, collapsing to a single vertical scroll on mobile.",
    "Data inherits the mechanic: every progress fill ends in a glowing wet-front leading edge; the dried iron-oxide tideline is the one warm stain the system records permanently.",
    "Damp-paper panels carry faint dry-brush striation and are separated by the seam and measured space, never by keylines or a single coloured edge."
  ],
  "visualProfile": {
    "family": "paper-collage",
    "material": "paper",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": true,
    "stickerBadges": false,
    "motion": "still",
    "density": "dense",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Tidemark launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "Keep the dark wet-stone ground and let the luminous wet seam carry division and hierarchy.",
      "Mount content on the register rail and read it left to right; let registration ticks mark the stations.",
      "Use the three inks like highlighters: wet-front silver for the active edge, celadon for structure and verified states, iron-oxide for the one warm tideline note.",
      "Terminate progress and advance indicators with the glowing wet-front leading edge so data carries the signature.",
      "Restyle every form control with the damp-paper baseline-underline system; keep the top nav open across the header."
    ],
    "dont": [
      "Do not revert to a bone-ivory ground, a held-open void column, radial smoke plumes, or a per-card brush-bar edge.",
      "Do not use an oversized italic literary serif headline; the display is tall condensed Archivo.",
      "Do not let the three inks become surface fields; keep them as highlighter-like marks on the dark ground.",
      "Do not box the nav into a floating pill, nest cards, or stamp a single coloured edge on a card.",
      "Do not centre everything or fill every cell into a dense admin grid."
    ]
  }
}

built with

Art styleSuibokusumi ink washView art style

Palette

remix lane

try a remix

Keep Tidemark and swap a palette and an art style onto it. The landing & dashboard recolor live.

UI language · fixed

Tidemark

Palette

Art style

Landing PageTidemark · Transformative teal + Adaptive violet · Cathode Ray

live preview · recolored + filled

lineage

Family

Evolved from

LampblackPublished

More like this

Tidemarkshares dark-mode Tidelineshares dark-mode Lampblackshares sumi-ink · ink-wash Knockoutshares condensed-grotesque Galleynearest in taste Inkstonenearest in taste