Nightwatch

# Nightwatch

## Philosophy

A cyber-noir surveillance dossier for adult near-future interfaces. The screen is a confidential file kept through the night: footage comes in raw, the subject is cropped into a scan-frame, a bounding box is held, and a single line of evidence is written to the file. One surgical magenta strip marks what is being watched; nothing else is coloured. Matte ink-black ground, bone-white inverted evidence slabs, halftone tone, terminal diagnostics as ornament.

### Values

- High-fashion restraint: one chromatic accent, large negative space, typography doing more work than decoration.
- Manga tension through cropped monochrome scan-frames, hard gutters, halftone fields, and diagonal ink cuts rather than illustrative clutter.
- Diagnostic intimacy: terminal snippets, exposure meters, bounding boxes, and port diagrams act as evidence labels around the content.
- Adult cyber-noir coolness: nocturnal, composed, alienated; never cute, toy-like, or rainbow cyberpunk.
- Asymmetry as narrative editing: pages feel spliced from surveillance footage, title cards, and magazine spreads.

### Anti-Values

- Generic neon cyberpunk gradients, rainbow glows, and busy gamer HUD decoration.
- Equal-card SaaS dashboards, friendly rounded app chrome, and anonymous analytics screens.
- Playful manga stickers, kawaii expressions, and comic-book colour fills that weaken the noir mood.
- Over-polished glassmorphism that hides the black-and-bone editorial structure.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#070708` |
| surface | `#11121A` |
| surface_2 | `#1A1B26` |
| slab | `#F4F0E8` |
| slab_ink | `#0B0C12` |
| text | `#F2EFE8` |
| muted | `#8C8FA3` |
| border | `#FFFFFF14` |
| accent | `#E0185F` |
| accent_deep | `#A50E45` |
| on_accent | `#FFF7FA` |
| success | `#5FA98C` |
| warning | `#C9924A` |
| error | `#E0185F` |
| info | `#5F8FA9` |
| terminal | `#7FD8C4` |

### Typography

- **Base Size**: 17px
- **Body Font**: Saira Condensed
- **Heading Font**: Archivo
- **Mono Font**: Fragment Mono
- **Heading Weight**: 800
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Fragment+Mono:ital@0;1&family=Saira+Condensed:wght@300;400;500;600;700&display=swap

### Radii

- **None**: 0px
- **Sm**: 0px
- **Md**: 0px
- **Glass**: 16px
- **Full**: 9999px

### Shadows

- **None**: none
- **Flat**: 0 1px 0 rgba(255,255,255,.06)

### Spacing

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

### Surfaces

- **Bg Pattern**: Nocturnal scanlines and faint halftone radial dots embedded in negative-space fields.
- **Card Style**: Square-corner scan-frame panels with hairline borders, corner crop-marks, halftone fields, floating bounding boxes, and magenta checksum strips. No drop-shadow stacks.
- **Treatment**: Matte ink black ground with bone-white inverted evidence slabs; Y2K glass appears only as small inset ports with hairline highlights.

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Near-invisible white hairlines interrupted by thin magenta seam strips and rectangular scan frames.

### Motion

- **Duration**: 180ms
- **Easing**: cubic-bezier(.2,.8,.1,1)
- **Philosophy**: Settled state is the default (visible with no JS). Reveal-on-scroll and a hero seam are layered on top; hover inverts like a printed negative. Respects prefers-reduced-motion.

## Rules

### Composition

Compose screens like a confidential dossier built from surveillance crops: one dominant scan-frame panel, one dense terminal column, and several small evidence strips. Avoid centred symmetry except for title-card impact. Let panels meet hard gutters; keep the reading path precise.

### Hierarchy

From oversized Archivo title cards to small uppercase mono dossier IDs to terminal diagnostics. Magenta never fills large areas; it marks danger, target, or selection. White space is a primary hierarchy device.

### Density

Alternate severe emptiness with compressed diagnostic clusters so the page reads cinematic and nocturnal, never uniformly busy.

### Signature

Scan-frame panels (corner brackets + floating bounding box + halftone + diagonal ink cut), magenta checksum strips on seams, terminal gutter strings, OCR tick rails, and tiny Y2K glass ports.

## Layout

### Grid

Desktop uses an asymmetric grid with 24px gutters and max width ~1480px; key panels span 7/5 or 1.7/1 to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

64-128px voids around title cards; 4-20px gaps inside diagnostic clusters; high spacing contrast.

### Density

High contrast between open editorial fields and compact diagnostic clusters; dense zones occupy less area but carry more microtext.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, hides non-essential nav and table columns, never overflows horizontally. Ultra-wide caps and centres contained content; only the hero spans 100vw.

### Breakpoints

- **Mobile**: <=900px single column
- **Tablet**: 900-1200px
- **Desktop**: >=1200px asymmetric dossier spread
- **Ultrawide**: >=2000px capped at 1640px

## Guidance

### Do

- Use ink black, bone white, and one surgical magenta as the visible palette; keep terminal cyan to tiny microtext only.
- Crop subjects hard into scan-frames overlaid with brackets, crop marks, bounding boxes, and exposure ticks.
- Write interface copy as terse dossier evidence: checksum, exposure, port, ghost, frame, null.
- Give one composition a dominant panel and another a dense diagnostic strip; never make equal cards the main structure.
- Build tone from halftone, never a flat grey wash; keep square corners and hairline borders.
- Carry the human-readable finding on a bone-white inverted slab.

### Don't

- Do not use rainbow neon cyberpunk, large cyan glows, or colourful anime-poster palettes.
- Do not let magenta become a fill, glow, or large area; it stays a thin strip.
- Do not create generic dashboard charts, CRM widgets, or three identical cards in a row.
- Do not add cute manga stickers, emoji, mascots, or speech bubbles.
- Do not let glassmorphism become the surface language; chrome is a micro-accent.
- Do not soften the system with arbitrary rounded corners, drop-shadow stacks, or friendly app gradients.

### Accessibility

Maintain strong ink/bone contrast for body copy; pair magenta state with text and a border or dot change, never colour alone. Keep touch targets above 44px. Disable scan/blink/seam motion under prefers-reduced-motion; the fully-rendered page is visible with no JavaScript.

## Imagery Direction

### Pairs With

stakeout-bureau

### Summary

High-contrast black-and-white surveillance-manga ink treatment: halftone/screentone tone, scan-frame brackets, bounding boxes, crop marks, and one surgical magenta interruption. Cropped subjects, cinematic and nocturnal, full-bleed.

### Subjects

- a lone figure under a streetlight
- a rain-slick midnight street
- a watched doorway or gate
- an empty stairwell
- a surveilled cityscape

### Usage

Drive the landing hero and feature imagery via --hero-image so the studio can swap. Keep strictly two-tone with one magenta seam; never readable text in the image.

---
version: "alpha"
name: "Nightwatch"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#070708"
  surface: "#11121A"
  surface_2: "#1A1B26"
  slab: "#F4F0E8"
  slab_ink: "#0B0C12"
  text: "#F2EFE8"
  muted: "#8C8FA3"
  accent: "#E0185F"
  accent_deep: "#A50E45"
  on_accent: "#FFF7FA"
  success: "#5FA98C"
  warning: "#C9924A"
  error: "#E0185F"
  info: "#5F8FA9"
  terminal: "#7FD8C4"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Saira Condensed"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Fragment Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "0px"
  md: "0px"
  glass: "16px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "32px"
  4xl: "48px"
  step-8: "64px"
  step-9: "92px"
  step-10: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-slab:
    backgroundColor: "{colors.slab}"
  color-reference-slab_ink:
    backgroundColor: "{colors.slab_ink}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_deep:
    backgroundColor: "{colors.accent_deep}"
  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}"
  color-reference-terminal:
    backgroundColor: "{colors.terminal}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#ffffff"
    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"
---

# Nightwatch

## Overview

A cyber-noir surveillance dossier for adult near-future interfaces. The screen is a confidential file kept through the night: footage comes in raw, the subject is cropped into a scan-frame, a bounding box is held, and a single line of evidence is written to the file. One surgical magenta strip marks what is being watched; nothing else is coloured. Matte ink-black ground, bone-white inverted evidence slabs, halftone tone, terminal diagnostics as ornament.

### Values

- High-fashion restraint: one chromatic accent, large negative space, typography doing more work than decoration.
- Manga tension through cropped monochrome scan-frames, hard gutters, halftone fields, and diagonal ink cuts rather than illustrative clutter.
- Diagnostic intimacy: terminal snippets, exposure meters, bounding boxes, and port diagrams act as evidence labels around the content.
- Adult cyber-noir coolness: nocturnal, composed, alienated; never cute, toy-like, or rainbow cyberpunk.
- Asymmetry as narrative editing: pages feel spliced from surveillance footage, title cards, and magazine spreads.

### Anti-Values

- Generic neon cyberpunk gradients, rainbow glows, and busy gamer HUD decoration.
- Equal-card SaaS dashboards, friendly rounded app chrome, and anonymous analytics screens.
- Playful manga stickers, kawaii expressions, and comic-book colour fills that weaken the noir mood.
- Over-polished glassmorphism that hides the black-and-bone editorial structure.

## 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 | `#070708` |
| surface | `#11121A` |
| surface_2 | `#1A1B26` |
| slab | `#F4F0E8` |
| slab_ink | `#0B0C12` |
| text | `#F2EFE8` |
| muted | `#8C8FA3` |
| accent | `#E0185F` |
| accent_deep | `#A50E45` |
| on_accent | `#FFF7FA` |
| success | `#5FA98C` |
| warning | `#C9924A` |
| error | `#E0185F` |
| info | `#5F8FA9` |
| terminal | `#7FD8C4` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Saira Condensed, 17px, weight 400, line-height 1.5.
- **Label-Md**: Fragment Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `20px`
- **2xl**: `24px`
- **3xl**: `32px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Step-9**: `92px`
- **Step-10**: `128px`

### Grid

Desktop uses an asymmetric grid with 24px gutters and max width ~1480px; key panels span 7/5 or 1.7/1 to prevent equal-card rhythm. minmax(0,1fr) columns and min-width:0 children so grids never blow out.

### Whitespace

64-128px voids around title cards; 4-20px gaps inside diagnostic clusters; high spacing contrast.

### Density

High contrast between open editorial fields and compact diagnostic clusters; dense zones occupy less area but carry more microtext.

### Responsive

From ~390px mobile to 2560px+ ultra-wide. Mobile stacks to a single column, hides non-essential nav and table columns, never overflows horizontally. Ultra-wide caps and centres contained content; only the hero spans 100vw.

### Breakpoints

- **Mobile**: <=900px single column
- **Tablet**: 900-1200px
- **Desktop**: >=1200px asymmetric dossier spread
- **Ultrawide**: >=2000px capped at 1640px

## Elevation & Depth

### Shadows

- **None**: none
- **Flat**: 0 1px 0 rgba(255,255,255,.06)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Glass**: `16px`
- **Full**: `9999px`

### Surfaces

- **Bg Pattern**: Nocturnal scanlines and faint halftone radial dots embedded in negative-space fields.
- **Card Style**: Square-corner scan-frame panels with hairline borders, corner crop-marks, halftone fields, floating bounding boxes, and magenta checksum strips. No drop-shadow stacks.
- **Treatment**: Matte ink black ground with bone-white inverted evidence slabs; Y2K glass appears only as small inset ports with hairline highlights.

### Borders

- **Default Width**: 1px
- **Accent Width**: 3px
- **Style**: solid
- **Character**: Near-invisible white hairlines interrupted by thin magenta seam strips and rectangular scan frames.

## Components

### Composition

Compose screens like a confidential dossier built from surveillance crops: one dominant scan-frame panel, one dense terminal column, and several small evidence strips. Avoid centred symmetry except for title-card impact. Let panels meet hard gutters; keep the reading path precise.

### Hierarchy

From oversized Archivo title cards to small uppercase mono dossier IDs to terminal diagnostics. Magenta never fills large areas; it marks danger, target, or selection. White space is a primary hierarchy device.

### Density

Alternate severe emptiness with compressed diagnostic clusters so the page reads cinematic and nocturnal, never uniformly busy.

### Signature

Scan-frame panels (corner brackets + floating bounding box + halftone + diagonal ink cut), magenta checksum strips on seams, terminal gutter strings, OCR tick rails, and tiny Y2K glass ports.

## 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-019ef881-5b88-7ae0-ad26-c5fb1ce27a7c/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 ink black, bone white, and one surgical magenta as the visible palette; keep terminal cyan to tiny microtext only.
- Do Crop subjects hard into scan-frames overlaid with brackets, crop marks, bounding boxes, and exposure ticks.
- Do Write interface copy as terse dossier evidence: checksum, exposure, port, ghost, frame, null.
- Do Give one composition a dominant panel and another a dense diagnostic strip; never make equal cards the main structure.
- Do Build tone from halftone, never a flat grey wash; keep square corners and hairline borders.
- Do Carry the human-readable finding on a bone-white inverted slab.
- Don't Do not use rainbow neon cyberpunk, large cyan glows, or colourful anime-poster palettes.
- Don't Do not let magenta become a fill, glow, or large area; it stays a thin strip.
- Don't Do not create generic dashboard charts, CRM widgets, or three identical cards in a row.
- Don't Do not add cute manga stickers, emoji, mascots, or speech bubbles.
- Don't Do not let glassmorphism become the surface language; chrome is a micro-accent.
- Don't Do not soften the system with arbitrary rounded corners, drop-shadow stacks, or friendly app gradients.

### Accessibility

Maintain strong ink/bone contrast for body copy; pair magenta state with text and a border or dot change, never colour alone. Keep touch targets above 44px. Disable scan/blink/seam motion under prefers-reduced-motion; the fully-rendered page is visible with no JavaScript.

## Imagery Direction

### Pairs With

stakeout-bureau

### Summary

High-contrast black-and-white surveillance-manga ink treatment: halftone/screentone tone, scan-frame brackets, bounding boxes, crop marks, and one surgical magenta interruption. Cropped subjects, cinematic and nocturnal, full-bleed.

### Subjects

- a lone figure under a streetlight
- a rain-slick midnight street
- a watched doorway or gate
- an empty stairwell
- a surveilled cityscape

### Usage

Drive the landing hero and feature imagery via --hero-image so the studio can swap. Keep strictly two-tone with one magenta seam; never readable text in the image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "nightwatch",
  "type": "registry:theme",
  "title": "Nightwatch shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#070708",
      "foreground": "#F2EFE8",
      "card": "#11121A",
      "card-foreground": "#F2EFE8",
      "popover": "#11121A",
      "popover-foreground": "#F2EFE8",
      "primary": "#F2EFE8",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#8C8FA3",
      "muted-foreground": "#F2EFE8",
      "accent": "#E0185F",
      "accent-foreground": "#ffffff",
      "destructive": "#E0185F",
      "border": "#FFFFFF14",
      "input": "#FFFFFF14",
      "ring": "#E0185F",
      "chart-1": "#F2EFE8",
      "chart-2": "#f4f4f5",
      "chart-3": "#E0185F",
      "chart-4": "#5FA98C",
      "chart-5": "#C9924A",
      "sidebar": "#11121A",
      "sidebar-foreground": "#F2EFE8",
      "sidebar-primary": "#F2EFE8",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#5F8FA9",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#FFFFFF14",
      "sidebar-ring": "#E0185F",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F2EFE8",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E0185F",
      "accent-foreground": "#ffffff",
      "destructive": "#E0185F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E0185F",
      "chart-1": "#F2EFE8",
      "chart-2": "#f4f4f5",
      "chart-3": "#E0185F",
      "chart-4": "#5FA98C",
      "chart-5": "#C9924A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F2EFE8",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#E0185F",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E0185F",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef881-5b88-7ae0-ad26-c5fb1ce27a7c",
    "slug": "nightwatch",
    "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",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "slab",
        "slab_ink",
        "success",
        "surface",
        "surface_2",
        "terminal",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "mono_font"
      ],
      "radii": [
        "full",
        "glass",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "flat",
        "none"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```