Scramble

# Scramble

## Philosophy

Scramble is a wayfinding interface language built from the moment a dense intersection releases. A corridor moves you along a wall of signs; a scramble crossing fills from four directions at once. Scramble turns that into structure: signals — feeds, ads, routes, alerts — converge from every side and a single horizontal crossing band sorts them into bounded crosswalk lanes, so a glance is enough. You read by colour and number, follow the direction, then move. The ground is a saturated magenta-violet dusk, three highlighter inks do all the signalling, and every surface throws a wet-ground reflection of itself.

### Values

- A scramble crossing as a way to move through data — read by colour and number, follow direction, then move
- The crossing band is the structure: a full-width striped marquee that sorts converging signals into bounded crosswalk lanes
- The reflection echo: every surface mirrors itself on the wet ground, the long-exposure photograph made structural
- Three highlighter inks on a warm violet dusk — lime to go, coral to mark what is live, ice to route
- A coloured night, never white, never blue-black; glow and reflection carry the brightness while the chrome stays quiet

### Anti-Values

- Defaulting to white or blue-black, or washing the dusk pale
- A vertical sign-tower corridor with a single luminous spine
- A second loud accent, or flooding a surface with colour
- Grey borders, boxed-in pill navigation, or nested cards
- Long body copy as the primary hierarchy instead of scan-first signage

### Visual Character

- The crossing band: a full-width horizontal striped marquee in lime, ice and coral lanes, laid like a scramble crosswalk seen from above, running the live signals across the top of every view as structure, not decoration.
- Lane cards: every primary surface carries a crosswalk-striped top edge in its role colour, an oversized numeral you read first, then a Space Mono label; colour is the state, the number is the value.
- The reflection echo: surfaces throw a faint blurred mirrored copy of themselves on the wet ground beneath, recolouring with the surface.
- A warm magenta-violet dusk ground against which lime (go), coral (live) and ice (route) read as three bright highlighter marks; structure comes from glow and the striped edge, never from grey borders.
- Space Grotesk display and body with Space Mono metadata, one headline word carrying a lime colour-pop highlighter mark, never a serif/italic swap.
- One live inset screen per surface — a billboard-within framed on-air, driven by the swappable night-photo hero — plus glowing status lights, transit pills, and role-coloured meters that stand in for any stat row.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#160a1f` |
| bg_deep | `#0e0614` |
| surface | `#221230` |
| surface_2 | `#2c1840` |
| text | `#f6effb` |
| muted | `#b09cc4` |
| border | `#3a2350` |
| accent | `#c6ff3a` |
| accent_2 | `#ff6a4d` |
| accent_3 | `#b6ecff` |
| on_accent | `#160a1f` |
| success | `#c6ff3a` |
| warning | `#ffb347` |
| error | `#ff5a78` |
| info | `#b6ecff` |

### Typography

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

### Radii

- **Sharp**: 0px
- **Base**: 16px
- **Lg**: 24px
- **Pill**: 9999px

### Shadows

- **Glow**: 0 0 14px 2px var(--accent)
- **Inset Ring**: inset 0 0 0 1.5px var(--border)

### Spacing

- **Base**: 8px
- **Scale**: ["8px","14px","22px","34px","56px","90px"]

### Surfaces

- **Ground**: #160a1f
- **Card**: #221230
- **Raised**: #2c1840

### Borders

- **Hairline**: 1px solid #3a2350
- **Philosophy**: structure from glow and the crosswalk-striped edge, never grey borders

### Motion

- **Band**: horizontal crossing-band marquee, 22-24s linear
- **Reveal**: opacity+translateY on scroll
- **Reduced**: respect prefers-reduced-motion

## Rules

### Composition

Compose as a scramble crossing: signals converge from four directions and the full-width crossing band sorts them into bounded crosswalk lanes on a warm violet dusk. Primary content lives in lane cards with crosswalk-striped edges; supporting detail rides transit pills, glowing status lights, and one live inset screen. Surfaces are carved apart by glow and hard gutters, not grey borders, and each throws a reflection on the wet ground.

### Hierarchy

Scan-first: one oversized display number or word, then dense Space Mono labels and metadata. Users read by colour, number and direction before any paragraph.

### Density

High density kept legible — each surface is a bounded lane with one striped edge and one hairline per table row; the scene feels packed with signals yet orchestrated.

### Signature

The crossing band and the reflection echo: a full-width horizontal striped marquee in lime/ice/coral that sorts converging signals into crosswalk lanes, while every surface mirrors itself on the wet ground. Lane cards carry a crosswalk-striped top edge whose colour is the state and an oversized numeral that is the reading.

## Layout

### Grid

Responsive lane grid (minmax(0,1fr) + min-width:0) so children shrink instead of overflowing; the crossing band spans full-bleed; contained measure caps on ultra-wide.

### Whitespace

Generous padding above titles; a calm dark violet zone in the hero for the overlaid headline; meters and lanes breathe.

### Density

Dense but lane-bounded; the table is a results sheet at 14.5px rows.

### Responsive

Mobile collapses to one column, hides non-essential nav, drops the form to one column; the hero headline uses clamp() and wraps, never clipping at 390px.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 720px
- **Desktop**: 1240px
- **Ultrawide**: 2560px

## Guidance

### Do

- Keep the ground a warm magenta-violet dusk; let lime, coral and ice glow on it like highlighters.
- Lead each surface with one lime primary; keep everything else quiet.
- Build structure from glow, the crosswalk-striped edge and hard gutters; mirror surfaces on the wet ground.
- Drive the live inset from --hero-image; keep one live screen per view.
- Use Space Grotesk for type and Space Mono for metadata; pop one headline word in lime.

### Don't

- Default to white or blue-black, or wash the dusk pale, or desaturate the inks to greys.
- Add grey borders, nested cards, or a boxed-in pill nav.
- Use the SaaS-template hero (eyebrow tag + primary/secondary button pair + three-stat furniture row).
- Swap serif/italic in the headline; ship unstyled native form controls.
- Let amber or error read as primary — semantic colour stays a small part.

### Accessibility

Light text on the dusk holds high contrast; focus states light a 2px lime ring; motion is gated and respects prefers-reduced-motion; the page renders fully with no JavaScript.

## Imagery Direction

### Pairs With

halation-bloom

### Summary

Long-exposure night photography in the Halation technique: bloom swells around every light, the wet ground mirrors the neon as vertical streaks, bokeh orbs float in the deep dark, the subject's edges glow. Lime, coral and ice read as highlighter marks on a deep magenta-violet night.

### Subjects

- a rain-soaked scramble crossing seen from a high diagonal angle
- a single object rim-lit by night signage on wet ground
- a wet boulevard with reflected light streaks
- a night-street scene lit by converging neon

### Usage

One full-bleed night-photo hero per landing, the crossing massed to the lower-right and a calm dark violet zone upper-left for the overlaid headline; one live inset screen per major surface, driven by --hero-image.

---
version: "alpha"
name: "Scramble"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#160a1f"
  bg_deep: "#0e0614"
  surface: "#221230"
  surface_2: "#2c1840"
  text: "#f6effb"
  muted: "#b09cc4"
  border: "#3a2350"
  accent: "#c6ff3a"
  accent_2: "#ff6a4d"
  accent_3: "#b6ecff"
  on_accent: "#160a1f"
  success: "#c6ff3a"
  warning: "#ffb347"
  error: "#ff5a78"
  info: "#b6ecff"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Space Grotesk"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  sharp: "0px"
  base: "16px"
  lg: "24px"
  pill: "9999px"
spacing:
  base: "8px"
  xs: "8px"
  sm: "14px"
  md: "22px"
  lg: "34px"
  xl: "56px"
  2xl: "90px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-bg_deep:
    backgroundColor: "{colors.bg_deep}"
  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-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  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.lg}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    height: "44px"
---

# Scramble

## Overview

Scramble is a wayfinding interface language built from the moment a dense intersection releases. A corridor moves you along a wall of signs; a scramble crossing fills from four directions at once. Scramble turns that into structure: signals — feeds, ads, routes, alerts — converge from every side and a single horizontal crossing band sorts them into bounded crosswalk lanes, so a glance is enough. You read by colour and number, follow the direction, then move. The ground is a saturated magenta-violet dusk, three highlighter inks do all the signalling, and every surface throws a wet-ground reflection of itself.

### Values

- A scramble crossing as a way to move through data — read by colour and number, follow direction, then move
- The crossing band is the structure: a full-width striped marquee that sorts converging signals into bounded crosswalk lanes
- The reflection echo: every surface mirrors itself on the wet ground, the long-exposure photograph made structural
- Three highlighter inks on a warm violet dusk — lime to go, coral to mark what is live, ice to route
- A coloured night, never white, never blue-black; glow and reflection carry the brightness while the chrome stays quiet

### Anti-Values

- Defaulting to white or blue-black, or washing the dusk pale
- A vertical sign-tower corridor with a single luminous spine
- A second loud accent, or flooding a surface with colour
- Grey borders, boxed-in pill navigation, or nested cards
- Long body copy as the primary hierarchy instead of scan-first signage

### Visual Character

- The crossing band: a full-width horizontal striped marquee in lime, ice and coral lanes, laid like a scramble crosswalk seen from above, running the live signals across the top of every view as structure, not decoration.
- Lane cards: every primary surface carries a crosswalk-striped top edge in its role colour, an oversized numeral you read first, then a Space Mono label; colour is the state, the number is the value.
- The reflection echo: surfaces throw a faint blurred mirrored copy of themselves on the wet ground beneath, recolouring with the surface.
- A warm magenta-violet dusk ground against which lime (go), coral (live) and ice (route) read as three bright highlighter marks; structure comes from glow and the striped edge, never from grey borders.
- Space Grotesk display and body with Space Mono metadata, one headline word carrying a lime colour-pop highlighter mark, never a serif/italic swap.
- One live inset screen per surface — a billboard-within framed on-air, driven by the swappable night-photo hero — plus glowing status lights, transit pills, and role-coloured meters that stand in for any stat row.

## 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 | `#160a1f` |
| bg_deep | `#0e0614` |
| surface | `#221230` |
| surface_2 | `#2c1840` |
| text | `#f6effb` |
| muted | `#b09cc4` |
| border | `#3a2350` |
| accent | `#c6ff3a` |
| accent_2 | `#ff6a4d` |
| accent_3 | `#b6ecff` |
| on_accent | `#160a1f` |
| success | `#c6ff3a` |
| warning | `#ffb347` |
| error | `#ff5a78` |
| info | `#b6ecff` |

## Typography

- **Headline-Lg**: Space Grotesk, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Space Grotesk, 17px, weight 400, line-height 1.55.
- **Label-Md**: Space Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `8px`
- **Sm**: `14px`
- **Md**: `22px`
- **Lg**: `34px`
- **Xl**: `56px`
- **2xl**: `90px`

### Grid

Responsive lane grid (minmax(0,1fr) + min-width:0) so children shrink instead of overflowing; the crossing band spans full-bleed; contained measure caps on ultra-wide.

### Whitespace

Generous padding above titles; a calm dark violet zone in the hero for the overlaid headline; meters and lanes breathe.

### Density

Dense but lane-bounded; the table is a results sheet at 14.5px rows.

### Responsive

Mobile collapses to one column, hides non-essential nav, drops the form to one column; the hero headline uses clamp() and wraps, never clipping at 390px.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 720px
- **Desktop**: 1240px
- **Ultrawide**: 2560px

## Elevation & Depth

### Shadows

- **Glow**: 0 0 14px 2px var(--accent)
- **Inset Ring**: inset 0 0 0 1.5px var(--border)

## Shapes

### Rounded

- **Sharp**: `0px`
- **Base**: `16px`
- **Lg**: `24px`
- **Pill**: `9999px`

### Surfaces

- **Ground**: #160a1f
- **Card**: #221230
- **Raised**: #2c1840

### Borders

- **Hairline**: 1px solid #3a2350
- **Philosophy**: structure from glow and the crosswalk-striped edge, never grey borders

## Components

### Composition

Compose as a scramble crossing: signals converge from four directions and the full-width crossing band sorts them into bounded crosswalk lanes on a warm violet dusk. Primary content lives in lane cards with crosswalk-striped edges; supporting detail rides transit pills, glowing status lights, and one live inset screen. Surfaces are carved apart by glow and hard gutters, not grey borders, and each throws a reflection on the wet ground.

### Hierarchy

Scan-first: one oversized display number or word, then dense Space Mono labels and metadata. Users read by colour, number and direction before any paragraph.

### Density

High density kept legible — each surface is a bounded lane with one striped edge and one hairline per table row; the scene feels packed with signals yet orchestrated.

### Signature

The crossing band and the reflection echo: a full-width horizontal striped marquee in lime/ice/coral that sorts converging signals into crosswalk lanes, while every surface mirrors itself on the wet ground. Lane cards carry a crosswalk-striped top edge whose colour is the state and an oversized numeral that is the reading.

## 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-019efdb8-7280-7791-b95d-88c0092f1307/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 ground a warm magenta-violet dusk; let lime, coral and ice glow on it like highlighters.
- Do Lead each surface with one lime primary; keep everything else quiet.
- Do Build structure from glow, the crosswalk-striped edge and hard gutters; mirror surfaces on the wet ground.
- Do Drive the live inset from --hero-image; keep one live screen per view.
- Do Use Space Grotesk for type and Space Mono for metadata; pop one headline word in lime.
- Don't Default to white or blue-black, or wash the dusk pale, or desaturate the inks to greys.
- Don't Add grey borders, nested cards, or a boxed-in pill nav.
- Don't Use the SaaS-template hero (eyebrow tag + primary/secondary button pair + three-stat furniture row).
- Don't Swap serif/italic in the headline; ship unstyled native form controls.
- Don't Let amber or error read as primary — semantic colour stays a small part.

### Accessibility

Light text on the dusk holds high contrast; focus states light a 2px lime ring; motion is gated and respects prefers-reduced-motion; the page renders fully with no JavaScript.

## Imagery Direction

### Pairs With

halation-bloom

### Summary

Long-exposure night photography in the Halation technique: bloom swells around every light, the wet ground mirrors the neon as vertical streaks, bokeh orbs float in the deep dark, the subject's edges glow. Lime, coral and ice read as highlighter marks on a deep magenta-violet night.

### Subjects

- a rain-soaked scramble crossing seen from a high diagonal angle
- a single object rim-lit by night signage on wet ground
- a wet boulevard with reflected light streaks
- a night-street scene lit by converging neon

### Usage

One full-bleed night-photo hero per landing, the crossing massed to the lower-right and a calm dark violet zone upper-left for the overlaid headline; one live inset screen per major surface, driven by --hero-image.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scramble",
  "type": "registry:theme",
  "title": "Scramble shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#160a1f",
      "foreground": "#f6effb",
      "card": "#221230",
      "card-foreground": "#f6effb",
      "popover": "#221230",
      "popover-foreground": "#f6effb",
      "primary": "#f6effb",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#b09cc4",
      "muted-foreground": "#f6effb",
      "accent": "#c6ff3a",
      "accent-foreground": "#111111",
      "destructive": "#ff5a78",
      "border": "#3a2350",
      "input": "#3a2350",
      "ring": "#c6ff3a",
      "chart-1": "#f6effb",
      "chart-2": "#f4f4f5",
      "chart-3": "#c6ff3a",
      "chart-4": "#c6ff3a",
      "chart-5": "#ffb347",
      "sidebar": "#221230",
      "sidebar-foreground": "#f6effb",
      "sidebar-primary": "#f6effb",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#b6ecff",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#3a2350",
      "sidebar-ring": "#c6ff3a",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#f6effb",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#c6ff3a",
      "accent-foreground": "#111111",
      "destructive": "#ff5a78",
      "border": "#303642",
      "input": "#303642",
      "ring": "#c6ff3a",
      "chart-1": "#f6effb",
      "chart-2": "#f4f4f5",
      "chart-3": "#c6ff3a",
      "chart-4": "#c6ff3a",
      "chart-5": "#ffb347",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#f6effb",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#c6ff3a",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#c6ff3a",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efdb8-7280-7791-b95d-88c0092f1307",
    "slug": "scramble",
    "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",
        "bg_deep",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "base",
        "lg",
        "pill",
        "sharp"
      ],
      "shadows": [
        "glow",
        "inset_ring"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card",
        "ground",
        "raised"
      ],
      "borders": [
        "hairline",
        "philosophy"
      ],
      "motion": [
        "band",
        "reduced",
        "reveal"
      ]
    }
  }
}
```