back to gallerydo avoid
design language·frost-sector-forensics
Frost Sector Forensics
A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Download DESIGN.md
Portable DESIGN.md source of truth for most agents and apps.
the spec
specification
philosophy
summary
Frost Sector Forensics is a quiet optical-archive recovery language for consoles that stabilize damaged discs, memory images, and born-digital evidence without spectacle. It treats the interface as a forensic contact sheet: pale translucent material, black registration discipline, archival blue activity, and small corrupted thumbnails that feel like recovered fragments rather than decorative media.
values
Evidence before expression: every mark must clarify provenance, lock state, checksum, scan depth, or reconstruction confidence.Silence as tension: large white and milk-gray fields make the few active blue marks feel operational and consequential.Sequential reading: manga gutters, contact-sheet rows, and terminal labels guide the eye through a recovery procedure rather than a dashboard.Material restraint: frosted panes and optical-sector rings evoke Y2K hardware without glossy candy plastic or neon futurism.Human traces at the edge: hands, reflections, and partial silhouettes appear as cropped evidence artifacts, not heroic portraits.Static trust: the system should look usable in a still screenshot, with motion limited to tiny scan and lock changes.
anti-values
×No green code rain, glowing cyberpunk HUD rings, or generic hacker command centers.×No equal SaaS card grids, growth charts, or decorative analytics widgets disconnected from archive recovery.×No fan-art anime faces, expressive lettering, or glossy Y2K candy gradients.×No ornamental corruption; glitches must be labeled as sectors, timestamps, or checksum exceptions.
tokens
borders4 items
- accent width
- 2px
- character
- Hairline black indexing marks at 8 percent opacity, with occasional 2px black gutters and clipped archival-blue state edges.
- default width
- 1px
- style
- solid
colors12 items
accent
#2F78A5
background
#F7F8F6
border
#101417
error
#9A3C31
info
#2F78A5
muted
#637078
primary
#1B5D86
secondary
#DDE7EC
success
#4E6E63
surface
#FFFFFF
text
#101417
warning
#B07A32
motion3 items
- duration
- 180ms
- easing
- cubic-bezier(.2,.0,.1,1)
- philosophy
- Motion is procedural and nearly absent: a scan line may travel across thumbnails and locks may step between states, but panels never bounce or glow.
radii5 items
- full
- 9999px
- lg
- 24px
- md
- 16px
- none
- 0px
- sm
- 0px
shadows3 items
- lg
- 0 34px 90px rgba(16,20,23,0.10)
- md
- 0 18px 50px rgba(27,93,134,0.08)
- sm
- 0 1px 0 rgba(16,20,23,0.08)
spacing2 items
- base
- 8px
- scale
- 4, 8, 12, 16, 24, 32, 48, 64, 96
surfaces3 items
- bg pattern
- Very faint optical-disc sector map: concentric black lines at 4-6 percent opacity and small radial ticks positioned behind the console.
- card style
- Flat rectangular evidence panes with 1px rgba black hairlines, black corner registration ticks, archival-blue clipped state bands, and zero or large radii only for equipment surfaces.
- treatment
- Milk-translucent frosted panes over a cool white field, with backdrop-filter blur, sparse optical sector linework, and no decorative gradient fills.
typography8 items
- base size
- 16px
- body font
- Newsreader Sans
- google fonts url
- https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Fragment+Mono:ital@0;1&family=Newsreader+Sans:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap
- heading font
- Archivo Narrow
- letter spacing
- -0.02em
- line height
- 1.55
- mono font
- Fragment Mono
- scale ratio
- 1.22
rules
composition
Start with a large asymmetric recovery stage occupying at least half the viewport, then subordinate indexes and controls around it.Use black gutters as structural dividers; they should feel like manga panel cuts and archival binder marks, not normal card borders.Allow one major field of silence per screen with only coordinate marks, scan arcs, or a single evidence caption.Keep thumbnails in indexed contact strips with inconsistent damage states, never as lifestyle imagery.Break the grid with one overhanging optical-sector circle or cropped pane to avoid dashboard regularity.
density
Alternate dense forensic rows and contact strips with 64-96px areas of untouched frosted white so the system feels deliberate, not filled. Tight clusters may be 4-8px; unrelated modules separate by 48px or more.
hierarchy
Display hierarchy comes from compressed Archivo Narrow titles set large with -0.04em tracking and tight 1.1 leading.Operational text uses Fragment Mono in uppercase micro-labels, evidence IDs, timestamps, offsets, and checksum rows.Body explanations use Newsreader Sans at 15-16px with -0.02em tracking and measured 1.55 leading.Archival blue marks active recovery; black marks structure; amber and red are tiny exception indicators only.
signature patterns
Corner registration ticks are drawn with pseudo-elements on every important pane, using short black L-marks that sit inside translucent borders.Checksum bands appear as clipped repeating-linear-gradient strips in archival blue and milk gray, attached to scan rows and active evidence cards.Corrupted memory thumbnails combine halftone radial gradients, sliced black scars, timestamp overlays, and tiny evidence IDs in a contact-sheet rhythm.Optical-sector ghosts use oversized concentric circles and radial ticks at very low opacity, cropped by the viewport and panels.Manga gutter cuts use 2-4px black rules that cross panels asymmetrically and create a controlled sequential reading path.
layout
breakpoints
1440 desktop uses three-zone console, 768 tablet collapses to stage plus stacked evidence strips, 375 mobile becomes a single-column sequence with thumbnails in horizontal scroll.
density
Quiet overall density with deliberate compression only in forensic tables, thumbnail strips, and checksum readouts; the primary stage remains spacious enough to feel like a lab bench under glass.
grid
Desktop uses a 12-column grid with 24px gutters and max width 1320px; the main stage spans 7 columns, index/control columns occupy 3 and 2 columns, and black gutters may intentionally cross grid boundaries.
whitespace
Use 64-96px section gaps around the largest recovery field, 24-32px panel padding, and 4-8px proximity inside terminal labels and checksum rows.
guidance
- Use frosted whites, milk grays, thin black marks, and one archival blue as the dominant system.
- Name evidence objects with IDs, offsets, timestamps, lock states, and checksum language.
- Let manga-like gutters and contact-sheet strips determine composition before adding components.
- Make corruption small, labeled, and material: sliced thumbnails, scar lines, sector holes, and offset values.
- Use large empty panes to imply waiting, stabilization, and forensic restraint.
- Pair every warning color with a text label or symbol, not color alone.
- Keep radii either square or decisively large on device-like surfaces; avoid mixed arbitrary rounding.
- Do not use neon gradients, green matrix rain, glowing circular HUDs, or cyberpunk city motifs.
- Do not build three equal analytics cards or generic SaaS KPI grids.
- Do not show heroic anime characters; use cropped hands, reflections, or silhouettes as evidence traces only.
- Do not make corruption decorative without provenance, sector, or timestamp labels.
- Do not use saturated blue as a background wash; reserve it for active recovery and selection.
- Do not add shadows, glass gloss, or candy plastic if a hairline and white space can do the work.
katagami spec
# Frost Sector Forensics ## Philosophy Frost Sector Forensics is a quiet optical-archive recovery language for consoles that stabilize damaged discs, memory images, and born-digital evidence without spectacle. It treats the interface as a forensic contact sheet: pale translucent material, black registration discipline, archival blue activity, and small corrupted thumbnails that feel like recovered fragments rather than decorative media. ### Values - Evidence before expression: every mark must clarify provenance, lock state, checksum, scan depth, or reconstruction confidence. - Silence as tension: large white and milk-gray fields make the few active blue marks feel operational and consequential. - Sequential reading: manga gutters, contact-sheet rows, and terminal labels guide the eye through a recovery procedure rather than a dashboard. - Material restraint: frosted panes and optical-sector rings evoke Y2K hardware without glossy candy plastic or neon futurism. - Human traces at the edge: hands, reflections, and partial silhouettes appear as cropped evidence artifacts, not heroic portraits. - Static trust: the system should look usable in a still screenshot, with motion limited to tiny scan and lock changes. ### Anti-Values - No green code rain, glowing cyberpunk HUD rings, or generic hacker command centers. - No equal SaaS card grids, growth charts, or decorative analytics widgets disconnected from archive recovery. - No fan-art anime faces, expressive lettering, or glossy Y2K candy gradients. - No ornamental corruption; glitches must be labeled as sectors, timestamps, or checksum exceptions. ### Visual Character - Use a 12-column contact-sheet grid interrupted by thick black manga gutters and oversized empty frosted fields, so the layout reads as sequential archive evidence rather than cards. - Render active states with thin archival-blue bands, checksum stripes, and scan-depth bars clipped to panel edges instead of filled buttons or saturated badges. - Build surfaces from translucent milk-white panes using backdrop-filter blur, hairline black borders, and inset registration ticks at the corners. - Represent memory as small square corrupted thumbnails with halftone noise, partial silhouettes, timestamp scars, and evidence IDs aligned in terminal rows. - Place optical-disc sector geometry as quiet concentric arcs and radial tick marks behind the work area, never as a luminous HUD centerpiece. ## Tokens ### Borders - **Accent Width**: 2px - **Character**: Hairline black indexing marks at 8 percent opacity, with occasional 2px black gutters and clipped archival-blue state edges. - **Default Width**: 1px - **Style**: solid ### Colors | Name | Value | |------|-------| | accent | `#2F78A5` | | background | `#F7F8F6` | | border | `#101417` | | error | `#9A3C31` | | info | `#2F78A5` | | muted | `#637078` | | primary | `#1B5D86` | | secondary | `#DDE7EC` | | success | `#4E6E63` | | surface | `#FFFFFF` | | text | `#101417` | | warning | `#B07A32` | ### Motion - **Duration**: 180ms - **Easing**: cubic-bezier(.2,.0,.1,1) - **Philosophy**: Motion is procedural and nearly absent: a scan line may travel across thumbnails and locks may step between states, but panels never bounce or glow. ### Radii - **Full**: 9999px - **Lg**: 24px - **Md**: 16px - **None**: 0px - **Sm**: 0px ### Shadows - **Lg**: 0 34px 90px rgba(16,20,23,0.10) - **Md**: 0 18px 50px rgba(27,93,134,0.08) - **Sm**: 0 1px 0 rgba(16,20,23,0.08) ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Bg Pattern**: Very faint optical-disc sector map: concentric black lines at 4-6 percent opacity and small radial ticks positioned behind the console. - **Card Style**: Flat rectangular evidence panes with 1px rgba black hairlines, black corner registration ticks, archival-blue clipped state bands, and zero or large radii only for equipment surfaces. - **Treatment**: Milk-translucent frosted panes over a cool white field, with backdrop-filter blur, sparse optical sector linework, and no decorative gradient fills. ### Typography - **Base Size**: 16px - **Body Font**: Newsreader Sans - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Fragment+Mono:ital@0;1&family=Newsreader+Sans:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap - **Heading Font**: Archivo Narrow - **Letter Spacing**: -0.02em - **Line Height**: 1.55 - **Mono Font**: Fragment Mono - **Scale Ratio**: 1.22 ## Rules ### Composition - Start with a large asymmetric recovery stage occupying at least half the viewport, then subordinate indexes and controls around it. - Use black gutters as structural dividers; they should feel like manga panel cuts and archival binder marks, not normal card borders. - Allow one major field of silence per screen with only coordinate marks, scan arcs, or a single evidence caption. - Keep thumbnails in indexed contact strips with inconsistent damage states, never as lifestyle imagery. - Break the grid with one overhanging optical-sector circle or cropped pane to avoid dashboard regularity. ### Density Alternate dense forensic rows and contact strips with 64-96px areas of untouched frosted white so the system feels deliberate, not filled. Tight clusters may be 4-8px; unrelated modules separate by 48px or more. ### Hierarchy - Display hierarchy comes from compressed Archivo Narrow titles set large with -0.04em tracking and tight 1.1 leading. - Operational text uses Fragment Mono in uppercase micro-labels, evidence IDs, timestamps, offsets, and checksum rows. - Body explanations use Newsreader Sans at 15-16px with -0.02em tracking and measured 1.55 leading. - Archival blue marks active recovery; black marks structure; amber and red are tiny exception indicators only. ### Signature Patterns - Corner registration ticks are drawn with pseudo-elements on every important pane, using short black L-marks that sit inside translucent borders. - Checksum bands appear as clipped repeating-linear-gradient strips in archival blue and milk gray, attached to scan rows and active evidence cards. - Corrupted memory thumbnails combine halftone radial gradients, sliced black scars, timestamp overlays, and tiny evidence IDs in a contact-sheet rhythm. - Optical-sector ghosts use oversized concentric circles and radial ticks at very low opacity, cropped by the viewport and panels. - Manga gutter cuts use 2-4px black rules that cross panels asymmetrically and create a controlled sequential reading path. ## Layout ### Breakpoints 1440 desktop uses three-zone console, 768 tablet collapses to stage plus stacked evidence strips, 375 mobile becomes a single-column sequence with thumbnails in horizontal scroll. ### Density Quiet overall density with deliberate compression only in forensic tables, thumbnail strips, and checksum readouts; the primary stage remains spacious enough to feel like a lab bench under glass. ### Grid Desktop uses a 12-column grid with 24px gutters and max width 1320px; the main stage spans 7 columns, index/control columns occupy 3 and 2 columns, and black gutters may intentionally cross grid boundaries. ### Whitespace Use 64-96px section gaps around the largest recovery field, 24-32px panel padding, and 4-8px proximity inside terminal labels and checksum rows. ## Guidance ### Do - Use frosted whites, milk grays, thin black marks, and one archival blue as the dominant system. - Name evidence objects with IDs, offsets, timestamps, lock states, and checksum language. - Let manga-like gutters and contact-sheet strips determine composition before adding components. - Make corruption small, labeled, and material: sliced thumbnails, scar lines, sector holes, and offset values. - Use large empty panes to imply waiting, stabilization, and forensic restraint. - Pair every warning color with a text label or symbol, not color alone. - Keep radii either square or decisively large on device-like surfaces; avoid mixed arbitrary rounding. ### Don't - Do not use neon gradients, green matrix rain, glowing circular HUDs, or cyberpunk city motifs. - Do not build three equal analytics cards or generic SaaS KPI grids. - Do not show heroic anime characters; use cropped hands, reflections, or silhouettes as evidence traces only. - Do not make corruption decorative without provenance, sector, or timestamp labels. - Do not use saturated blue as a background wash; reserve it for active recovery and selection. - Do not add shadows, glass gloss, or candy plastic if a hairline and white space can do the work. ### Accessibility Maintain AA contrast with black text on frosted white, use blue with text and border changes for selected state, keep micro-labels at 11px or larger, preserve keyboard focus outlines, and provide reduced-motion behavior for scan-line animations. ### Usage Context Best for digital forensics workstations, archive recovery tools, born-digital preservation consoles, media stabilization interfaces, and speculative operating systems concerned with memory as record.
DESIGN.md
---
version: "alpha"
name: "Frost Sector Forensics"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
accent: "#2F78A5"
background: "#F7F8F6"
border: "#101417"
error: "#9A3C31"
info: "#2F78A5"
muted: "#637078"
primary: "#1B5D86"
secondary: "#DDE7EC"
success: "#4E6E63"
surface: "#FFFFFF"
text: "#101417"
warning: "#B07A32"
typography:
headline-lg:
fontFamily: "Archivo Narrow"
fontSize: "1.816rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Archivo Narrow"
fontSize: "1.488rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Newsreader Sans"
fontSize: "16px"
fontWeight: 400
lineHeight: 1.55
letterSpacing: "-0.02em"
label-md:
fontFamily: "Fragment Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
full: "9999px"
lg: "24px"
md: "16px"
none: "0px"
sm: "0px"
spacing:
base: "8px"
xs: "4px"
sm: "8px"
md: "12px"
lg: "16px"
xl: "24px"
2xl: "32px"
3xl: "48px"
4xl: "64px"
step-8: "96px"
components:
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-warning:
backgroundColor: "{colors.warning}"
button-primary:
backgroundColor: "{colors.primary}"
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"
---
# Frost Sector Forensics
## Overview
Frost Sector Forensics is a quiet optical-archive recovery language for consoles that stabilize damaged discs, memory images, and born-digital evidence without spectacle. It treats the interface as a forensic contact sheet: pale translucent material, black registration discipline, archival blue activity, and small corrupted thumbnails that feel like recovered fragments rather than decorative media.
### Values
- Evidence before expression: every mark must clarify provenance, lock state, checksum, scan depth, or reconstruction confidence.
- Silence as tension: large white and milk-gray fields make the few active blue marks feel operational and consequential.
- Sequential reading: manga gutters, contact-sheet rows, and terminal labels guide the eye through a recovery procedure rather than a dashboard.
- Material restraint: frosted panes and optical-sector rings evoke Y2K hardware without glossy candy plastic or neon futurism.
- Human traces at the edge: hands, reflections, and partial silhouettes appear as cropped evidence artifacts, not heroic portraits.
- Static trust: the system should look usable in a still screenshot, with motion limited to tiny scan and lock changes.
### Anti-Values
- No green code rain, glowing cyberpunk HUD rings, or generic hacker command centers.
- No equal SaaS card grids, growth charts, or decorative analytics widgets disconnected from archive recovery.
- No fan-art anime faces, expressive lettering, or glossy Y2K candy gradients.
- No ornamental corruption; glitches must be labeled as sectors, timestamps, or checksum exceptions.
### Visual Character
- Use a 12-column contact-sheet grid interrupted by thick black manga gutters and oversized empty frosted fields, so the layout reads as sequential archive evidence rather than cards.
- Render active states with thin archival-blue bands, checksum stripes, and scan-depth bars clipped to panel edges instead of filled buttons or saturated badges.
- Build surfaces from translucent milk-white panes using backdrop-filter blur, hairline black borders, and inset registration ticks at the corners.
- Represent memory as small square corrupted thumbnails with halftone noise, partial silhouettes, timestamp scars, and evidence IDs aligned in terminal rows.
- Place optical-disc sector geometry as quiet concentric arcs and radial tick marks behind the work area, never as a luminous HUD centerpiece.
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| accent | `#2F78A5` |
| background | `#F7F8F6` |
| border | `#101417` |
| error | `#9A3C31` |
| info | `#2F78A5` |
| muted | `#637078` |
| primary | `#1B5D86` |
| secondary | `#DDE7EC` |
| success | `#4E6E63` |
| surface | `#FFFFFF` |
| text | `#101417` |
| warning | `#B07A32` |
## Typography
- **Headline-Lg**: Archivo Narrow, 1.816rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo Narrow, 1.488rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader Sans, 16px, weight 400, line-height 1.55.
- **Label-Md**: Fragment Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`
### Breakpoints
1440 desktop uses three-zone console, 768 tablet collapses to stage plus stacked evidence strips, 375 mobile becomes a single-column sequence with thumbnails in horizontal scroll.
### Density
Quiet overall density with deliberate compression only in forensic tables, thumbnail strips, and checksum readouts; the primary stage remains spacious enough to feel like a lab bench under glass.
### Grid
Desktop uses a 12-column grid with 24px gutters and max width 1320px; the main stage spans 7 columns, index/control columns occupy 3 and 2 columns, and black gutters may intentionally cross grid boundaries.
### Whitespace
Use 64-96px section gaps around the largest recovery field, 24-32px panel padding, and 4-8px proximity inside terminal labels and checksum rows.
## Elevation & Depth
### Shadows
- **Lg**: 0 34px 90px rgba(16,20,23,0.10)
- **Md**: 0 18px 50px rgba(27,93,134,0.08)
- **Sm**: 0 1px 0 rgba(16,20,23,0.08)
## Shapes
### Rounded
- **Full**: `9999px`
- **Lg**: `24px`
- **Md**: `16px`
- **None**: `0px`
- **Sm**: `0px`
### Surfaces
- **Bg Pattern**: Very faint optical-disc sector map: concentric black lines at 4-6 percent opacity and small radial ticks positioned behind the console.
- **Card Style**: Flat rectangular evidence panes with 1px rgba black hairlines, black corner registration ticks, archival-blue clipped state bands, and zero or large radii only for equipment surfaces.
- **Treatment**: Milk-translucent frosted panes over a cool white field, with backdrop-filter blur, sparse optical sector linework, and no decorative gradient fills.
### Borders
- **Accent Width**: 2px
- **Character**: Hairline black indexing marks at 8 percent opacity, with occasional 2px black gutters and clipped archival-blue state edges.
- **Default Width**: 1px
- **Style**: solid
## Components
### Composition
- Start with a large asymmetric recovery stage occupying at least half the viewport, then subordinate indexes and controls around it.
- Use black gutters as structural dividers; they should feel like manga panel cuts and archival binder marks, not normal card borders.
- Allow one major field of silence per screen with only coordinate marks, scan arcs, or a single evidence caption.
- Keep thumbnails in indexed contact strips with inconsistent damage states, never as lifestyle imagery.
- Break the grid with one overhanging optical-sector circle or cropped pane to avoid dashboard regularity.
### Density
Alternate dense forensic rows and contact strips with 64-96px areas of untouched frosted white so the system feels deliberate, not filled. Tight clusters may be 4-8px; unrelated modules separate by 48px or more.
### Hierarchy
- Display hierarchy comes from compressed Archivo Narrow titles set large with -0.04em tracking and tight 1.1 leading.
- Operational text uses Fragment Mono in uppercase micro-labels, evidence IDs, timestamps, offsets, and checksum rows.
- Body explanations use Newsreader Sans at 15-16px with -0.02em tracking and measured 1.55 leading.
- Archival blue marks active recovery; black marks structure; amber and red are tiny exception indicators only.
### Signature Patterns
- Corner registration ticks are drawn with pseudo-elements on every important pane, using short black L-marks that sit inside translucent borders.
- Checksum bands appear as clipped repeating-linear-gradient strips in archival blue and milk gray, attached to scan rows and active evidence cards.
- Corrupted memory thumbnails combine halftone radial gradients, sliced black scars, timestamp overlays, and tiny evidence IDs in a contact-sheet rhythm.
- Optical-sector ghosts use oversized concentric circles and radial ticks at very low opacity, cropped by the viewport and panels.
- Manga gutter cuts use 2-4px black rules that cross panels asymmetrically and create a controlled sequential reading path.
## 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/frost-sector-forensics/DESIGN.with-shadcn.md`.
The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.
Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.
## Do's and Don'ts
- Do Use frosted whites, milk grays, thin black marks, and one archival blue as the dominant system.
- Do Name evidence objects with IDs, offsets, timestamps, lock states, and checksum language.
- Do Let manga-like gutters and contact-sheet strips determine composition before adding components.
- Do Make corruption small, labeled, and material: sliced thumbnails, scar lines, sector holes, and offset values.
- Do Use large empty panes to imply waiting, stabilization, and forensic restraint.
- Do Pair every warning color with a text label or symbol, not color alone.
- Do Keep radii either square or decisively large on device-like surfaces; avoid mixed arbitrary rounding.
- Don't Do not use neon gradients, green matrix rain, glowing circular HUDs, or cyberpunk city motifs.
- Don't Do not build three equal analytics cards or generic SaaS KPI grids.
- Don't Do not show heroic anime characters; use cropped hands, reflections, or silhouettes as evidence traces only.
- Don't Do not make corruption decorative without provenance, sector, or timestamp labels.
- Don't Do not use saturated blue as a background wash; reserve it for active recovery and selection.
- Don't Do not add shadows, glass gloss, or candy plastic if a hairline and white space can do the work.
### Accessibility
Maintain AA contrast with black text on frosted white, use blue with text and border changes for selected state, keep micro-labels at 11px or larger, preserve keyboard focus outlines, and provide reduced-motion behavior for scan-line animations.
### Usage Context
Best for digital forensics workstations, archive recovery tools, born-digital preservation consoles, media stabilization interfaces, and speculative operating systems concerned with memory as record.
shadcn/ui theme
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "frost-sector-forensics",
"type": "registry:theme",
"title": "Frost Sector Forensics shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F7F8F6",
"foreground": "#101417",
"card": "#FFFFFF",
"card-foreground": "#101417",
"popover": "#FFFFFF",
"popover-foreground": "#101417",
"primary": "#1B5D86",
"primary-foreground": "#ffffff",
"secondary": "#DDE7EC",
"secondary-foreground": "#111111",
"muted": "#637078",
"muted-foreground": "#101417",
"accent": "#2F78A5",
"accent-foreground": "#ffffff",
"destructive": "#9A3C31",
"border": "#101417",
"input": "#101417",
"ring": "#2F78A5",
"chart-1": "#1B5D86",
"chart-2": "#DDE7EC",
"chart-3": "#2F78A5",
"chart-4": "#4E6E63",
"chart-5": "#B07A32",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#101417",
"sidebar-primary": "#1B5D86",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2F78A5",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#101417",
"sidebar-ring": "#2F78A5",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#1B5D86",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#2F78A5",
"accent-foreground": "#ffffff",
"destructive": "#9A3C31",
"border": "#303642",
"input": "#303642",
"ring": "#2F78A5",
"chart-1": "#1B5D86",
"chart-2": "#DDE7EC",
"chart-3": "#2F78A5",
"chart-4": "#4E6E63",
"chart-5": "#B07A32",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#1B5D86",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2F78A5",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#2F78A5",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "frost-sector-forensics",
"slug": "frost-sector-forensics",
"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": {
"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"
]
}
}
}
```in the wild
embodiments
the full element showcase
embodiment · frost-sector-forensics
DESIGN.md
at a glance
Typography
headline-lgArchivo Narrow · 29px · 700
The quick brown fox jumps
headline-mdArchivo Narrow · 24px · 600
The quick brown fox jumps
body-mdNewsreader Sans · 16px · 400
The quick brown fox jumps
label-mdFragment Mono · 12px · 600
The quick brown fox jumps
Components
New
Card title
Components rendered with this language’s tokens — colors, type, and rounded corners as specified.
Spacing
- base8px
- xs4px
- sm8px
- md12px
- lg16px
- xl24px
- 2xl32px
- 3xl48px
- 4xl64px
- step-896px
Shape
full9999px
lg24px
md16px
none0px
sm0px
shadcn/ui
implementation kit
recommendedcompatibility fallback
DESIGN.md with shadcn
Copy this when the target app uses shadcn/ui. It packages the Katagami DESIGN.md context with the install list, theme variables, component recipes, preview-shot contract, and starter TSX in one Markdown companion.
advanced implementation filesoptional machine-readable theme, CSS, TSX starter, recipes, and preview contract
shadcn add
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu tabletheme css
:root {
--background: #F7F8F6;
--foreground: #101417;
--card: #FFFFFF;
--card-foreground: #101417;
--popover: #FFFFFF;
--popover-foreground: #101417;
--primary: #1B5D86;
--primary-foreground: #ffffff;
--secondary: #DDE7EC;
--secondary-foreground: #111111;
--muted: #637078;
--muted-foreground: #101417;
--accent: #2F78A5;
--accent-foreground: #ffffff;
--destructive: #9A3C31;
--border: #101417;
--input: #101417;
--ring: #2F78A5;
--chart-1: #1B5D86;
--chart-2: #DDE7EC;
--chart-3: #2F78A5;
--chart-4: #4E6E63;
--chart-5: #B07A32;
--sidebar: #FFFFFF;
--sidebar-foreground: #101417;
--sidebar-primary: #1B5D86;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2F78A5;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #101417;
--sidebar-ring: #2F78A5;
--radius: 16px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #1B5D86;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #2F78A5;
--accent-foreground: #ffffff;
--destructive: #9A3C31;
--border: #303642;
--input: #303642;
--ring: #2F78A5;
--chart-1: #1B5D86;
--chart-2: #DDE7EC;
--chart-3: #2F78A5;
--chart-4: #4E6E63;
--chart-5: #B07A32;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #1B5D86;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #2F78A5;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #2F78A5;
--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 FrostSectorForensicsShadcnKit() {
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">Frost Sector Forensics</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 JSONcompatibility fallback
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "frost-sector-forensics",
"type": "registry:theme",
"title": "Frost Sector Forensics shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#F7F8F6",
"foreground": "#101417",
"card": "#FFFFFF",
"card-foreground": "#101417",
"popover": "#FFFFFF",
"popover-foreground": "#101417",
"primary": "#1B5D86",
"primary-foreground": "#ffffff",
"secondary": "#DDE7EC",
"secondary-foreground": "#111111",
"muted": "#637078",
"muted-foreground": "#101417",
"accent": "#2F78A5",
"accent-foreground": "#ffffff",
"destructive": "#9A3C31",
"border": "#101417",
"input": "#101417",
"ring": "#2F78A5",
"chart-1": "#1B5D86",
"chart-2": "#DDE7EC",
"chart-3": "#2F78A5",
"chart-4": "#4E6E63",
"chart-5": "#B07A32",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#101417",
"sidebar-primary": "#1B5D86",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2F78A5",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#101417",
"sidebar-ring": "#2F78A5",
"radius": "16px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#1B5D86",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#2F78A5",
"accent-foreground": "#ffffff",
"destructive": "#9A3C31",
"border": "#303642",
"input": "#303642",
"ring": "#2F78A5",
"chart-1": "#1B5D86",
"chart-2": "#DDE7EC",
"chart-3": "#2F78A5",
"chart-4": "#4E6E63",
"chart-5": "#B07A32",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#1B5D86",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#2F78A5",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#2F78A5",
"radius": "16px"
}
},
"meta": {
"source": "katagami",
"languageId": "frost-sector-forensics",
"slug": "frost-sector-forensics",
"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": {
"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"
]
}
}
}
component recipescompatibility fallback
# Frost Sector Forensics shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `frost-sector-forensics`
Slug: `frost-sector-forensics`
## Intent
Frost Sector Forensics is a quiet optical-archive recovery language for consoles that stabilize damaged discs, memory images, and born-digital evidence without spectacle. It treats the interface as a forensic contact sheet: pale translucent material, black registration discipline, archival blue activity, and small corrupted thumbnails that feel like recovered fragments rather than decorative media.
## 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:
{
"accent": "#2F78A5",
"background": "#F7F8F6",
"border": "#101417",
"error": "#9A3C31",
"info": "#2F78A5",
"muted": "#637078",
"primary": "#1B5D86",
"secondary": "#DDE7EC",
"success": "#4E6E63",
"surface": "#FFFFFF",
"text": "#101417",
"warning": "#B07A32"
}
Typography:
{
"base_size": "16px",
"body_font": "Newsreader Sans",
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@500;600;700&family=Fragment+Mono:ital@0;1&family=Newsreader+Sans:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap",
"heading_font": "Archivo Narrow",
"letter_spacing": "-0.02em",
"line_height": 1.55,
"mono_font": "Fragment Mono",
"scale_ratio": 1.22
}
## Visual character to preserve
- Use a 12-column contact-sheet grid interrupted by thick black manga gutters and oversized empty frosted fields, so the layout reads as sequential archive evidence rather than cards.
- Render active states with thin archival-blue bands, checksum stripes, and scan-depth bars clipped to panel edges instead of filled buttons or saturated badges.
- Build surfaces from translucent milk-white panes using backdrop-filter blur, hairline black borders, and inset registration ticks at the corners.
- Represent memory as small square corrupted thumbnails with halftone noise, partial silhouettes, timestamp scars, and evidence IDs aligned in terminal rows.
- Place optical-disc sector geometry as quiet concentric arcs and radial tick marks behind the work area, never as a luminous HUD centerpiece.
## ShadSync visual profile
{
"family": "brutalist",
"material": "ink",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": true,
"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/frost-sector-forensics/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 frosted whites, milk grays, thin black marks, and one archival blue as the dominant system.; Name evidence objects with IDs, offsets, timestamps, lock states, and checksum language.; Let manga-like gutters and contact-sheet strips determine composition before adding components.; Make corruption small, labeled, and material: sliced thumbnails, scar lines, sector holes, and offset values.; Use large empty panes to imply waiting, stabilization, and forensic restraint.; Pair every warning color with a text label or symbol, not color alone.; Keep radii either square or decisively large on device-like surfaces; avoid mixed arbitrary rounding.
- Do not: Do not use neon gradients, green matrix rain, glowing circular HUDs, or cyberpunk city motifs.; Do not build three equal analytics cards or generic SaaS KPI grids.; Do not show heroic anime characters; use cropped hands, reflections, or silhouettes as evidence traces only.; Do not make corruption decorative without provenance, sector, or timestamp labels.; Do not use saturated blue as a background wash; reserve it for active recovery and selection.; Do not add shadows, glass gloss, or candy plastic if a hairline and white space can do the work.
## 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 FrostSectorForensicsShadcnKit() {
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">Frost Sector Forensics</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
{
"breakpoints": "1440 desktop uses three-zone console, 768 tablet collapses to stage plus stacked evidence strips, 375 mobile becomes a single-column sequence with thumbnails in horizontal scroll.",
"density": "Quiet overall density with deliberate compression only in forensic tables, thumbnail strips, and checksum readouts; the primary stage remains spacious enough to feel like a lab bench under glass.",
"grid": "Desktop uses a 12-column grid with 24px gutters and max width 1320px; the main stage spans 7 columns, index/control columns occupy 3 and 2 columns, and black gutters may intentionally cross grid boundaries.",
"whitespace": "Use 64-96px section gaps around the largest recovery field, 24-32px panel padding, and 4-8px proximity inside terminal labels and checksum rows."
}
preview shotscompatibility fallback
{
"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": "frost-sector-forensics",
"name": "Frost Sector Forensics",
"slug": "frost-sector-forensics"
},
"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": [
"Use a 12-column contact-sheet grid interrupted by thick black manga gutters and oversized empty frosted fields, so the layout reads as sequential archive evidence rather than cards.",
"Render active states with thin archival-blue bands, checksum stripes, and scan-depth bars clipped to panel edges instead of filled buttons or saturated badges.",
"Build surfaces from translucent milk-white panes using backdrop-filter blur, hairline black borders, and inset registration ticks at the corners.",
"Represent memory as small square corrupted thumbnails with halftone noise, partial silhouettes, timestamp scars, and evidence IDs aligned in terminal rows.",
"Place optical-disc sector geometry as quiet concentric arcs and radial tick marks behind the work area, never as a luminous HUD centerpiece."
],
"visualProfile": {
"family": "brutalist",
"material": "ink",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": true,
"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": "Frost Sector Forensics 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 frosted whites, milk grays, thin black marks, and one archival blue as the dominant system.",
"Name evidence objects with IDs, offsets, timestamps, lock states, and checksum language.",
"Let manga-like gutters and contact-sheet strips determine composition before adding components.",
"Make corruption small, labeled, and material: sliced thumbnails, scar lines, sector holes, and offset values.",
"Use large empty panes to imply waiting, stabilization, and forensic restraint.",
"Pair every warning color with a text label or symbol, not color alone.",
"Keep radii either square or decisively large on device-like surfaces; avoid mixed arbitrary rounding."
],
"dont": [
"Do not use neon gradients, green matrix rain, glowing circular HUDs, or cyberpunk city motifs.",
"Do not build three equal analytics cards or generic SaaS KPI grids.",
"Do not show heroic anime characters; use cropped hands, reflections, or silhouettes as evidence traces only.",
"Do not make corruption decorative without provenance, sector, or timestamp labels.",
"Do not use saturated blue as a background wash; reserve it for active recovery and selection.",
"Do not add shadows, glass gloss, or candy plastic if a hairline and white space can do the work."
]
}
}
related