Ticker

# Ticker

## Philosophy

Ticker is a kinetic-typographic interface where typography is the interface. Every screen is a typographic composition: letterforms carry meaning and hierarchy, black and white hold the canvas, and a single signal red punctuates each decision. Type is set, line by line, along a red baseline — the way hot-metal type once struck a page — and motion reveals structure rather than decorating it. Ticker is the corrected, current-standards form of the Kinetic Typography lineage.

### Values

- Typography is the interface: letterforms establish hierarchy and guide the eye; ornamentation is zero.
- The set-line: a signal-red baseline where display lines wipe into place with a clip-path reveal.
- Extreme weight contrast: Space Grotesk 800 against Inter 300/400 — the light end reads, the heavy end commands.
- One accent: pure ink and paper carry the canvas; signal red #E11D48 is the only departure, used like a highlighter.
- Motion as meaning: snappy under-300ms wipes and mix-blend-difference inversions, never leisurely decoration.
- Editorial to the core: left-aligned reading, generous whitespace, borderless surfaces, folio rules as furniture.

### Anti-Values

- A second accent, a gradient wash, or a pastel background.
- Boxed cards, grey borders, left accent edges, or navigation trapped in a pill.
- In-between radii; anything but square 0 (avatars and switches aside).
- Centred body text, wrapped control labels, or a headline clipping the mobile edge.
- Decorative motion without narrative purpose, or animation exceeding 300ms.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F5F5F2` |
| surface_solid | `#FFFFFF` |
| text | `#0A0A0A` |
| muted | `#6B6B6B` |
| border | `rgba(10,10,10,0.12)` |
| accent | `#E11D48` |
| accent_2 | `#0A0A0A` |
| accent_soft | `rgba(225,29,72,0.12)` |
| on_accent | `#FFFFFF` |
| success | `#1B7F4B` |
| warning | `#B45309` |
| error | `#C81E3A` |
| info | `#1D4ED8` |

### Typography

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

### Radii

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

### Shadows

- **Sm**: 0 1px 0 rgba(10,10,10,0.06)
- **Md**: 0 8px 24px rgba(10,10,10,0.08)
- **Lg**: 0 24px 60px rgba(10,10,10,0.12)

### Spacing

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

### Surfaces

- **Treatment**: Pure white paper ground with a near-white surface tint; flat and borderless. Content is defined by type weight, horizontal rules, and one signal-red set-line. One inverted black frame per composition marks a dramatic contrast break.
- **Card Style**: Borderless cards defined by a surface fill and a mono index; on hover a signal-red set-line wipes across the top. Never boxed, never a left accent edge, never nested.
- **Bg Pattern**: none; an optional faint kinetic streak field sits behind the inverted hero only.

### Borders

- **Default Width**: 0
- **Accent Width**: 4px
- **Style**: horizontal rules only — never box borders or left accent edges
- **Character**: editorial folio rules: thin ink hairline separators and one bold signal-red 4px set-line

### Motion

- **Duration**: 100-300ms
- **Easing**: cubic-bezier(0.22,1,0.36,1)
- **Philosophy**: Motion is cognitive scaffolding, never decoration: type wipes into place via clip-path from the set-line, overlaps invert via mix-blend difference, states change in under 300ms with snappy easing; reduced motion is respected.

## Rules

### Composition

Compose every screen as a typographic set: oversized display type strikes into place along a signal-red set-line, body copy left-aligned in an editorial column. Cards are borderless surface fills; navigation sits open across the header as a masthead, never trapped in a pill or floating card. One inverted black frame per view marks a contrast break.

### Hierarchy

Hierarchy comes from register and weight, not colour: Space Grotesk 800 for display and headings, Inter 300/400 for reading, JetBrains Mono 11-13px for metadata and readouts. Scale contrast is dramatic between a viewport-scale headline and tiny mono labels; the page stays pure ink and paper with one signal red.

### Density

Generous whitespace on an 8px rhythm, always padding above titles; balance density across the canvas — never a crowded cluster beside a starved void. Horizontal rules (one bold red set-line, thin ink hairlines) are the only line vocabulary.

### Signature

The set-line: a signal-red baseline where type sets. Display lines wipe into being from it via clip-path; overlapping type inverts through mix-blend difference; a monospace readout counts the lines. The mechanic recolours through components — buttons wipe-fill on hover, active tabs and nav carry a red baseline, links ink up with a red sweep, inputs focus to a red underline, meters and progress are red rules.

## Layout

### Grid

Editorial column on a 1180-1280px max width, centred with auto margins; asymmetric 2fr/1fr splits for text-plus-aside. Use minmax(0,1fr) columns and min-width:0 children so nothing blows out. Only the full-bleed hero and landing plates span 100vw.

### Whitespace

8px rhythm — 16px between related items, 32px between groups, 64-128px between sections; generous padding above every title. Cards get 24-28px internal padding.

### Density

Generous and balanced; content-defined surfaces rather than heavy chrome. The landing HUD and dashboard readouts pack mono islands densely against airy display type.

### Responsive

Renders from ~390px to 2560px+. Four art-directed breakpoints: wide ~1920+, desktop 1440, tablet 768-1024 (its own considered layout), mobile 390. On mobile, stack to a single column, hide non-essential nav and table columns, and shrink display type via clamp() so it never clips the edge. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw.

### Breakpoints

- **Wide**: 1920px+
- **Lg**: 1025-1919px
- **Md**: 768-1024px
- **Sm**: 561-767px
- **Xs**: below 561px

## Guidance

### Do

- Lead with oversized display type set along the signal-red set-line.
- Pair extreme weights — 800 display against 300/400 body — and use JetBrains Mono for metadata.
- Use signal red like a highlighter: CTAs, active states, the set-line, one detonation.
- Keep motion under 300ms with snappy easing; wipe, don't fade; respect reduced motion.
- Keep the ground pure ink and paper; define cards by surface fill and a mono index, not a box.

### Don't

- Add a second accent, a gradient, or a pastel wash.
- Box a card in a border, give it an accent edge, or trap navigation in a pill.
- Round corners to an in-between radius; use anything but 0 or 9999.
- Centre body paragraphs, wrap a control label, or let a headline clip the mobile edge.
- Use emoji or symbol glyphs as icons; use inline SVG primitives.

### Accessibility

Ink on paper meets WCAG AA (19.4:1); signal red pairs with a label or shape so colour is never the sole signal. Every control has a visible signal-red focus ring and a 44px minimum target. The settled page renders without JavaScript; motion respects prefers-reduced-motion, which de-pins the landing to a readable document.

## Imagery Direction

### Pairs With

ticker-kinetic-motion

### Summary

High-contrast black-and-white editorial photography with strong directional motion blur and long-exposure light streaks — everything monochrome except one crimson-red element. The technique is transferable: it dresses any subject, and it is never the subject. Copy and imagery never contest the same ground; type sits on the calm edge of a frame or inverts cleanly through mix-blend difference.

### Subjects

- a contemporary dancer mid-leap with a trailing crimson ribbon
- a sprinter exploding off the blocks over a red lane stripe
- a lone figure descending a brutalist spiral staircase with a red handrail
- an editorial portrait snapping into motion with a single red earring
- a kinetic long-exposure of moving light

### Usage

Use full-frame high-contrast monochrome plates with one crimson accent for the hero and feature imagery; the ink UI frames the plate. Keep everything monochrome except the single red element; never use flat digital illustration, gradients, or a second accent colour.

---
version: "alpha"
name: "Ticker"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FFFFFF"
  surface: "#F5F5F2"
  surface_solid: "#FFFFFF"
  text: "#0A0A0A"
  muted: "#6B6B6B"
  accent: "#E11D48"
  accent_2: "#0A0A0A"
  on_accent: "#FFFFFF"
  success: "#1B7F4B"
  warning: "#B45309"
  error: "#C81E3A"
  info: "#1D4ED8"
typography:
  headline-lg:
    fontFamily: "Space Grotesk"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.03em"
  headline-md:
    fontFamily: "Space Grotesk"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.03em"
  label-md:
    fontFamily: "JetBrains Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"
  step-8: "128px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  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: "#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"
---

# Ticker

## Overview

Ticker is a kinetic-typographic interface where typography is the interface. Every screen is a typographic composition: letterforms carry meaning and hierarchy, black and white hold the canvas, and a single signal red punctuates each decision. Type is set, line by line, along a red baseline — the way hot-metal type once struck a page — and motion reveals structure rather than decorating it. Ticker is the corrected, current-standards form of the Kinetic Typography lineage.

### Values

- Typography is the interface: letterforms establish hierarchy and guide the eye; ornamentation is zero.
- The set-line: a signal-red baseline where display lines wipe into place with a clip-path reveal.
- Extreme weight contrast: Space Grotesk 800 against Inter 300/400 — the light end reads, the heavy end commands.
- One accent: pure ink and paper carry the canvas; signal red #E11D48 is the only departure, used like a highlighter.
- Motion as meaning: snappy under-300ms wipes and mix-blend-difference inversions, never leisurely decoration.
- Editorial to the core: left-aligned reading, generous whitespace, borderless surfaces, folio rules as furniture.

### Anti-Values

- A second accent, a gradient wash, or a pastel background.
- Boxed cards, grey borders, left accent edges, or navigation trapped in a pill.
- In-between radii; anything but square 0 (avatars and switches aside).
- Centred body text, wrapped control labels, or a headline clipping the mobile edge.
- Decorative motion without narrative purpose, or animation exceeding 300ms.

## 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 | `#FFFFFF` |
| surface | `#F5F5F2` |
| surface_solid | `#FFFFFF` |
| text | `#0A0A0A` |
| muted | `#6B6B6B` |
| accent | `#E11D48` |
| accent_2 | `#0A0A0A` |
| on_accent | `#FFFFFF` |
| success | `#1B7F4B` |
| warning | `#B45309` |
| error | `#C81E3A` |
| info | `#1D4ED8` |

## 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**: Inter, 17px, weight 400, line-height 1.5.
- **Label-Md**: JetBrains Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

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

### Grid

Editorial column on a 1180-1280px max width, centred with auto margins; asymmetric 2fr/1fr splits for text-plus-aside. Use minmax(0,1fr) columns and min-width:0 children so nothing blows out. Only the full-bleed hero and landing plates span 100vw.

### Whitespace

8px rhythm — 16px between related items, 32px between groups, 64-128px between sections; generous padding above every title. Cards get 24-28px internal padding.

### Density

Generous and balanced; content-defined surfaces rather than heavy chrome. The landing HUD and dashboard readouts pack mono islands densely against airy display type.

### Responsive

Renders from ~390px to 2560px+. Four art-directed breakpoints: wide ~1920+, desktop 1440, tablet 768-1024 (its own considered layout), mobile 390. On mobile, stack to a single column, hide non-essential nav and table columns, and shrink display type via clamp() so it never clips the edge. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw.

### Breakpoints

- **Wide**: 1920px+
- **Lg**: 1025-1919px
- **Md**: 768-1024px
- **Sm**: 561-767px
- **Xs**: below 561px

## Elevation & Depth

### Shadows

- **Sm**: 0 1px 0 rgba(10,10,10,0.06)
- **Md**: 0 8px 24px rgba(10,10,10,0.08)
- **Lg**: 0 24px 60px rgba(10,10,10,0.12)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: Pure white paper ground with a near-white surface tint; flat and borderless. Content is defined by type weight, horizontal rules, and one signal-red set-line. One inverted black frame per composition marks a dramatic contrast break.
- **Card Style**: Borderless cards defined by a surface fill and a mono index; on hover a signal-red set-line wipes across the top. Never boxed, never a left accent edge, never nested.
- **Bg Pattern**: none; an optional faint kinetic streak field sits behind the inverted hero only.

### Borders

- **Default Width**: 0
- **Accent Width**: 4px
- **Style**: horizontal rules only — never box borders or left accent edges
- **Character**: editorial folio rules: thin ink hairline separators and one bold signal-red 4px set-line

## Components

### Composition

Compose every screen as a typographic set: oversized display type strikes into place along a signal-red set-line, body copy left-aligned in an editorial column. Cards are borderless surface fills; navigation sits open across the header as a masthead, never trapped in a pill or floating card. One inverted black frame per view marks a contrast break.

### Hierarchy

Hierarchy comes from register and weight, not colour: Space Grotesk 800 for display and headings, Inter 300/400 for reading, JetBrains Mono 11-13px for metadata and readouts. Scale contrast is dramatic between a viewport-scale headline and tiny mono labels; the page stays pure ink and paper with one signal red.

### Density

Generous whitespace on an 8px rhythm, always padding above titles; balance density across the canvas — never a crowded cluster beside a starved void. Horizontal rules (one bold red set-line, thin ink hairlines) are the only line vocabulary.

### Signature

The set-line: a signal-red baseline where type sets. Display lines wipe into being from it via clip-path; overlapping type inverts through mix-blend difference; a monospace readout counts the lines. The mechanic recolours through components — buttons wipe-fill on hover, active tabs and nav carry a red baseline, links ink up with a red sweep, inputs focus to a red underline, meters and progress are red rules.

## 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-019f8acc-0a21-7852-bce3-ccea9bc93c73/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 Lead with oversized display type set along the signal-red set-line.
- Do Pair extreme weights — 800 display against 300/400 body — and use JetBrains Mono for metadata.
- Do Use signal red like a highlighter: CTAs, active states, the set-line, one detonation.
- Do Keep motion under 300ms with snappy easing; wipe, don't fade; respect reduced motion.
- Do Keep the ground pure ink and paper; define cards by surface fill and a mono index, not a box.
- Don't Add a second accent, a gradient, or a pastel wash.
- Don't Box a card in a border, give it an accent edge, or trap navigation in a pill.
- Don't Round corners to an in-between radius; use anything but 0 or 9999.
- Don't Centre body paragraphs, wrap a control label, or let a headline clip the mobile edge.
- Don't Use emoji or symbol glyphs as icons; use inline SVG primitives.

### Accessibility

Ink on paper meets WCAG AA (19.4:1); signal red pairs with a label or shape so colour is never the sole signal. Every control has a visible signal-red focus ring and a 44px minimum target. The settled page renders without JavaScript; motion respects prefers-reduced-motion, which de-pins the landing to a readable document.

## Imagery Direction

### Pairs With

ticker-kinetic-motion

### Summary

High-contrast black-and-white editorial photography with strong directional motion blur and long-exposure light streaks — everything monochrome except one crimson-red element. The technique is transferable: it dresses any subject, and it is never the subject. Copy and imagery never contest the same ground; type sits on the calm edge of a frame or inverts cleanly through mix-blend difference.

### Subjects

- a contemporary dancer mid-leap with a trailing crimson ribbon
- a sprinter exploding off the blocks over a red lane stripe
- a lone figure descending a brutalist spiral staircase with a red handrail
- an editorial portrait snapping into motion with a single red earring
- a kinetic long-exposure of moving light

### Usage

Use full-frame high-contrast monochrome plates with one crimson accent for the hero and feature imagery; the ink UI frames the plate. Keep everything monochrome except the single red element; never use flat digital illustration, gradients, or a second accent colour.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ticker",
  "type": "registry:theme",
  "title": "Ticker shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#0A0A0A",
      "card": "#F5F5F2",
      "card-foreground": "#0A0A0A",
      "popover": "#F5F5F2",
      "popover-foreground": "#0A0A0A",
      "primary": "#0A0A0A",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#6B6B6B",
      "muted-foreground": "#0A0A0A",
      "accent": "#E11D48",
      "accent-foreground": "#ffffff",
      "destructive": "#C81E3A",
      "border": "rgba(10,10,10,0.12)",
      "input": "rgba(10,10,10,0.12)",
      "ring": "#E11D48",
      "chart-1": "#0A0A0A",
      "chart-2": "#f4f4f5",
      "chart-3": "#E11D48",
      "chart-4": "#1B7F4B",
      "chart-5": "#B45309",
      "sidebar": "#F5F5F2",
      "sidebar-foreground": "#0A0A0A",
      "sidebar-primary": "#0A0A0A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1D4ED8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "rgba(10,10,10,0.12)",
      "sidebar-ring": "#E11D48",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#0A0A0A",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E11D48",
      "accent-foreground": "#ffffff",
      "destructive": "#C81E3A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E11D48",
      "chart-1": "#0A0A0A",
      "chart-2": "#f4f4f5",
      "chart-3": "#E11D48",
      "chart-4": "#1B7F4B",
      "chart-5": "#B45309",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#0A0A0A",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#E11D48",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E11D48",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019f8acc-0a21-7852-bce3-ccea9bc93c73",
    "slug": "ticker",
    "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_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```