Foreshore

# Foreshore

## Philosophy

A coastal light-and-tide language on a deep azure-night ground. The day begins at the waterline: warm melon marks the moment that matters, cool azure marks the precise thing you point to, and the only structural mark is the meridian — a thin horizon line of light where warm dawn meets cool dusk. Where another language draws a grey border, Foreshore draws a line of light.

### Values

- rare, structural colour over dark water
- depth from light and translucency, never borders
- two-light discipline — warm moment, cool cue
- calm, legible, high-contrast hierarchy on a dark ground
- stratified horizon-band composition

### Anti-Values

- white or soft-white default grounds
- grey structural borders, stripes, or single accent edges
- a third bright hue or rainbow decoration
- dotted, gridded, or notebook backgrounds
- generic SaaS dashboard density

### Visual Character

- Deep azure-night ground (#0A1726) lit by two faint radial blooms from a low horizon; never white.
- Translucent slate-azure glass panels separated by opacity and soft shadow — no outline, no rail.
- The meridian: a warm-to-cool gradient line with a soft bloom, used wherever a divider or border would be.
- The dawn well: a melon orb rising over a meridian with the reading floated below — the hero device.
- Melon for first/last light, the warm well, rising progress and the current row; azure for selection, focus, high-water cues.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A1726` |
| bg_2 | `#0E2034` |
| surface | `#13243A` |
| surface_2 | `#172B45` |
| text | `#EAF1FA` |
| muted | `#93A6BE` |
| faint | `#5C7290` |
| border | `#1E3450` |
| accent | `#FF8A5C` |
| accent_soft | `#FFB496` |
| accent_deep | `#E8623A` |
| azure | `#43B4FF` |
| azure_deep | `#1E86D6` |
| on_accent | `#0A1726` |
| on_azure | `#06243C` |
| primary | `#FF8A5C` |
| secondary | `#43B4FF` |
| success | `#3FB58A` |
| warning | `#E0A53C` |
| error | `#E5675A` |
| info | `#43B4FF` |
| meridian | `linear-gradient(90deg, rgba(255,138,92,0) 0%, rgba(255,138,92,.85) 22%, rgba(255,180,150,.95) 40%, rgba(160,200,230,.7) 60%, rgba(67,180,255,.9) 78%, rgba(67,180,255,0) 100%)` |

### Typography

- **Base Size**: 17px
- **Body Font**: Sora
- **Heading Font**: Spectral
- **Mono Font**: Spline Sans Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.015em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Sora:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap

### Radii

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

### Shadows

- **Sm**: 0 10px 30px rgba(3,10,20,.45)
- **Md**: 0 26px 70px rgba(3,10,20,.55)
- **Warm**: 0 18px 60px rgba(255,138,92,.20)
- **Cool**: 0 14px 44px rgba(67,180,255,.22)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64]

### Surfaces

- **Bg Pattern**: plain azure-night with two faint radial blooms from a low horizon; no dots, grid, or notebook texture
- **Card Style**: translucent slate-azure glass with broad radii and soft downward shadow; an optional meridian tideline along the base; no border
- **Treatment**: dark water planes, translucent glass panels, sparse melon or azure light kept rare and structural

### Borders

- **Style**: none as structure; depth from opacity, shadow, and the meridian
- **Default Width**: 0
- **Accent Width**: 2px
- **Character**: no decorative or structural borders; the only 2px outline is the azure focus ring; dividers are the warm-to-cool meridian gradient, never a grey rule

### Motion

- **Duration**: 200ms
- **Easing**: cubic-bezier(0.2, 0.8, 0.2, 1)
- **Philosophy**: quiet coastal polish: controls lift 2px, progress rises like a tide, reveals fade up; the settled state is the default and renders with no JS; respects prefers-reduced-motion

## Rules

### Composition

Stack content in stratified horizon bands on a deep azure-night ground; figures and panels rest on meridians like readings taken at a waterline, with a full-viewport dawn hero and glass cards that orbit the day's moment rather than filling a 12-column grid.

### Hierarchy

Spectral serif display sits in a line of light; Sora body at 17px stays high-contrast on the dark ground; mono carries readings and metadata. The warm melon well introduces the moment; azure marks the interactive path.

### Density

Relaxed consumer density with 22-32px panel padding, wide gaps, and short readable clusters; never an enterprise grid.

### Signature

- Meridian dividers: a warm-to-cool gradient line with a soft bloom, used wherever a border or rule would be.
- Dawn well: a melon orb rising over a meridian with the reading floated below — the hero device.
- Tideline: a soft meridian along the base of cards and panels for depth without an edge.
- Tide-fill progress: a melon fill rising across a bar with small azure checkpoints.
- Warm now-row, cool cue: the current entry warms to melon; selection and focus go azure.

## Layout

### Grid

Stratified horizon bands in a contained column (max ~1180-1240px); panels span by importance rather than equal dashboard tiles; collapses to a single column on mobile.

### Whitespace

32-64px outer margins on large screens; at least 16-24px internal gaps so each lit moment has quiet dark space around it.

### Density

relaxed

### Responsive

Renders well from ~390px mobile to 2560px+ ultra-wide; single column on mobile with non-essential nav hidden; only the full-bleed hero spans 100vw on ultra-wide.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px

## Guidance

### Do

- Use melon for first/last light, the warm well, progress, and the day's key moment.
- Use azure for selection, focus rings, high-water cues, and precise secondary actions.
- Keep the ground azure-night with translucent glass panels; separate by light and shadow.
- Divide with a meridian, never a grey rule.

### Don't

- Add dotted, grid, notebook, stripe, or confetti backgrounds.
- Introduce a third bright hue beyond melon and azure (semantic states excepted, kept quiet).
- Draw grey structural borders, card stripes, or single accent edges.
- Default to a white or soft-white ground, or present a generic analytics dashboard.

### Accessibility

High-contrast #EAF1FA text on the azure-night ground and on glass panels; explicit azure focus rings on every interactive control; all form controls fully styled with no browser defaults; colour is never the only signal — the now-row, progress and selection also carry text and shape; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

opaline-soft-diffusion

### Summary

Subjects emerge from a luminous field with no hard outlines, edges dissolving into frosted-glass diffusion; here the field is dark — a melon dawn orb over still azure-night water, the meridian traced where warm light meets a cool reflection.

### Subjects

- a dawn orb rising at a horizon meridian
- still coastal water before sunrise
- the tideline and wrack at first light
- a backlit coastal observer or instrument

### Usage

One full-bleed hero per landing; warm bloom on one side, a single clean azure rim-light on the other; dark luminous ground, never white; calm, premium, airy.

---
version: "alpha"
name: "Foreshore"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0A1726"
  bg_2: "#0E2034"
  surface: "#13243A"
  surface_2: "#172B45"
  text: "#EAF1FA"
  muted: "#93A6BE"
  faint: "#5C7290"
  border: "#1E3450"
  accent: "#FF8A5C"
  accent_soft: "#FFB496"
  accent_deep: "#E8623A"
  azure: "#43B4FF"
  azure_deep: "#1E86D6"
  on_accent: "#0A1726"
  on_azure: "#06243C"
  primary: "#FF8A5C"
  secondary: "#43B4FF"
  success: "#3FB58A"
  warning: "#E0A53C"
  error: "#E5675A"
  info: "#43B4FF"
typography:
  headline-lg:
    fontFamily: "Spectral"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.015em"
  headline-md:
    fontFamily: "Spectral"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.015em"
  body-md:
    fontFamily: "Sora"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.015em"
  label-md:
    fontFamily: "Spline Sans Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "14px"
  md: "22px"
  lg: "22px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_2:
    backgroundColor: "{colors.bg_2}"
  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-faint:
    backgroundColor: "{colors.faint}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-accent_deep:
    backgroundColor: "{colors.accent_deep}"
  color-reference-azure:
    backgroundColor: "{colors.azure}"
  color-reference-azure_deep:
    backgroundColor: "{colors.azure_deep}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-on_azure:
    backgroundColor: "{colors.on_azure}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  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.primary}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Foreshore

## Overview

A coastal light-and-tide language on a deep azure-night ground. The day begins at the waterline: warm melon marks the moment that matters, cool azure marks the precise thing you point to, and the only structural mark is the meridian — a thin horizon line of light where warm dawn meets cool dusk. Where another language draws a grey border, Foreshore draws a line of light.

### Values

- rare, structural colour over dark water
- depth from light and translucency, never borders
- two-light discipline — warm moment, cool cue
- calm, legible, high-contrast hierarchy on a dark ground
- stratified horizon-band composition

### Anti-Values

- white or soft-white default grounds
- grey structural borders, stripes, or single accent edges
- a third bright hue or rainbow decoration
- dotted, gridded, or notebook backgrounds
- generic SaaS dashboard density

### Visual Character

- Deep azure-night ground (#0A1726) lit by two faint radial blooms from a low horizon; never white.
- Translucent slate-azure glass panels separated by opacity and soft shadow — no outline, no rail.
- The meridian: a warm-to-cool gradient line with a soft bloom, used wherever a divider or border would be.
- The dawn well: a melon orb rising over a meridian with the reading floated below — the hero device.
- Melon for first/last light, the warm well, rising progress and the current row; azure for selection, focus, high-water cues.

## 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 | `#0A1726` |
| bg_2 | `#0E2034` |
| surface | `#13243A` |
| surface_2 | `#172B45` |
| text | `#EAF1FA` |
| muted | `#93A6BE` |
| faint | `#5C7290` |
| border | `#1E3450` |
| accent | `#FF8A5C` |
| accent_soft | `#FFB496` |
| accent_deep | `#E8623A` |
| azure | `#43B4FF` |
| azure_deep | `#1E86D6` |
| on_accent | `#0A1726` |
| on_azure | `#06243C` |
| primary | `#FF8A5C` |
| secondary | `#43B4FF` |
| success | `#3FB58A` |
| warning | `#E0A53C` |
| error | `#E5675A` |
| info | `#43B4FF` |

## Typography

- **Headline-Lg**: Spectral, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Spectral, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Sora, 17px, weight 400, line-height 1.5.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Grid

Stratified horizon bands in a contained column (max ~1180-1240px); panels span by importance rather than equal dashboard tiles; collapses to a single column on mobile.

### Whitespace

32-64px outer margins on large screens; at least 16-24px internal gaps so each lit moment has quiet dark space around it.

### Density

relaxed

### Responsive

Renders well from ~390px mobile to 2560px+ ultra-wide; single column on mobile with non-essential nav hidden; only the full-bleed hero spans 100vw on ultra-wide.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px

## Elevation & Depth

### Shadows

- **Sm**: 0 10px 30px rgba(3,10,20,.45)
- **Md**: 0 26px 70px rgba(3,10,20,.55)
- **Warm**: 0 18px 60px rgba(255,138,92,.20)
- **Cool**: 0 14px 44px rgba(67,180,255,.22)

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: plain azure-night with two faint radial blooms from a low horizon; no dots, grid, or notebook texture
- **Card Style**: translucent slate-azure glass with broad radii and soft downward shadow; an optional meridian tideline along the base; no border
- **Treatment**: dark water planes, translucent glass panels, sparse melon or azure light kept rare and structural

### Borders

- **Style**: none as structure; depth from opacity, shadow, and the meridian
- **Default Width**: 0
- **Accent Width**: 2px
- **Character**: no decorative or structural borders; the only 2px outline is the azure focus ring; dividers are the warm-to-cool meridian gradient, never a grey rule

## Components

### Composition

Stack content in stratified horizon bands on a deep azure-night ground; figures and panels rest on meridians like readings taken at a waterline, with a full-viewport dawn hero and glass cards that orbit the day's moment rather than filling a 12-column grid.

### Hierarchy

Spectral serif display sits in a line of light; Sora body at 17px stays high-contrast on the dark ground; mono carries readings and metadata. The warm melon well introduces the moment; azure marks the interactive path.

### Density

Relaxed consumer density with 22-32px panel padding, wide gaps, and short readable clusters; never an enterprise grid.

### Signature

- Meridian dividers: a warm-to-cool gradient line with a soft bloom, used wherever a border or rule would be.
- Dawn well: a melon orb rising over a meridian with the reading floated below — the hero device.
- Tideline: a soft meridian along the base of cards and panels for depth without an edge.
- Tide-fill progress: a melon fill rising across a bar with small azure checkpoints.
- Warm now-row, cool cue: the current entry warms to melon; selection and focus go azure.

## 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-019efacc-e91a-7932-84c0-3b4b80026a75/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 Use melon for first/last light, the warm well, progress, and the day's key moment.
- Do Use azure for selection, focus rings, high-water cues, and precise secondary actions.
- Do Keep the ground azure-night with translucent glass panels; separate by light and shadow.
- Do Divide with a meridian, never a grey rule.
- Don't Add dotted, grid, notebook, stripe, or confetti backgrounds.
- Don't Introduce a third bright hue beyond melon and azure (semantic states excepted, kept quiet).
- Don't Draw grey structural borders, card stripes, or single accent edges.
- Don't Default to a white or soft-white ground, or present a generic analytics dashboard.

### Accessibility

High-contrast #EAF1FA text on the azure-night ground and on glass panels; explicit azure focus rings on every interactive control; all form controls fully styled with no browser defaults; colour is never the only signal — the now-row, progress and selection also carry text and shape; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

opaline-soft-diffusion

### Summary

Subjects emerge from a luminous field with no hard outlines, edges dissolving into frosted-glass diffusion; here the field is dark — a melon dawn orb over still azure-night water, the meridian traced where warm light meets a cool reflection.

### Subjects

- a dawn orb rising at a horizon meridian
- still coastal water before sunrise
- the tideline and wrack at first light
- a backlit coastal observer or instrument

### Usage

One full-bleed hero per landing; warm bloom on one side, a single clean azure rim-light on the other; dark luminous ground, never white; calm, premium, airy.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "foreshore-coastal-light-tide",
  "type": "registry:theme",
  "title": "Foreshore shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A1726",
      "foreground": "#EAF1FA",
      "card": "#13243A",
      "card-foreground": "#EAF1FA",
      "popover": "#13243A",
      "popover-foreground": "#EAF1FA",
      "primary": "#FF8A5C",
      "primary-foreground": "#ffffff",
      "secondary": "#43B4FF",
      "secondary-foreground": "#ffffff",
      "muted": "#93A6BE",
      "muted-foreground": "#EAF1FA",
      "accent": "#FF8A5C",
      "accent-foreground": "#ffffff",
      "destructive": "#E5675A",
      "border": "#1E3450",
      "input": "#1E3450",
      "ring": "#FF8A5C",
      "chart-1": "#FF8A5C",
      "chart-2": "#43B4FF",
      "chart-3": "#FF8A5C",
      "chart-4": "#3FB58A",
      "chart-5": "#E0A53C",
      "sidebar": "#13243A",
      "sidebar-foreground": "#EAF1FA",
      "sidebar-primary": "#FF8A5C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#43B4FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#1E3450",
      "sidebar-ring": "#FF8A5C",
      "radius": "22px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#FF8A5C",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#FF8A5C",
      "accent-foreground": "#ffffff",
      "destructive": "#E5675A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#FF8A5C",
      "chart-1": "#FF8A5C",
      "chart-2": "#43B4FF",
      "chart-3": "#FF8A5C",
      "chart-4": "#3FB58A",
      "chart-5": "#E0A53C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#FF8A5C",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#FF8A5C",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#FF8A5C",
      "radius": "22px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efacc-e91a-7932-84c0-3b4b80026a75",
    "slug": "foreshore-coastal-light-tide",
    "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_deep",
        "accent_soft",
        "azure",
        "azure_deep",
        "bg",
        "bg_2",
        "border",
        "error",
        "faint",
        "info",
        "meridian",
        "muted",
        "on_accent",
        "on_azure",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "cool",
        "md",
        "sm",
        "warm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```