Drift

# Drift

## Philosophy

Drift — a grown-up motion-poster / kinetic-typography interface language in the immersive-scroll lineage (the Neuform / Meng To register), where the page is a calm river of air and a koinobori is the current. The ownable idea is the Drift Field: a slow, governed parallax current that carries layered streamer-planes and lets headlines settle like fish holding in a stream. Surfaces ride defined depth planes and drift at their own rate, then settle to a crisp, fully-legible resting state. Cinematic but restrained, editorial, never busy.

### Values

- depth and motion carry the drama, not loud colour
- every surface holds in a current, then settles crisp
- restraint and wide breathing bands keep dense content calm
- three highlighter accents, rationed to threads, ripples, and one capsule
- a single warm pop against bright, cool, airy light

### Anti-Values

- flat loud poster colour floods
- busy cluttered immersive gimmickry
- boxed pill-bar navigation widgets
- heavy borders and symmetric drop-shadows
- type crowding or overlapping the hero image

### Visual Character

- a layered depth-stage of three to four parallax planes over a contained column
- current slips: borderless cards with a one-sided directional motion-shadow implying flow
- thin streaming accent threads along the leading edge of active surfaces
- a single accent ripple travelling along an input underline on focus
- wide atmospheric breathing bands keeping dense ledgers calm, with one koi-coral pop

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FBFDFF` |
| surface | `#EFF4F7` |
| text | `#0D1417` |
| muted | `#5A6B74` |
| border | `#D6E1E8` |
| accent | `#00C2FF` |
| accent_2 | `#34E08A` |
| accent_pop | `#FF5147` |
| on_accent | `#04222B` |
| success | `#34E08A` |
| warning | `#E0A23A` |
| error | `#FF5147` |
| info | `#00C2FF` |

### Typography

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

### Radii

- **None**: 0
- **Md**: 16px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 1px 0 rgba(13,20,23,.06)
- **Flow**: -16px 0 38px -20px rgba(0,194,255,.55)
- **Md**: 0 26px 64px -34px rgba(13,20,23,.30)

### Spacing

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

### Surfaces

- **Treatment**: borderless-depth-plane
- **Card Style**: borderless current slip on a depth plane with a one-sided directional motion-shadow and a streaming accent thread when active
- **Bg Pattern**: near-white air with a faint cool atmospheric haze and slow parallax current planes

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no card borders; surfaces are parted by air and faint 1px seams, and depth is read from one-sided motion-shadows, never frames

### Motion

- **Duration**: 240ms
- **Easing**: cubic-bezier(0.2,0.65,0.2,1)
- **Philosophy**: slow governed parallax current; the settled fully-legible state is the no-JS default, motion gated behind a drift class set by an inline head script

## Rules

### Composition

Build a layered depth-stage: three to four parallax planes over a contained 1320px column, with wide 80-120px atmospheric breathing bands between dense sections. The hero is full-bleed and carries the deepest current plane; everything else stays in the column.

### Hierarchy

Hierarchy comes from depth, scale, and motion, not colour weight. Headlines sit large and airy in the front plane; content rides current slips; figures and labels are mono. The cyan thread marks the active surface; koi-coral marks the one hero pop.

### Density

Calm medium density: dense ledgers and timelines are allowed but always separated by wide breathing bands so the page reads restrained, never busy.

### Signature

Assign every surface a depth plane that drifts at its own parallax rate then settles crisp; give cards a one-sided directional motion-shadow instead of a border; run a 3px gradient accent thread along the leading edge of active slips, rows, and notes; animate a single ripple along a focused input underline; glide a filled marker under the active item in a thin floating current-rail nav.

## Layout

### Grid

Desktop: a contained 1320px column with a layered parallax depth-stage behind it; the only full-bleed element is the hero. Tablet reduces to two gentle planes and split sections; mobile collapses to a single column with motion attenuated.

### Whitespace

Wide 80-120px atmospheric breathing bands between dense sections; generous padding above every title; the air is a continuous field, not a series of boxes.

### Density

calm-medium

### Responsive

Use minmax(0,1fr) columns and min-width:0 children so grids never blow out; hide the current-rail nav and non-essential table columns on mobile; cap and centre content on ultra-wide, only the hero spans 100vw; reduced-motion shows the settled, fully-legible state.

### Breakpoints

- **Mobile**: 0-559px
- **Tablet**: 560-979px
- **Desktop**: 980px+

## Guidance

### Do

- assign every surface a depth plane and let it drift, then settle crisp
- use the one-sided motion-shadow to imply flow direction
- ration the three accents to threads, ripples, the active marker, and one capsule
- keep wide atmospheric breathing bands between dense sections
- reserve koi-coral for the single hero pop and for errors only

### Don't

- do not flood any surface with a full accent colour wash
- do not give a card a single decorative accent edge as a border
- do not crowd the hero so type overlaps or fights the image
- do not box the navigation into a pill bar or floating widget
- do not let motion become decoration; it carries the current's meaning

### Accessibility

Body text 17px+, table rows 14.5px+, ink on near-white air for high contrast. Motion respects prefers-reduced-motion and the no-JS settled state. Every control has a visible focus state; the cyan active thread is never the only signal — status also carries a label and a badge.

## Imagery Direction

### Pairs With

kasumi-drift-field-depth-compositing

### Summary

Kasumi depth-compositing: real layered translucent planes, the front sharp and the back dissolving into bright cooler aerial haze, soft light-shafts and a faint particle drift. Koinobori held in a slow river of air at dusk; one warm koi-coral note against cool misty light. Atmospheric and editorial, never a flat silhouette or loud poster.

### Subjects

- koinobori streamers held in a river of air
- riverfront installation at dusk
- layered streamer-planes receding into haze
- a single red carp far across the field
- light-shafts over still water

### Usage

Hero is a full-bleed Kasumi drift-field scene with a directional milk veil over the text zone; feature imagery is mid-distance layered subjects feathering into haze. Keep one warm pop; let the air stay cool and bright so overlays and type stay legible.

---
version: "alpha"
name: "Drift"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FBFDFF"
  surface: "#EFF4F7"
  text: "#0D1417"
  muted: "#5A6B74"
  border: "#D6E1E8"
  accent: "#00C2FF"
  accent_2: "#34E08A"
  accent_pop: "#FF5147"
  on_accent: "#04222B"
  success: "#34E08A"
  warning: "#E0A23A"
  error: "#FF5147"
  info: "#00C2FF"
typography:
  headline-lg:
    fontFamily: "Sora"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Sora"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
  step-9: "120px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  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-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_pop:
    backgroundColor: "{colors.accent_pop}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  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: "{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"
---

# Drift

## Overview

Drift — a grown-up motion-poster / kinetic-typography interface language in the immersive-scroll lineage (the Neuform / Meng To register), where the page is a calm river of air and a koinobori is the current. The ownable idea is the Drift Field: a slow, governed parallax current that carries layered streamer-planes and lets headlines settle like fish holding in a stream. Surfaces ride defined depth planes and drift at their own rate, then settle to a crisp, fully-legible resting state. Cinematic but restrained, editorial, never busy.

### Values

- depth and motion carry the drama, not loud colour
- every surface holds in a current, then settles crisp
- restraint and wide breathing bands keep dense content calm
- three highlighter accents, rationed to threads, ripples, and one capsule
- a single warm pop against bright, cool, airy light

### Anti-Values

- flat loud poster colour floods
- busy cluttered immersive gimmickry
- boxed pill-bar navigation widgets
- heavy borders and symmetric drop-shadows
- type crowding or overlapping the hero image

### Visual Character

- a layered depth-stage of three to four parallax planes over a contained column
- current slips: borderless cards with a one-sided directional motion-shadow implying flow
- thin streaming accent threads along the leading edge of active surfaces
- a single accent ripple travelling along an input underline on focus
- wide atmospheric breathing bands keeping dense ledgers calm, with one koi-coral pop

## 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 | `#FBFDFF` |
| surface | `#EFF4F7` |
| text | `#0D1417` |
| muted | `#5A6B74` |
| border | `#D6E1E8` |
| accent | `#00C2FF` |
| accent_2 | `#34E08A` |
| accent_pop | `#FF5147` |
| on_accent | `#04222B` |
| success | `#34E08A` |
| warning | `#E0A23A` |
| error | `#FF5147` |
| info | `#00C2FF` |

## Typography

- **Headline-Lg**: Sora, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Sora, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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`
- **Step-8**: `96px`
- **Step-9**: `120px`

### Grid

Desktop: a contained 1320px column with a layered parallax depth-stage behind it; the only full-bleed element is the hero. Tablet reduces to two gentle planes and split sections; mobile collapses to a single column with motion attenuated.

### Whitespace

Wide 80-120px atmospheric breathing bands between dense sections; generous padding above every title; the air is a continuous field, not a series of boxes.

### Density

calm-medium

### Responsive

Use minmax(0,1fr) columns and min-width:0 children so grids never blow out; hide the current-rail nav and non-essential table columns on mobile; cap and centre content on ultra-wide, only the hero spans 100vw; reduced-motion shows the settled, fully-legible state.

### Breakpoints

- **Mobile**: 0-559px
- **Tablet**: 560-979px
- **Desktop**: 980px+

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(13,20,23,.06)
- **Flow**: -16px 0 38px -20px rgba(0,194,255,.55)
- **Md**: 0 26px 64px -34px rgba(13,20,23,.30)

## Shapes

### Rounded

- **None**: `0px`
- **Md**: `16px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: borderless-depth-plane
- **Card Style**: borderless current slip on a depth plane with a one-sided directional motion-shadow and a streaming accent thread when active
- **Bg Pattern**: near-white air with a faint cool atmospheric haze and slow parallax current planes

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: no card borders; surfaces are parted by air and faint 1px seams, and depth is read from one-sided motion-shadows, never frames

## Components

### Composition

Build a layered depth-stage: three to four parallax planes over a contained 1320px column, with wide 80-120px atmospheric breathing bands between dense sections. The hero is full-bleed and carries the deepest current plane; everything else stays in the column.

### Hierarchy

Hierarchy comes from depth, scale, and motion, not colour weight. Headlines sit large and airy in the front plane; content rides current slips; figures and labels are mono. The cyan thread marks the active surface; koi-coral marks the one hero pop.

### Density

Calm medium density: dense ledgers and timelines are allowed but always separated by wide breathing bands so the page reads restrained, never busy.

### Signature

Assign every surface a depth plane that drifts at its own parallax rate then settles crisp; give cards a one-sided directional motion-shadow instead of a border; run a 3px gradient accent thread along the leading edge of active slips, rows, and notes; animate a single ripple along a focused input underline; glide a filled marker under the active item in a thin floating current-rail nav.

## 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-019efac5-b862-7d52-ba4c-815d35d9caaa/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 assign every surface a depth plane and let it drift, then settle crisp
- Do use the one-sided motion-shadow to imply flow direction
- Do ration the three accents to threads, ripples, the active marker, and one capsule
- Do keep wide atmospheric breathing bands between dense sections
- Do reserve koi-coral for the single hero pop and for errors only
- Don't do not flood any surface with a full accent colour wash
- Don't do not give a card a single decorative accent edge as a border
- Don't do not crowd the hero so type overlaps or fights the image
- Don't do not box the navigation into a pill bar or floating widget
- Don't do not let motion become decoration; it carries the current's meaning

### Accessibility

Body text 17px+, table rows 14.5px+, ink on near-white air for high contrast. Motion respects prefers-reduced-motion and the no-JS settled state. Every control has a visible focus state; the cyan active thread is never the only signal — status also carries a label and a badge.

## Imagery Direction

### Pairs With

kasumi-drift-field-depth-compositing

### Summary

Kasumi depth-compositing: real layered translucent planes, the front sharp and the back dissolving into bright cooler aerial haze, soft light-shafts and a faint particle drift. Koinobori held in a slow river of air at dusk; one warm koi-coral note against cool misty light. Atmospheric and editorial, never a flat silhouette or loud poster.

### Subjects

- koinobori streamers held in a river of air
- riverfront installation at dusk
- layered streamer-planes receding into haze
- a single red carp far across the field
- light-shafts over still water

### Usage

Hero is a full-bleed Kasumi drift-field scene with a directional milk veil over the text zone; feature imagery is mid-distance layered subjects feathering into haze. Keep one warm pop; let the air stay cool and bright so overlays and type stay legible.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drift-current-field",
  "type": "registry:theme",
  "title": "Drift shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FBFDFF",
      "foreground": "#0D1417",
      "card": "#EFF4F7",
      "card-foreground": "#0D1417",
      "popover": "#EFF4F7",
      "popover-foreground": "#0D1417",
      "primary": "#0D1417",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#5A6B74",
      "muted-foreground": "#0D1417",
      "accent": "#00C2FF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5147",
      "border": "#D6E1E8",
      "input": "#D6E1E8",
      "ring": "#00C2FF",
      "chart-1": "#0D1417",
      "chart-2": "#f4f4f5",
      "chart-3": "#00C2FF",
      "chart-4": "#34E08A",
      "chart-5": "#E0A23A",
      "sidebar": "#EFF4F7",
      "sidebar-foreground": "#0D1417",
      "sidebar-primary": "#0D1417",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#D6E1E8",
      "sidebar-ring": "#00C2FF",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0D1417",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#00C2FF",
      "accent-foreground": "#ffffff",
      "destructive": "#FF5147",
      "border": "#303642",
      "input": "#303642",
      "ring": "#00C2FF",
      "chart-1": "#0D1417",
      "chart-2": "#f4f4f5",
      "chart-3": "#00C2FF",
      "chart-4": "#34E08A",
      "chart-5": "#E0A23A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0D1417",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#00C2FF",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#00C2FF",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efac5-b862-7d52-ba4c-815d35d9caaa",
    "slug": "drift-current-field",
    "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_pop",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "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"
      ],
      "shadows": [
        "flow",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```