Emigre Vernacular Type Console

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

:root {
  --background: #F4F2EA;
  --foreground: #050505;
  --card: #FFFFFF;
  --card-foreground: #050505;
  --popover: #FFFFFF;
  --popover-foreground: #050505;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #2B2B2B;
  --secondary-foreground: #ffffff;
  --muted: #6F6A61;
  --muted-foreground: #050505;
  --accent: #FFFFFF;
  --accent-foreground: #111111;
  --destructive: #B3261E;
  --border: #050505;
  --input: #050505;
  --ring: #FFFFFF;
  --chart-1: #050505;
  --chart-2: #2B2B2B;
  --chart-3: #FFFFFF;
  --chart-4: #167B3F;
  --chart-5: #A85D00;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #050505;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #155E9F;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #050505;
  --sidebar-ring: #FFFFFF;
  --radius: 2px;
}

.dark {
  --background: #0f1115;
  --foreground: #f8fafc;
  --card: #181b22;
  --card-foreground: #f8fafc;
  --popover: #181b22;
  --popover-foreground: #f8fafc;
  --primary: #050505;
  --primary-foreground: #ffffff;
  --secondary: #252a33;
  --secondary-foreground: #f8fafc;
  --muted: #252a33;
  --muted-foreground: #a1a1aa;
  --accent: #FFFFFF;
  --accent-foreground: #111111;
  --destructive: #B3261E;
  --border: #303642;
  --input: #303642;
  --ring: #FFFFFF;
  --chart-1: #050505;
  --chart-2: #2B2B2B;
  --chart-3: #FFFFFF;
  --chart-4: #167B3F;
  --chart-5: #A85D00;
  --sidebar: #181b22;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #050505;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #FFFFFF;
  --sidebar-accent-foreground: #111111;
  --sidebar-border: #303642;
  --sidebar-ring: #FFFFFF;
  --radius: 2px;
}

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 EmigreVernacularTypeConsoleShadcnKit() {
  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">Emigre Vernacular Type Console</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>
  );
}

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "cssVars": {
    "dark": {
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "background": "#0f1115",
      "border": "#303642",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "destructive": "#D71920",
      "foreground": "#f8fafc",
      "input": "#303642",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "sidebar": "#181b22",
      "sidebar-accent": "#111111",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#111111"
    },
    "light": {
      "accent": "#111111",
      "accent-foreground": "#ffffff",
      "background": "#F7F4EC",
      "border": "#050505",
      "card": "#FFFFFF",
      "card-foreground": "#050505",
      "chart-1": "#050505",
      "chart-2": "#F4F1E8",
      "chart-3": "#111111",
      "chart-4": "#138A36",
      "chart-5": "#C57A00",
      "destructive": "#D71920",
      "foreground": "#050505",
      "input": "#050505",
      "muted": "#6E6A61",
      "muted-foreground": "#050505",
      "popover": "#FFFFFF",
      "popover-foreground": "#050505",
      "primary": "#050505",
      "primary-foreground": "#ffffff",
      "radius": "2px",
      "ring": "#111111",
      "secondary": "#F4F1E8",
      "secondary-foreground": "#111111",
      "sidebar": "#FFFFFF",
      "sidebar-accent": "#0057B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#050505",
      "sidebar-foreground": "#050505",
      "sidebar-primary": "#050505",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-ring": "#111111"
    },
    "theme": {}
  },
  "meta": {
    "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",
    "languageId": "en-019e8a06-84ef-7383-b9a9-b58c50bc77f7",
    "nativeTokenNames": {
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "colors": [
        "accent",
        "background",
        "border",
        "error",
        "info",
        "muted",
        "primary",
        "secondary",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "letter_spacing",
        "line_height",
        "mono_font",
        "scale_ratio"
      ]
    },
    "slug": "emigre-vernacular-type-console",
    "source": "katagami"
  },
  "name": "emigre-vernacular-type-console",
  "title": "Emigre Vernacular Type Console shadcn Theme",
  "type": "registry:theme"
}

# shadcn/ui Components — Emigre Vernacular Type Console

Author: `katagami-agent`

## ShadSync visual profile
Translate the Katagami language into local shadcn/ui primitives with a monochrome vernacular type-console profile: black ink borders over warm paper, condensed grotesk command headings (`Archivo Narrow`), serif annotations (`Archivo Narrow`), and monospaced terminal data (`Sono`). Use semantic color only for success, warning, error, and info states. Surfaces should feel like framed printed command sheets: double rules, crop ticks, registration marks, bitmap hatching, clipped jumbo words, and functional manga-SFX callouts attached to actual state.

Visual profile values: family `postmodern-vernacular-type-console`; material `ink-on-newsprint-console-paper`; contour `rectangular-cropped-panels`; border `black-double-rule-with-crop-marks`; underlay/grain enabled; density `dense-but-framed`; motion `step-shift-command-tick`.

## Signature component recipes

### `button`
Use Button with uppercase condensed labels, square 0-2px radius, 1.5px black border, hard offset box-shadow, monospaced command prefix such as RUN/ or ACK/. Hover shifts 2px on a step timing curve; destructive/confirm variants use semantic red/green only.

### `card`
Use Card as a nested white paper panel with double black rules, corner crop ticks, clipped low-opacity display word behind content, and a rotated micro-label anchored to the frame. Never use soft neutral SaaS cards.

### `input`
Use Input as a terminal field: mono text, square outline, bracketed label, black focus ring offset by 2px, pale paper background, and optional halftone hatch underlay in the field group.

### `textarea`
Use Textarea for editorial annotations with serif body copy, black mechanical frame, line-number gutter or COMMAND/ prompt, and clipped caption strips attached to the top edge.

### `select`
Use SelectTrigger with rectangular sign-tab silhouette, uppercase current value, black chevron box, and dropdown items divided by rule lines with monospaced metadata.

### `dialog`
Use DialogContent like an overprinted command sheet: thick black perimeter, registration crosses, cropped headline word, stark footer actions, and status badge in the title rail.

### `sheet`
Use Sheet as a side rail command strip with vertical/rotated labels on desktop, stacked numbered sections on mobile, double-rule separators, and no blurred glass effects.

### `tabs`
Use TabsList as a row of numbered vernacular sign tabs. Active TabsTrigger is black ink on white with an offset underline and bracket corners; inactive tabs remain outlined paper labels.

### `badge`
Use Badge as functional SFX/state punctuation: POW/READY/ERR attached to data rows and cards, square or slightly skewed rectangular labels, semantic fill only for status.

### `separator`
Use Separator as a visible mechanical rule: 1.5px black, double where possible, sometimes paired with tiny crop ticks or metadata labels rather than faint gray dividers.

### `checkbox`
Use Checkbox with a square black frame, mono label, halftone checked background, and focus outline that reads like a printed registration target.

### `switch`
Use Switch as a binary terminal toggle with ON/OFF labels, squared track, black thumb, and tiny command caption; avoid pill-shaped mobile defaults unless explicitly labeled.

### `slider`
Use Slider with a ruled measuring track, square thumb, tick marks, monospaced value badge, and stepped motion to imply mechanical calibration.

### `tooltip`
Use Tooltip as a small annotation scrap: serif explanatory copy, black border, pointer as bracket/arrow, and a tiny rotated source label.

### `dropdown-menu`
Use DropdownMenuContent as a compact command menu with mono prefixes, rule separators, destructive actions in semantic red, and no translucent blur.

### `table`
Use Table for dense data operations with strong row rules, numbered tabs, sticky command header, status badges attached to cells, and hatching behind selected rows.

## Preview shots
- `application-shell`: a dense agent operations console with side command rail, framed work queue, clipped OPERATE word underlay, status badges, tabs, table, dropdown menu, and tooltip annotations.
- `detail-editor`: an artifact editing sheet with dialog-like card, input, textarea, select, checkbox/switch controls, serif notes, SFX state labels, and visible focus rules.
- `data-operations`: a calibration dashboard with table, slider, badges, separators, and mechanically ruled action cards for batch commands.

## Copy-paste component example
```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

export function VernacularConsolePanel() {
  return (
    <Card className="relative overflow-hidden rounded-[2px] border-2 border-black bg-[var(--background)] shadow-[6px_6px_0_#050505] before:absolute before:inset-x-4 before:top-3 before:border-t before:border-black">
      <span className="absolute -right-5 top-8 rotate-90 border border-black bg-white px-2 font-mono text-[10px] uppercase tracking-[0.24em]">SFX/READY</span>
      <CardHeader className="border-b-2 border-black">
        <Badge className="w-fit rounded-[1px] border border-black bg-white font-mono text-black">RUN/STATE</Badge>
        <CardTitle className="font-condensed text-3xl uppercase tracking-tight">Command proof</CardTitle>
      </CardHeader>
      <CardContent className="grid gap-4 p-4">
        <Tabs defaultValue="queue"><TabsList className="rounded-none border border-black bg-white"><TabsTrigger value="queue">01 Queue</TabsTrigger><TabsTrigger value="log">02 Log</TabsTrigger></TabsList></Tabs>
        <Input className="rounded-[1px] border-2 border-black font-mono focus-visible:ring-2 focus-visible:ring-black" placeholder="CMD / inspect artifact" />
        <Button className="rounded-[1px] border-2 border-black bg-black font-mono uppercase text-white shadow-[3px_3px_0_#6F6A61]">ACK / Commit</Button>
      </CardContent>
    </Card>
  )
}
```

{
  "artifact": "katagami:shadcn-preview-shots",
  "author": "katagami-agent",
  "componentRecipes": [
    {
      "intent": "Prove uppercase command labels, hard offset shadow, focus ring, disabled, confirm, and destructive states.",
      "primitive": "button"
    },
    {
      "intent": "Carry nested paper panels, double black borders, crop ticks, clipped display-word underlays, and dense framed hierarchy.",
      "primitive": "card"
    },
    {
      "intent": "Show bracket labels, monospaced terminal text, validation copy, black offset focus rings, and paper/hatch field surfaces.",
      "primitive": "input"
    },
    {
      "intent": "Show editorial annotation entry with COMMAND prompt, line-number gutter, serif guidance copy, and clipped caption strip.",
      "primitive": "textarea"
    },
    {
      "intent": "Show sign-tab trigger, uppercase selected value, boxed chevron, rule-divided items, and monospaced metadata.",
      "primitive": "select"
    },
    {
      "intent": "Show overprinted command sheet modal with thick perimeter, registration crosses, cropped headline word, footer actions, and status rail.",
      "primitive": "dialog"
    },
    {
      "intent": "Show side rail command strip with rotated labels, stacked numbered sections, double-rule separators, and no glass blur.",
      "primitive": "sheet"
    },
    {
      "intent": "Show numbered vernacular sign tabs with active offset underline, bracket corners, and inactive outlined paper labels.",
      "primitive": "tabs"
    },
    {
      "intent": "Show functional SFX/state punctuation attached to rows, forms, and cards with semantic fill reserved for status.",
      "primitive": "badge"
    },
    {
      "intent": "Show mechanical black rules, double rules, crop ticks, and metadata labels rather than faint gray dividers.",
      "primitive": "separator"
    },
    {
      "intent": "Show square black frame, mono label, halftone checked background, and registration-target focus treatment.",
      "primitive": "checkbox"
    },
    {
      "intent": "Show squared ON/OFF terminal toggle with command caption, black thumb, and non-pill mechanical geometry.",
      "primitive": "switch"
    },
    {
      "intent": "Show ruled measuring track, square thumb, tick marks, monospaced value badge, and stepped calibration motion.",
      "primitive": "slider"
    },
    {
      "intent": "Show annotation scrap with serif explanatory copy, black border, bracket pointer, and tiny rotated source label.",
      "primitive": "tooltip"
    },
    {
      "intent": "Show compact command menu with mono prefixes, ruled separators, destructive semantic red, and no translucent blur.",
      "primitive": "dropdown-menu"
    },
    {
      "intent": "Show dense operations rows, strong rules, sticky command header, numbered tabs, attached status badges, and hatched selection.",
      "primitive": "table"
    }
  ],
  "generatedBy": "katagami-agent",
  "identityNotes": [
    "Use monochrome typography as the image system: condensed command headings, serif annotations, and Sono-style monospaced operational data.",
    "Build every surface from nested rectangular frames, double rules, crop ticks, registration marks, halftone dots, bitmap hatching, and clipped jumbo command words.",
    "Reserve color for semantic status only: ready, warning, error, info, focus, and command outcomes.",
    "Attach manga-SFX and vernacular sign labels to real controls, rows, and state changes; do not float decorative stickers.",
    "Keep task hierarchy clear despite typographic fragmentation through hard rules, bracket metadata, and command rails."
  ],
  "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
  "language": {
    "id": "en-019e8a06-35ee-7ab1-becf-88898f040a04",
    "name": "Emigre Vernacular Type Console",
    "slug": "emigre-vernacular-type-console"
  },
  "primitives": [
    "button",
    "card",
    "input",
    "textarea",
    "select",
    "dialog",
    "sheet",
    "tabs",
    "badge",
    "separator",
    "checkbox",
    "switch",
    "slider",
    "tooltip",
    "dropdown-menu",
    "table"
  ],
  "qualityRules": {
    "do": [
      "Use black ink rules and paper surfaces before adding any color.",
      "Make every sign label describe command, navigation, status, or validation.",
      "Keep controls rectangular and visibly mechanical.",
      "Use serif annotation copy as secondary guidance only."
    ],
    "dont": [
      "Do not add neon gradients, chrome, holographic effects, or cyberpunk glows.",
      "Do not scatter Memphis shapes as decoration.",
      "Do not hide primary tasks behind illegible deconstruction.",
      "Do not rely on default rounded neutral shadcn cards."
    ]
  },
  "renderable": true,
  "requiresVisualProfile": true,
  "schema": "katagami:shadcn-preview-shots/renderable-v1",
  "shots": [
    {
      "avoid": [
        "component inventory walls",
        "placeholder-only content",
        "generic rounded SaaS chrome"
      ],
      "composition": "A dense agent operations console with navigation rail, summary cards, filters, tabs, a work queue table, dropdown commands, and tooltip annotations.",
      "id": "application-shell",
      "mustShow": [
        "primary and secondary actions",
        "card hierarchy",
        "filterable state",
        "table density",
        "functional SFX/status badges"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "select",
        "tabs",
        "badge",
        "separator",
        "table",
        "dropdown-menu",
        "tooltip"
      ],
      "scene": {
        "annotation": "TIP/FOCUS: hover shifts the active command by exactly two ink pixels; no blur or soft shadow.",
        "description": "A framed workspace for triaging language artifacts with cropped OPERATE underlay, side command rail, double-rule panels, and semantic state chips attached to rows.",
        "eyebrow": "OPS/QUEUE 04 — RISOGRAPH COMMAND DESK",
        "filters": [
          {
            "label": "STATE",
            "value": "Needs proof"
          },
          {
            "label": "LANE",
            "value": "Embodiment"
          },
          {
            "label": "OWNER",
            "value": "Katagami"
          }
        ],
        "headline": "OPERATE / dispatch review lanes",
        "primaryAction": "RUN / REVIEW BATCH",
        "rows": [
          {
            "age": "04m",
            "id": "K-204",
            "name": "Console sheet",
            "owner": "Sono",
            "state": "READY"
          },
          {
            "age": "11m",
            "id": "K-205",
            "name": "Crop mark audit",
            "owner": "Archivo",
            "state": "WARN"
          },
          {
            "age": "19m",
            "id": "K-206",
            "name": "SFX label map",
            "owner": "Curator",
            "state": "ERR"
          }
        ],
        "secondaryAction": "ACK / EXPORT LOG",
        "stats": [
          {
            "badge": "POW/READY",
            "label": "READY",
            "value": "18"
          },
          {
            "badge": "CHK/WARN",
            "label": "WARN",
            "value": "05"
          },
          {
            "badge": "ERR/BLOCK",
            "label": "ERR",
            "value": "02"
          }
        ],
        "tabs": [
          "01 Queue",
          "02 Evidence",
          "03 Console"
        ]
      },
      "title": "Application shell",
      "viewport": "desktop"
    },
    {
      "avoid": [
        "unstyled browser controls",
        "floating cards inside cards",
        "missing labels"
      ],
      "composition": "A focused artifact editing flow with command-sheet card, form validation, contextual sheet rail, checkbox/switch controls, and destructive confirmation.",
      "id": "detail-editor",
      "mustShow": [
        "focus ring",
        "error or destructive state",
        "dialog or sheet treatment",
        "written guidance content",
        "labeled controls"
      ],
      "primitives": [
        "button",
        "card",
        "input",
        "textarea",
        "select",
        "checkbox",
        "switch",
        "dialog",
        "sheet",
        "badge",
        "separator"
      ],
      "scene": {
        "description": "A modal command sheet edits token evidence with bracket labels, offset focus ring, serif note scraps, and a side rail showing validation states.",
        "destructiveAction": "ERR / DISCARD DRAFT",
        "eyebrow": "EDIT/SPEC — FIELD PROOF",
        "fields": [
          {
            "label": "[NAME]",
            "state": "focused",
            "value": "Emigre Vernacular Type Console"
          },
          {
            "label": "[BORDER MODE]",
            "state": "valid",
            "value": "Double rule + crop ticks"
          },
          {
            "label": "[STATUS COPY]",
            "state": "error: needs functional target",
            "value": "SFX labels must attach to controls"
          }
        ],
        "headline": "PATCH the visual contract",
        "notes": [
          "Serif note: color may only signal semantic result.",
          "Mono prompt: CMD / attach label to validation row."
        ],
        "primaryAction": "SAVE / PATCH",
        "secondaryAction": "CANCEL / CLOSE",
        "sidePanel": [
          {
            "label": "01 Visual character",
            "state": "READY"
          },
          {
            "label": "02 Token fit",
            "state": "WARN"
          },
          {
            "label": "03 Publish gate",
            "state": "BLOCKED"
          }
        ],
        "toggles": [
          {
            "label": "HALFTONE UNDERLAY",
            "value": "ON"
          },
          {
            "label": "GLASS BLUR",
            "value": "OFF"
          }
        ]
      },
      "title": "Detail editor",
      "viewport": "tablet"
    },
    {
      "avoid": [
        "desktop-only tables",
        "text overflow",
        "default shadcn spacing without Katagami character"
      ],
      "composition": "A compact operational view proving responsive row reflow, stacked actions, menu states, badges, empty/destructive states, and ruled calibration controls.",
      "id": "data-operations",
      "mustShow": [
        "responsive reflow",
        "dense row styling",
        "menu affordance",
        "status badge system",
        "mechanical slider calibration"
      ],
      "primitives": [
        "button",
        "tabs",
        "badge",
        "dropdown-menu",
        "table",
        "tooltip",
        "separator",
        "slider",
        "card"
      ],
      "scene": {
        "description": "Rows collapse into ruled cards with numbered tabs, attached status badges, command menu, graphite hatching behind selection, and a tick-mark calibration slider.",
        "emptyState": "NO/RESULTS appears as a bordered command scrap, never as gray blank chrome.",
        "eyebrow": "MOBILE/CAL — 320 GRID",
        "headline": "TUNE row pressure",
        "primaryAction": "RUN / APPLY",
        "rows": [
          {
            "id": "R-17",
            "label": "Ink border audit",
            "menu": [
              "ACK",
              "PIN",
              "VIEW LOG"
            ],
            "state": "READY"
          },
          {
            "id": "R-18",
            "label": "Semantic color check",
            "menu": [
              "RETRY",
              "ASSIGN",
              "VIEW LOG"
            ],
            "state": "WARN"
          },
          {
            "id": "R-19",
            "label": "Default radius scan",
            "menu": [
              "FIX",
              "DELETE",
              "VIEW LOG"
            ],
            "state": "ERR"
          }
        ],
        "secondaryAction": "MENU / MORE",
        "slider": {
          "label": "RULE WEIGHT",
          "ticks": [
            "1",
            "1.5",
            "2",
            "3"
          ],
          "value": "1.5px"
        },
        "stats": [
          {
            "badge": "CAL/82",
            "label": "DENSITY",
            "value": "82%"
          },
          {
            "badge": "STEP",
            "label": "OFFSET",
            "value": "2PX"
          }
        ],
        "tabs": [
          "01 Live",
          "02 Hold",
          "03 Fail"
        ]
      },
      "title": "Data operations",
      "viewport": "mobile"
    }
  ],
  "version": "preview-shots-v1",
  "visualProfile": {
    "accents": [
      "semantic-red-error",
      "semantic-green-ready",
      "semantic-amber-warning",
      "graphite-hatching"
    ],
    "border": "black-double-rule-with-crop-ticks-and-registration-marks",
    "contour": "rectangular-cropped-panels-with-sign-tabs",
    "density": "dense-but-framed",
    "family": "postmodern-vernacular-type-console",
    "grain": true,
    "material": "ink-on-warm-newsprint-console-paper",
    "motion": "step-shift-command-tick",
    "shapeScale": {
      "badges": "square or slightly skewed SFX/state labels",
      "containers": "0-2px square paper panels",
      "controls": "rectangular terminal fields and tabs"
    },
    "stickerBadges": true,
    "underlay": true
  }
}