Teletext

Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dither, with a narrow pixel display face (Jersey 10) and VT323 for body, labels and data.

Made by Claude · Claude Code · claude-sonnet-5-5

Download DESIGN.md

Tokens and rules, ready for an agent to follow.

Preview

Open full page

Built with

The art style its pictures are drawn in and the colours its tokens carry.

accent#55FF55

bg#0A0A0A

surface#161616

text#F2F2F2

muted#9AA39A

border#3A3F3A

surface solid#1E1E1E

accent 2#55FFFF

accent soft#FF55FF

PaletteIts colours: 9 of its 14 colour tokens

Typography

Each face set in this language's own words.

headline lgJersey 10, 31px, 700

Teletext

headline mdJersey 10, 25px, 600

Teletext

body mdVT323, 16px, 400

Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dith...

label mdVT323, 12px, 600

Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dith...

Specification

Philosophy

summary

Tokens

colors14

#0A0A0A

surface

#161616

surface solid

#1E1E1E

text

#F2F2F2

muted

#9AA39A

border

#3A3F3A

accent

#55FF55

accent 2

#55FFFF

accent soft

#FF55FF

on accent

#0A0A0A

success

#55FF55

warning

#FFF255

error

#FF5A5A

info

#55FFFF

typography3

heading font: Jersey 10, monospace
body font: VT323, monospace
mono font: VT323, monospace

radii4

none: 0px
md: 16px
lg: 24px
full: 9999px

spacing9

base: 8px
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 24px
2xl: 32px
3xl: 48px
4xl: 64px

Rules

components

### Composition Compose screens as nested utility windows: a command/status bar at the top, a primary work surface in the centre, and supporting instrument panels flanking it. Modules align to the 8px grid and behave like rearrangeable software panes rather than marketing cards. ### Hierarchy Title bars, inverse labels, colour-state chips and boxed readouts define hierarchy. Large type is reserved for screen titles, caption lines and critical counters; most hierarchy comes from framing, fill contrast and status-colour changes. ### Density Compact and information-rich: controls sit close, lists are multi-row, and readouts expose many simultaneous states without collapsing into modern minimalism. ### Keys and labels Keys share one shape and height (42px, 34px for the small set) with their label in uppercase VT323 on one line, centred. One key is the accent fill; the rest sit on the raised fill or transparent. On a landing, keys and chips may take the display face for a louder, poster-like voice, at the same cap height. ### Signature Patterns - Repeating-linear-gradient scanlines plus a checker-dither field on major surfaces so panels visibly emulate CRT phosphor texture and limited-colour shading, page-wide. - Dual-edge pixel framing on every window and key: a bright top-left border and a dark bottom-right border for the stepped bevel of DOS and 8-bit GUI shells. - Inverse-video title bars and status chips with uppercase terminal labels, where labels sit inside framed rectangles instead of floating above content. - Meters and charts built from discrete rectangular cells rather than smooth bars, making progress, memory and signal read as quantized and machine-like. - Narrow caption headlines in Jersey 10 that stay at full size inside small frames. - Recurring corner checker-pixels, hard 90-degree geometry and sprite-like icons so the interface never reads as a generic modern dashboard with a retro palette pasted on top. ### Links & Motion Links carry the language's own gesture: an inverse-video ink-up that fills the accent on hover, never a bare default underline. Motion is snappy and quantized (`steps()`): state changes step rather than glide, a cursor blink and a scanline sweep are the only ambient motion, and `prefers-reduced-motion` is respected. The settled, fully rendered state is the no-JS default; reveal motion is added on top behind a class the inline script sets.

Layout

summary

### Spacing Tokens - **Base**: `8px` - **Xs**: `4px` · **Sm**: `8px` · **Md**: `12px` · **Lg**: `16px` - **Xl**: `24px` · **2xl**: `32px` · **3xl**: `48px` · **4xl**: `64px` ### Grid A rigid 12-column desktop grid on an 8px base unit; panels snap to whole-column spans and all internal spacing resolves in multiples of 4px or 8px. ### Breakpoints At the tablet band (about 768 to 1024px) the three-zone workstation becomes its own considered two-column layout with full-width title bars preserved, never a mobile column stretched wide. At mobile (about 390px) it collapses to a single column: nav wraps or collapses, and data tables scroll horizontally only where necessary. Because the display face is narrow, headlines keep most of their size on small screens: a screen title holds the 56px step on tablet and phone, and a giant hero word is clamped by viewport width (about 25vw for eight letters) so it never runs past a 390px edge. ### Whitespace Whitespace is economical and structural: gaps separate windows and control groups, but empty space never overpowers the dense workstation character. Density is balanced across the canvas; no crowded cluster beside a starved void.

Guidance

Do

use the phosphor palette intentionally: green system, cyan signal, magenta memory.
set headlines, caption lines and big counters in Jersey 10, and everything else in VT323.
size each face by its cap height, so labels and headings never look shrunken next to body
snap icons, borders and layout edges to pixel-friendly values so the interface stays crisp.
prefer framed windows, title bars, meter blocks and ledger lists over floating cards.
run scanline and dither texture across large surfaces to keep the scene materially retro.

Avoid

set either face above weight 400 or let a browser synthesize a bold.
add a third family; data, labels and body all speak VT323.
introduce blur, translucent glass or soft radial lighting.
use rounded corners, pills or amorphous panels.
rely on smooth modern charts or gradients when segmented cells express the same state.
let whitespace become sparse luxury minimalism, or let control labels wrap.
mix glossy 3D or photographic hero imagery into the workstation scene: imagery stays in

Imagery

pairs with

dither-phosphor

art style id

en-019f3dbf-1cb8-7260-8034-d5c540aa2639

Katagami spec file

# Teletext

## Philosophy

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0A0A0A` |
| surface | `#161616` |
| surface_solid | `#1E1E1E` |
| text | `#F2F2F2` |
| muted | `#9AA39A` |
| border | `#3A3F3A` |
| accent | `#55FF55` |
| accent_2 | `#55FFFF` |
| accent_soft | `#FF55FF` |
| on_accent | `#0A0A0A` |
| success | `#55FF55` |
| warning | `#FFF255` |
| error | `#FF5A5A` |
| info | `#55FFFF` |

### Typography

- **Heading Font**: Jersey 10, monospace
- **Body Font**: VT323, monospace
- **Mono Font**: VT323, monospace

### Radii

- **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

## Rules

### Components

### Composition

Compose screens as nested utility windows: a command/status bar at the top, a primary work
surface in the centre, and supporting instrument panels flanking it. Modules align to the 8px
grid and behave like rearrangeable software panes rather than marketing cards.

### Hierarchy

Title bars, inverse labels, colour-state chips and boxed readouts define hierarchy. Large type is
reserved for screen titles, caption lines and critical counters; most hierarchy comes from
framing, fill contrast and status-colour changes.

### Density

Compact and information-rich: controls sit close, lists are multi-row, and readouts expose many
simultaneous states without collapsing into modern minimalism.

### Keys and labels

Keys share one shape and height (42px, 34px for the small set) with their label in uppercase
VT323 on one line, centred. One key is the accent fill; the rest sit on the raised fill or
transparent. On a landing, keys and chips may take the display face for a louder, poster-like
voice, at the same cap height.

### Signature Patterns

- Repeating-linear-gradient scanlines plus a checker-dither field on major surfaces so panels
visibly emulate CRT phosphor texture and limited-colour shading, page-wide.
- Dual-edge pixel framing on every window and key: a bright top-left border and a dark
bottom-right border for the stepped bevel of DOS and 8-bit GUI shells.
- Inverse-video title bars and status chips with uppercase terminal labels, where labels sit
inside framed rectangles instead of floating above content.
- Meters and charts built from discrete rectangular cells rather than smooth bars, making
progress, memory and signal read as quantized and machine-like.
- Narrow caption headlines in Jersey 10 that stay at full size inside small frames.
- Recurring corner checker-pixels, hard 90-degree geometry and sprite-like icons so the interface
never reads as a generic modern dashboard with a retro palette pasted on top.

### Links & Motion

Links carry the language's own gesture: an inverse-video ink-up that fills the accent on hover,
never a bare default underline. Motion is snappy and quantized (`steps()`): state changes step
rather than glide, a cursor blink and a scanline sweep are the only ambient motion, and
`prefers-reduced-motion` is respected. The settled, fully rendered state is the no-JS default;
reveal motion is added on top behind a class the inline script sets.

## Layout

### Summary

### Spacing Tokens

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

### Grid

A rigid 12-column desktop grid on an 8px base unit; panels snap to whole-column spans and all
internal spacing resolves in multiples of 4px or 8px.

### Breakpoints

At the tablet band (about 768 to 1024px) the three-zone workstation becomes its own considered
two-column layout with full-width title bars preserved, never a mobile column stretched wide. At
mobile (about 390px) it collapses to a single column: nav wraps or collapses, and data tables
scroll horizontally only where necessary. Because the display face is narrow, headlines keep
most of their size on small screens: a screen title holds the 56px step on tablet and phone, and
a giant hero word is clamped by viewport width (about 25vw for eight letters) so it never runs
past a 390px edge.

### Whitespace

Whitespace is economical and structural: gaps separate windows and control groups, but empty
space never overpowers the dense workstation character. Density is balanced across the canvas;
no crowded cluster beside a starved void.

## Guidance

### Do

- use the phosphor palette intentionally: green system, cyan signal, magenta memory.
- set headlines, caption lines and big counters in Jersey 10, and everything else in VT323.
- size each face by its cap height, so labels and headings never look shrunken next to body
- snap icons, borders and layout edges to pixel-friendly values so the interface stays crisp.
- prefer framed windows, title bars, meter blocks and ledger lists over floating cards.
- run scanline and dither texture across large surfaces to keep the scene materially retro.

### Don't

- set either face above weight 400 or let a browser synthesize a bold.
- add a third family; data, labels and body all speak VT323.
- introduce blur, translucent glass or soft radial lighting.
- use rounded corners, pills or amorphous panels.
- rely on smooth modern charts or gradients when segmented cells express the same state.
- let whitespace become sparse luxury minimalism, or let control labels wrap.
- mix glossy 3D or photographic hero imagery into the workstation scene: imagery stays in

## Imagery Direction

### Pairs With

dither-phosphor

### Art Style Id

en-019f3dbf-1cb8-7260-8034-d5c540aa2639

DESIGN.md file

---
version: "alpha"
name: "Teletext"
description: "Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dither, with a narrow pixel display face (Jersey 10) and VT323 for body, labels and data."
colors:
  bg: "#0A0A0A"
  surface: "#161616"
  surface_solid: "#1E1E1E"
  text: "#F2F2F2"
  muted: "#9AA39A"
  border: "#3A3F3A"
  accent: "#55FF55"
  accent_2: "#55FFFF"
  accent_soft: "#FF55FF"
  on_accent: "#0A0A0A"
  success: "#55FF55"
  warning: "#FFF255"
  error: "#FF5A5A"
  info: "#55FFFF"
typography:
  headline-lg:
    fontFamily: "Jersey 10, monospace"
    fontSize: "1.953rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Jersey 10, monospace"
    fontSize: "1.563rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "VT323, monospace"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "VT323, monospace"
    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"
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-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  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: "{colors.on_accent}"
    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"
---

# Teletext

## Overview

Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dither, with a narrow pixel display face (Jersey 10) and VT323 for body, labels and data.

## 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 | `#0A0A0A` |
| surface | `#161616` |
| surface_solid | `#1E1E1E` |
| text | `#F2F2F2` |
| muted | `#9AA39A` |
| border | `#3A3F3A` |
| accent | `#55FF55` |
| accent_2 | `#55FFFF` |
| accent_soft | `#FF55FF` |
| on_accent | `#0A0A0A` |
| success | `#55FF55` |
| warning | `#FFF255` |
| error | `#FF5A5A` |
| info | `#55FFFF` |

## Typography

- **Headline-Lg**: Jersey 10, monospace, 1.953rem, weight 700, line-height 1.1.
- **Headline-Md**: Jersey 10, monospace, 1.563rem, weight 600, line-height 1.15.
- **Body-Md**: VT323, monospace, 16px, weight 400, line-height 1.5.
- **Label-Md**: VT323, monospace, 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`

### Summary

### Spacing Tokens

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

### Grid

A rigid 12-column desktop grid on an 8px base unit; panels snap to whole-column spans and all
internal spacing resolves in multiples of 4px or 8px.

### Breakpoints

At the tablet band (about 768 to 1024px) the three-zone workstation becomes its own considered
two-column layout with full-width title bars preserved, never a mobile column stretched wide. At
mobile (about 390px) it collapses to a single column: nav wraps or collapses, and data tables
scroll horizontally only where necessary. Because the display face is narrow, headlines keep
most of their size on small screens: a screen title holds the 56px step on tablet and phone, and
a giant hero word is clamped by viewport width (about 25vw for eight letters) so it never runs
past a 390px edge.

### Whitespace

Whitespace is economical and structural: gaps separate windows and control groups, but empty
space never overpowers the dense workstation character. Density is balanced across the canvas;
no crowded cluster beside a starved void.

## Shapes

### Rounded

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

## Components

### Components

### Composition

Compose screens as nested utility windows: a command/status bar at the top, a primary work
surface in the centre, and supporting instrument panels flanking it. Modules align to the 8px
grid and behave like rearrangeable software panes rather than marketing cards.

### Hierarchy

Title bars, inverse labels, colour-state chips and boxed readouts define hierarchy. Large type is
reserved for screen titles, caption lines and critical counters; most hierarchy comes from
framing, fill contrast and status-colour changes.

### Density

Compact and information-rich: controls sit close, lists are multi-row, and readouts expose many
simultaneous states without collapsing into modern minimalism.

### Keys and labels

Keys share one shape and height (42px, 34px for the small set) with their label in uppercase
VT323 on one line, centred. One key is the accent fill; the rest sit on the raised fill or
transparent. On a landing, keys and chips may take the display face for a louder, poster-like
voice, at the same cap height.

### Signature Patterns

- Repeating-linear-gradient scanlines plus a checker-dither field on major surfaces so panels
  visibly emulate CRT phosphor texture and limited-colour shading, page-wide.
- Dual-edge pixel framing on every window and key: a bright top-left border and a dark
  bottom-right border for the stepped bevel of DOS and 8-bit GUI shells.
- Inverse-video title bars and status chips with uppercase terminal labels, where labels sit
  inside framed rectangles instead of floating above content.
- Meters and charts built from discrete rectangular cells rather than smooth bars, making
  progress, memory and signal read as quantized and machine-like.
- Narrow caption headlines in Jersey 10 that stay at full size inside small frames.
- Recurring corner checker-pixels, hard 90-degree geometry and sprite-like icons so the interface
  never reads as a generic modern dashboard with a retro palette pasted on top.

### Links & Motion

Links carry the language's own gesture: an inverse-video ink-up that fills the accent on hover,
never a bare default underline. Motion is snappy and quantized (`steps()`): state changes step
rather than glide, a cursor blink and a scanline sweep are the only ambient motion, and
`prefers-reduced-motion` is respected. The settled, fully rendered state is the no-JS default;
reveal motion is added on top behind a class the inline script sets.

## 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-01a11387-66f4-7893-912b-b9e3d49ae184/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a11387-66f4-7893-912b-b9e3d49ae184/shadcn.json` (registry theme), `/language/en-01a11387-66f4-7893-912b-b9e3d49ae184/shadcn-components.md` (component recipes) and `/language/en-01a11387-66f4-7893-912b-b9e3d49ae184/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 the phosphor palette intentionally: green system, cyan signal, magenta memory.
- Do set headlines, caption lines and big counters in Jersey 10, and everything else in VT323.
- Do size each face by its cap height, so labels and headings never look shrunken next to body
- Do snap icons, borders and layout edges to pixel-friendly values so the interface stays crisp.
- Do prefer framed windows, title bars, meter blocks and ledger lists over floating cards.
- Do run scanline and dither texture across large surfaces to keep the scene materially retro.
- Don't set either face above weight 400 or let a browser synthesize a bold.
- Don't add a third family; data, labels and body all speak VT323.
- Don't introduce blur, translucent glass or soft radial lighting.
- Don't use rounded corners, pills or amorphous panels.
- Don't rely on smooth modern charts or gradients when segmented cells express the same state.
- Don't let whitespace become sparse luxury minimalism, or let control labels wrap.
- Don't mix glossy 3D or photographic hero imagery into the workstation scene: imagery stays in

## Imagery Direction

### Pairs With

dither-phosphor

### Art Style Id

en-019f3dbf-1cb8-7260-8034-d5c540aa2639

shadcn/ui theme file

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "teletext",
  "type": "registry:theme",
  "title": "Teletext shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A0A0A",
      "foreground": "#F2F2F2",
      "card": "#161616",
      "card-foreground": "#F2F2F2",
      "popover": "#161616",
      "popover-foreground": "#F2F2F2",
      "primary": "#F2F2F2",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9AA39A",
      "muted-foreground": "#F2F2F2",
      "accent": "#55FF55",
      "accent-foreground": "#111111",
      "destructive": "#FF5A5A",
      "border": "#3A3F3A",
      "input": "#3A3F3A",
      "ring": "#55FF55",
      "chart-1": "#F2F2F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#55FF55",
      "chart-4": "#55FF55",
      "chart-5": "#FFF255",
      "sidebar": "#161616",
      "sidebar-foreground": "#F2F2F2",
      "sidebar-primary": "#F2F2F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#55FFFF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#3A3F3A",
      "sidebar-ring": "#55FF55",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F2F2F2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#55FF55",
      "accent-foreground": "#111111",
      "destructive": "#FF5A5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#55FF55",
      "chart-1": "#F2F2F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#55FF55",
      "chart-4": "#55FF55",
      "chart-5": "#FFF255",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F2F2F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#55FF55",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#55FF55",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11387-66f4-7893-912b-b9e3d49ae184",
    "slug": "teletext",
    "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": [
        "body_font",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "2xl",
        "3xl",
        "4xl",
        "base",
        "lg",
        "md",
        "sm",
        "xl",
        "xs"
      ]
    }
  }
}
```

shadcn/ui kit

Theme variables only

The theme variables are generated from the tokens. Component recipes and preview shots have not been written for this language yet.

Theme check

Standard shadcn primitives drawn with this language’s theme variables.

primaryaccentsurfacemutedwarningerror

table rhythm

button	ok
card	ok
input	ok

DESIGN.md with shadcn

For an app that uses shadcn/ui: the DESIGN.md plus the install list, theme variables, component recipes, preview shots and a starter TSX file, in one Markdown file.

Implementation filesShow

The same pieces as separate files: theme, CSS, TSX starter, recipes and the preview contract.

shadcn add

npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table

theme css

:root {
  --background: #0A0A0A;
  --foreground: #F2F2F2;
  --card: #161616;
  --card-foreground: #F2F2F2;
  --popover: #161616;
  --popover-foreground: #F2F2F2;
  --primary: #F2F2F2;
  --primary-foreground: #111111;
  --secondary: #f4f4f5;
  --secondary-foreground: #111111;
  --muted: #9AA39A;
  --muted-foreground: #F2F2F2;
  --accent: #55FF55;
  --accent-foreground: #111111;
  --destructive: #FF5A5A;
  --border: #3A3F3A;
  --input: #3A3F3A;
  --ring: #55FF55;
  --chart-1: #F2F2F2;
  --chart-2: #f4f4f5;
  --chart-3: #55FF55;
  --chart-4: #55FF55;
  --chart-5: #FFF255;
  --sidebar: #161616;
  --sidebar-foreground: #F2F2F2;
  --sidebar-primary: #F2F2F2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #55FFFF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #3A3F3A;
  --sidebar-ring: #55FF55;
  --radius: 16px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #F2F2F2;
  --primary-foreground: #111111;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #55FF55;
  --accent-foreground: #111111;
  --destructive: #FF5A5A;
  --border: #303642;
  --input: #303642;
  --ring: #55FF55;
  --chart-1: #F2F2F2;
  --chart-2: #f4f4f5;
  --chart-3: #55FF55;
  --chart-4: #55FF55;
  --chart-5: #FFF255;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #F2F2F2;
  --sidebar-primary-foreground: #111111;
  --sidebar-accent: #55FF55;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #55FF55;
  --radius: 16px;
}

tsx starter

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function TeletextShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Teletext</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}

theme JSONGenerated from the tokens

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "teletext",
  "type": "registry:theme",
  "title": "Teletext shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0A0A0A",
      "foreground": "#F2F2F2",
      "card": "#161616",
      "card-foreground": "#F2F2F2",
      "popover": "#161616",
      "popover-foreground": "#F2F2F2",
      "primary": "#F2F2F2",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9AA39A",
      "muted-foreground": "#F2F2F2",
      "accent": "#55FF55",
      "accent-foreground": "#111111",
      "destructive": "#FF5A5A",
      "border": "#3A3F3A",
      "input": "#3A3F3A",
      "ring": "#55FF55",
      "chart-1": "#F2F2F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#55FF55",
      "chart-4": "#55FF55",
      "chart-5": "#FFF255",
      "sidebar": "#161616",
      "sidebar-foreground": "#F2F2F2",
      "sidebar-primary": "#F2F2F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#55FFFF",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#3A3F3A",
      "sidebar-ring": "#55FF55",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F2F2F2",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#55FF55",
      "accent-foreground": "#111111",
      "destructive": "#FF5A5A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#55FF55",
      "chart-1": "#F2F2F2",
      "chart-2": "#f4f4f5",
      "chart-3": "#55FF55",
      "chart-4": "#55FF55",
      "chart-5": "#FFF255",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F2F2F2",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#55FF55",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#55FF55",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a11387-66f4-7893-912b-b9e3d49ae184",
    "slug": "teletext",
    "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": [
        "body_font",
        "heading_font",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none"
      ],
      "spacing": [
        "2xl",
        "3xl",
        "4xl",
        "base",
        "lg",
        "md",
        "sm",
        "xl",
        "xs"
      ]
    }
  }
}

component recipesGenerated from the tokens

# Teletext shadcn/ui Components

Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-01a11387-66f4-7893-912b-b9e3d49ae184`
Slug: `teletext`

## Intent

Dither's CGA phosphor workstation set for caption-length text in video and phone frames: the same phosphor palette, framed windows and checker-dither, with a narrow pixel display face (Jersey 10) and VT323 for body, labels and data.

## Required primitives

- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

## Token cues

Colors:

{
  "bg": "#0A0A0A",
  "surface": "#161616",
  "surface_solid": "#1E1E1E",
  "text": "#F2F2F2",
  "muted": "#9AA39A",
  "border": "#3A3F3A",
  "accent": "#55FF55",
  "accent_2": "#55FFFF",
  "accent_soft": "#FF55FF",
  "on_accent": "#0A0A0A",
  "success": "#55FF55",
  "warning": "#FFF255",
  "error": "#FF5A5A",
  "info": "#55FFFF"
}

Typography:

{
  "heading_font": "Jersey 10, monospace",
  "body_font": "VT323, monospace",
  "mono_font": "VT323, monospace"
}

## Visual character to preserve

- Make the source language's structural identity visible in every component state.

## ShadSync visual profile

{
  "family": "system",
  "material": "flat",
  "contour": "default",
  "border": "solid",
  "underlay": false,
  "grain": false,
  "stickerBadges": false,
  "motion": "still",
  "density": "balanced",
  "accents": [
    "primary",
    "accent",
    "secondary",
    "muted"
  ]
}

## Signature component recipes

### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.

### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.

### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.

### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.

### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.

## Preview shots

- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.

## Implementation contract

- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/teletext/registry-theme.json` variables, then use these recipes for composition and state design.
- Preserve Katagami token names as source metadata; shadcn semantic names are only the export surface.
- Do: use the phosphor palette intentionally: green system, cyan signal, magenta memory.; set headlines, caption lines and big counters in Jersey 10, and everything else in VT323.; size each face by its cap height, so labels and headings never look shrunken next to body; snap icons, borders and layout edges to pixel-friendly values so the interface stays crisp.; prefer framed windows, title bars, meter blocks and ledger lists over floating cards.; run scanline and dither texture across large surfaces to keep the scene materially retro.
- Do not: set either face above weight 400 or let a browser synthesize a bold.; add a third family; data, labels and body all speak VT323.; introduce blur, translucent glass or soft radial lighting.; use rounded corners, pills or amorphous panels.; rely on smooth modern charts or gradients when segmented cells express the same state.; let whitespace become sparse luxury minimalism, or let control labels wrap.; mix glossy 3D or photographic hero imagery into the workstation scene: imagery stays in

## Copy-paste component example

This generated starter proves the import shape. Production Katagami agents should replace it with a language-specific product composition.

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function TeletextShadcnKit() {
  return (
    <section className="grid gap-4 rounded-[var(--radius)] border bg-background p-4 text-foreground">
      <div className="flex items-start justify-between gap-4">
        <div>
          <Badge variant="outline">shadcn/ui</Badge>
          <h2 className="mt-3 text-2xl font-semibold tracking-tight">Teletext</h2>
          <p className="mt-1 max-w-xl text-sm text-muted-foreground">
            Use the Katagami registry theme, then compose these shadcn primitives
            with the language-specific component recipes.
          </p>
        </div>
        <Button>Apply theme</Button>
      </div>

      <Tabs defaultValue="components">
        <TabsList>
          <TabsTrigger value="components">Components</TabsTrigger>
          <TabsTrigger value="states">States</TabsTrigger>
          <TabsTrigger value="export">Export</TabsTrigger>
        </TabsList>
      </Tabs>

      <Card>
        <CardHeader>
          <CardTitle>Component recipe</CardTitle>
          <CardDescription>
            Replace this starter content with the agent-authored product scene
            from components.md and preview-shots.json.
          </CardDescription>
        </CardHeader>
        <CardContent className="grid gap-3 sm:grid-cols-[1fr_auto]">
          <Input defaultValue="Tokenized shadcn surface" aria-label="Recipe name" />
          <Button variant="secondary">Preview state</Button>
        </CardContent>
        <CardFooter className="justify-between">
          <Badge>Ready</Badge>
          <Button variant="outline">Copy recipe</Button>
        </CardFooter>
      </Card>
    </section>
  );
}
```

## Layout notes

{
  "summary": "### Spacing Tokens\n\n- **Base**: `8px`\n- **Xs**: `4px` · **Sm**: `8px` · **Md**: `12px` · **Lg**: `16px`\n- **Xl**: `24px` · **2xl**: `32px` · **3xl**: `48px` · **4xl**: `64px`\n\n### Grid\n\nA rigid 12-column desktop grid on an 8px base unit; panels snap to whole-column spans and all\ninternal spacing resolves in multiples of 4px or 8px.\n\n### Breakpoints\n\nAt the tablet band (about 768 to 1024px) the three-zone workstation becomes its own considered\ntwo-column layout with full-width title bars preserved, never a mobile column stretched wide. At\nmobile (about 390px) it collapses to a single column: nav wraps or collapses, and data tables\nscroll horizontally only where necessary. Because the display face is narrow, headlines keep\nmost of their size on small screens: a screen title holds the 56px step on tablet and phone, and\na giant hero word is clamped by viewport width (about 25vw for eight letters) so it never runs\npast a 390px edge.\n\n### Whitespace\n\nWhitespace is economical and structural: gaps separate windows and control groups, but empty\nspace never overpowers the dense workstation character. Density is balanced across the canvas;\nno crowded cluster beside a starved void."
}

preview shotsGenerated from the tokens

{
  "artifact": "katagami:shadcn-preview-shots",
  "version": "preview-shots-v1",
  "generator": "katagami-ui-compatibility-projection",
  "generatedBy": "katagami-ui-projection",
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "renderable": true,
  "language": {
    "id": "en-01a11387-66f4-7893-912b-b9e3d49ae184",
    "name": "Teletext",
    "slug": "teletext"
  },
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "identityNotes": [],
  "visualProfile": {
    "family": "system",
    "material": "flat",
    "contour": "default",
    "border": "solid",
    "underlay": false,
    "grain": false,
    "stickerBadges": false,
    "motion": "still",
    "density": "balanced",
    "accents": [
      "primary",
      "accent",
      "secondary",
      "muted"
    ]
  },
  "shots": [
    {
      "id": "application-shell",
      "title": "Application shell",
      "viewport": "desktop",
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table"
      ],
      "composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table or list density"
      ],
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "scene": {
        "eyebrow": "workspace spread",
        "headline": "Teletext launch room",
        "description": "A product team workspace where navigation, filters, metrics, and dense rows carry the language's visible structure.",
        "primaryAction": "Apply theme",
        "secondaryAction": "Review states",
        "stats": [
          {
            "label": "components",
            "value": "16",
            "tone": "accent"
          },
          {
            "label": "states",
            "value": "ready"
          },
          {
            "label": "density",
            "value": "balanced",
            "tone": "warning"
          }
        ],
        "rows": [
          {
            "label": "Primary flow",
            "value": "mapped",
            "status": "active"
          },
          {
            "label": "Token coverage",
            "value": "semantic",
            "status": "synced"
          },
          {
            "label": "Responsive proof",
            "value": "queued",
            "status": "review"
          }
        ],
        "statuses": [
          "Active",
          "Synced",
          "Draft"
        ]
      }
    },
    {
      "id": "detail-editor",
      "title": "Detail editor",
      "viewport": "tablet",
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "slider",
        "dialog",
        "sheet"
      ],
      "composition": "A focused editing flow with form fields, validation, confirmation, and a contextual side panel.",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content"
      ],
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "scene": {
        "eyebrow": "editing flow",
        "headline": "Language recipe editor",
        "description": "A focused form proving labels, validation, toggles, panel rhythm, and action hierarchy.",
        "primaryAction": "Save recipe",
        "secondaryAction": "Open sheet",
        "fields": [
          {
            "label": "Component family",
            "value": "Narrative cards"
          },
          {
            "label": "State treatment",
            "value": "Visible focus + validation"
          },
          {
            "label": "Motion",
            "value": "Small lift, no opacity-only fade"
          }
        ],
        "statuses": [
          "Focus",
          "Invalid",
          "Confirmed"
        ]
      }
    },
    {
      "id": "data-operations",
      "title": "Data operations",
      "viewport": "mobile",
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator"
      ],
      "composition": "A compact operational view proving row rhythm, stacked actions, menu states, badges, and empty/destructive states.",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system"
      ],
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "scene": {
        "eyebrow": "operations",
        "headline": "Compact review queue",
        "description": "A narrow viewport scene with rows, menus, tooltips, badges, and destructive affordances.",
        "primaryAction": "Resolve",
        "secondaryAction": "Filter",
        "rows": [
          {
            "label": "Button hierarchy",
            "value": "approved",
            "status": "ok"
          },
          {
            "label": "Table rhythm",
            "value": "needs pass",
            "status": "watch"
          },
          {
            "label": "Empty state",
            "value": "designed",
            "status": "done"
          }
        ],
        "statuses": [
          "Queued",
          "Blocked",
          "Done"
        ]
      }
    }
  ],
  "componentRecipes": [
    {
      "primitive": "button",
      "intent": "Prove action hierarchy, focus, disabled, and destructive states."
    },
    {
      "primitive": "card",
      "intent": "Carry the language surface, border, elevation, and density rules."
    },
    {
      "primitive": "input",
      "intent": "Show labels, focus rings, validation, and spacing rhythm."
    },
    {
      "primitive": "textarea",
      "intent": "Show longer guidance, validation copy, and writing density."
    },
    {
      "primitive": "select",
      "intent": "Show filtering, selection contrast, and menu trigger styling."
    },
    {
      "primitive": "dialog",
      "intent": "Show centered decision states and overlay treatment."
    },
    {
      "primitive": "sheet",
      "intent": "Show contextual side panels and responsive editing."
    },
    {
      "primitive": "tabs",
      "intent": "Show navigational structure and active/inactive contrast."
    },
    {
      "primitive": "badge",
      "intent": "Show compact status vocabulary and semantic colors."
    },
    {
      "primitive": "separator",
      "intent": "Show section rhythm without generic gray dividers."
    },
    {
      "primitive": "checkbox",
      "intent": "Show binary selection with visible focus and checked states."
    },
    {
      "primitive": "switch",
      "intent": "Show settings toggles and on/off contrast."
    },
    {
      "primitive": "slider",
      "intent": "Show numeric adjustment with track/thumb styling."
    },
    {
      "primitive": "tooltip",
      "intent": "Show concise explanation styling above compact controls."
    },
    {
      "primitive": "dropdown-menu",
      "intent": "Show action menus, destructive items, and grouped choices."
    },
    {
      "primitive": "table",
      "intent": "Show dense operational data, separators, row states, and responsive behavior."
    }
  ],
  "qualityRules": {
    "do": [
      "use the phosphor palette intentionally: green system, cyan signal, magenta memory.",
      "set headlines, caption lines and big counters in Jersey 10, and everything else in VT323.",
      "size each face by its cap height, so labels and headings never look shrunken next to body",
      "snap icons, borders and layout edges to pixel-friendly values so the interface stays crisp.",
      "prefer framed windows, title bars, meter blocks and ledger lists over floating cards.",
      "run scanline and dither texture across large surfaces to keep the scene materially retro."
    ],
    "dont": [
      "set either face above weight 400 or let a browser synthesize a bold.",
      "add a third family; data, labels and body all speak VT323.",
      "introduce blur, translucent glass or soft radial lighting.",
      "use rounded corners, pills or amorphous panels.",
      "rely on smooth modern charts or gradients when segmented cells express the same state.",
      "let whitespace become sparse luxury minimalism, or let control labels wrap.",
      "mix glossy 3D or photographic hero imagery into the workstation scene: imagery stays in"
    ]
  }
}

Try a remix

Keep Teletext and swap a palette and an art style onto it. The landing recolors live.

UI language

Teletext

Palette

Art style

Family

Evolved from

Dither