A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.
Use a visible 64px construction grid with a 12-column rhythm, asymmetric placement, and deliberate empty grid cells. A dominant lead block (7-8 cols) carries the argument while metadata and controls sit in narrow rails (4-5 cols). Frame rectangular modules in 2px black rule; anchor them with paired circle+square corner markers rather than a single coloured edge.
Start with a condensed uppercase mono label and a leading square colour chip, then a large condensed headline or oversized numeral, then concise IBM Plex Sans body. Build hierarchy through scale, weight, case, position, and rule thickness before colour. Important metrics become poster-like typographic blocks on black ink.
Operational medium-high density with disciplined whitespace: modules are compact inside a generous page grid, separated by strong rules and blank grid cells.
Visible 64px black construction grid; paired circle+square corner markers on every framed module; primary red/blue/yellow used only as functional signal blocks and status chips; oversized condensed figures on black ink panels as the primary graphic device; offset 6px black slab shadow on active primaries; outlined uppercase mono tags with leading square chips.
Desktop uses a 12-column grid with 24px gutters, max-width ~1360-1480px, and a visible 64px construction-grid background. Tablet collapses the rail to a top strip or single column; mobile becomes a single stacked column with table overflow. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.
Whitespace is an active module, not padding filler. Empty grid cells are kept on purpose, especially near headlines, to preserve poster-like asymmetric calm.
Compact interior modules with measured breathing room for legibility.
Every artifact renders from ~390px mobile to 2560px+ ultra-wide. At 1024px the rail becomes a top strip and key panels move to two columns; at 768px modules stack in one column; at 480px buttons go full width, controls stack, and data tables scroll horizontally. Ultra-wide caps contained content and lets only the full-bleed hero span 100vw.
plakat
Flat geometric Bauhaus-Swiss reconstruction: subjects decomposed into pure primitives — circles, squares, bars, ruled lines — on a visible black construction grid, in primary red, blue, and yellow against pure black and white, asymmetric and edge to edge.
One full-bleed plakat hero behind the landing, composed for a left-side black overlay panel. Keep strictly to red, blue, yellow on black and white with the visible construction grid; never render the apparatus (a poster on a wall, a frame, an easel) and never add text or a fourth accent colour.
# Konkret ## Philosophy Konkret runs the discipline of Concrete Art and Swiss typography as a working product interface. The screen behaves like a printed poster: every module snaps to a visible construction grid, every colour earns its place as a signal, and type does the structural work that ornament does elsewhere. It is a faithful refinement of Constructive Grid Modernism — same idea, same primary-colour direction (red, blue, yellow on pure black and white) — brought up to standard with paired geometric markers replacing single accent edges, an open masthead, fully styled controls, and a no-JS-settled motion model. ### Values - Function before expression — alignment, contrast, and proportion replace decoration. - Visible construction — the grid, module rules, and baseline relationships are allowed to show. - Typographic objectivity — condensed heads, mono meta, and oversized tabular figures carry hierarchy. - Primary-colour economy — red, blue, and yellow appear only as functional signals. - Asymmetric order — a dominant lead block with narrow rails, never centred symmetry. ### Anti-Values - Decorative nostalgia — no vintage poster distress, paper aging, or faux-print texture. - Centred marketing symmetry — no hero-centred landing composition. - Colour-as-decoration — primaries never fill a surface or solve hierarchy on their own. ### Visual Character - A 64px black construction grid runs across every surface; major modules snap to it like Swiss typographic rules and crop marks. - Each framed white panel is anchored by a full circle and a full square corner marker at opposite corners — never a single coloured card edge. - Oversized condensed figures and headlines on solid black ink panels are the primary graphic device, with primary-signal bars beneath. - Metadata reads as small uppercase IBM Plex Mono tags with a leading square colour chip; status is always chip-or-dot plus a text label. ## Tokens ### Colors | Name | Value | |------|-------| | primary | `#E30613` | | secondary | `#0057B8` | | accent | `#FFD400` | | bg | `#FFFFFF` | | background | `#FFFFFF` | | surface | `#FFFFFF` | | surface_2 | `#F3F3F3` | | text | `#000000` | | muted | `#585858` | | border | `#000000` | | line | `#D9D9D9` | | on_accent | `#FFFFFF` | | success | `#007A3D` | | warning | `#FFD400` | | error | `#E30613` | | info | `#0057B8` | | black | `#000000` | | white | `#FFFFFF` | ### Typography - **Base Size**: 17px - **Body Font**: IBM Plex Sans - **Heading Font**: IBM Plex Sans Condensed - **Mono Font**: IBM Plex Mono - **Heading Weight**: 700 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.5 - **Scale Ratio**: 1.25 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap ### Radii - **None**: 0px - **Sm**: 0px - **Md**: 0px - **Lg**: 0px - **Full**: 9999px ### Shadows - **Sm**: none - **Md**: none - **Lg**: 6px 6px 0 #000000 ### Spacing - **Base**: 8px - **Scale**: [4,8,12,16,24,32,48,64,96] ### Surfaces - **Treatment**: flat - **Card Style**: Flat white rectangular panels framed by a 2px black construction rule, anchored by paired circle+square corner markers; no glass, no gradient, no elevation. - **Bg Pattern**: grid ### Borders - **Default Width**: 2px - **Style**: solid - **Character**: Hard black construction lines that behave like printed crop marks and Swiss grid rules; modules are fully framed, never given a single coloured accent edge. ### Motion - **Duration**: 140ms - **Easing**: cubic-bezier(0.2,0,0,1) - **Philosophy**: Snappy and mechanical, no bounce. The fully-settled page is the default and renders with no JavaScript; an inline script adds a class to gate the hidden start-state and drives a short scroll-reveal. Primary buttons and active modules translate up-left into a 6px offset black slab on hover/focus. Respects prefers-reduced-motion. ## Rules ### Composition Use a visible 64px construction grid with a 12-column rhythm, asymmetric placement, and deliberate empty grid cells. A dominant lead block (7-8 cols) carries the argument while metadata and controls sit in narrow rails (4-5 cols). Frame rectangular modules in 2px black rule; anchor them with paired circle+square corner markers rather than a single coloured edge. ### Hierarchy Start with a condensed uppercase mono label and a leading square colour chip, then a large condensed headline or oversized numeral, then concise IBM Plex Sans body. Build hierarchy through scale, weight, case, position, and rule thickness before colour. Important metrics become poster-like typographic blocks on black ink. ### Density Operational medium-high density with disciplined whitespace: modules are compact inside a generous page grid, separated by strong rules and blank grid cells. ### Signature Visible 64px black construction grid; paired circle+square corner markers on every framed module; primary red/blue/yellow used only as functional signal blocks and status chips; oversized condensed figures on black ink panels as the primary graphic device; offset 6px black slab shadow on active primaries; outlined uppercase mono tags with leading square chips. ## Layout ### Grid Desktop uses a 12-column grid with 24px gutters, max-width ~1360-1480px, and a visible 64px construction-grid background. Tablet collapses the rail to a top strip or single column; mobile becomes a single stacked column with table overflow. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing. ### Whitespace Whitespace is an active module, not padding filler. Empty grid cells are kept on purpose, especially near headlines, to preserve poster-like asymmetric calm. ### Density Compact interior modules with measured breathing room for legibility. ### Responsive Every artifact renders from ~390px mobile to 2560px+ ultra-wide. At 1024px the rail becomes a top strip and key panels move to two columns; at 768px modules stack in one column; at 480px buttons go full width, controls stack, and data tables scroll horizontally. Ultra-wide caps contained content and lets only the full-bleed hero span 100vw. ### Breakpoints - **Mobile**: 390-560 - **Tablet**: 561-900 - **Desktop**: 901-1440 - **Ultrawide**: 1441+ ## Guidance ### Do - Use pure #FFFFFF as the dominant ground and true #000000 for construction lines and type. - Apply letter-spacing -0.02em globally, including labels, body, controls, and table text. - Expose the grid with ruled borders, aligned columns, and measured empty cells rather than hiding structure. - Use red, blue, and yellow as sparse functional markers — status chips, segmented measures, signal bars, corner anchors. - Keep all containers square (0px radius); use offset black slab shadows only for active interactive emphasis. - Build hierarchy through scale, weight, case, position, and rule thickness before adding colour. - Explicitly style every form control; give each a hard focus state and a minimum 44px touch target. ### Don't - Do not use gradients, glassmorphism, pastel washes, or blue-grey dark neutrals. - Do not round cards or controls except tiny status dots and corner markers. - Do not give a card a single coloured accent edge or trap the nav in a pill/floating card. - Do not centre every section or use a symmetrical hero composition. - Do not add distressed Bauhaus poster texture or faux vintage effects. - Do not communicate state through colour alone; pair every chip with a text label. - Do not use decorative or emoji icons where a typographic label or geometric marker is clearer. ### Accessibility Maintain high black-on-white contrast; body text 17px+, table rows 14.5px+. Never communicate state through colour alone — pair status chips/dots with text. Preserve focus outlines (3px blue ring). Hero overlay text is paper-white over a solid black ink panel, not a faint scrim. Motion respects prefers-reduced-motion and the no-JS settled state shows the full finished page. ## Imagery Direction ### Pairs With plakat ### Summary Flat geometric Bauhaus-Swiss reconstruction: subjects decomposed into pure primitives — circles, squares, bars, ruled lines — on a visible black construction grid, in primary red, blue, and yellow against pure black and white, asymmetric and edge to edge. ### Subjects - drafting tools — compass, T-square, set-square, protractor — as geometric primitives - a layout board built from circles, bars, and ruled grid lines - a primary-colour signal study aligned to a black lattice - an exhibition wall reduced to flat modules and rules ### Usage One full-bleed plakat hero behind the landing, composed for a left-side black overlay panel. Keep strictly to red, blue, yellow on black and white with the visible construction grid; never render the apparatus (a poster on a wall, a frame, an easel) and never add text or a fourth accent colour.
---
version: "alpha"
name: "Konkret"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
primary: "#E30613"
secondary: "#0057B8"
accent: "#FFD400"
bg: "#FFFFFF"
background: "#FFFFFF"
surface: "#FFFFFF"
surface_2: "#F3F3F3"
text: "#000000"
muted: "#585858"
border: "#000000"
line: "#D9D9D9"
on_accent: "#FFFFFF"
success: "#007A3D"
warning: "#FFD400"
error: "#E30613"
info: "#0057B8"
black: "#000000"
white: "#FFFFFF"
typography:
headline-lg:
fontFamily: "IBM Plex Sans Condensed"
fontSize: "2.075rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "IBM Plex Sans Condensed"
fontSize: "1.66rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "IBM Plex Sans"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.5
letterSpacing: "-0.02em"
label-md:
fontFamily: "IBM Plex Mono"
fontSize: "0.75rem"
fontWeight: 600
lineHeight: 1
letterSpacing: "0.08em"
rounded:
none: "0px"
sm: "0px"
md: "0px"
lg: "0px"
full: "9999px"
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-primary:
backgroundColor: "{colors.primary}"
color-reference-secondary:
backgroundColor: "{colors.secondary}"
color-reference-accent:
backgroundColor: "{colors.accent}"
color-reference-bg:
backgroundColor: "{colors.bg}"
color-reference-background:
backgroundColor: "{colors.background}"
color-reference-surface:
backgroundColor: "{colors.surface}"
color-reference-surface_2:
backgroundColor: "{colors.surface_2}"
color-reference-text:
backgroundColor: "{colors.text}"
color-reference-muted:
backgroundColor: "{colors.muted}"
color-reference-border:
backgroundColor: "{colors.border}"
color-reference-line:
backgroundColor: "{colors.line}"
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}"
color-reference-black:
backgroundColor: "{colors.black}"
color-reference-white:
backgroundColor: "{colors.white}"
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"
---
# Konkret
## Overview
Konkret runs the discipline of Concrete Art and Swiss typography as a working product interface. The screen behaves like a printed poster: every module snaps to a visible construction grid, every colour earns its place as a signal, and type does the structural work that ornament does elsewhere. It is a faithful refinement of Constructive Grid Modernism — same idea, same primary-colour direction (red, blue, yellow on pure black and white) — brought up to standard with paired geometric markers replacing single accent edges, an open masthead, fully styled controls, and a no-JS-settled motion model.
### Values
- Function before expression — alignment, contrast, and proportion replace decoration.
- Visible construction — the grid, module rules, and baseline relationships are allowed to show.
- Typographic objectivity — condensed heads, mono meta, and oversized tabular figures carry hierarchy.
- Primary-colour economy — red, blue, and yellow appear only as functional signals.
- Asymmetric order — a dominant lead block with narrow rails, never centred symmetry.
### Anti-Values
- Decorative nostalgia — no vintage poster distress, paper aging, or faux-print texture.
- Centred marketing symmetry — no hero-centred landing composition.
- Colour-as-decoration — primaries never fill a surface or solve hierarchy on their own.
### Visual Character
- A 64px black construction grid runs across every surface; major modules snap to it like Swiss typographic rules and crop marks.
- Each framed white panel is anchored by a full circle and a full square corner marker at opposite corners — never a single coloured card edge.
- Oversized condensed figures and headlines on solid black ink panels are the primary graphic device, with primary-signal bars beneath.
- Metadata reads as small uppercase IBM Plex Mono tags with a leading square colour chip; status is always chip-or-dot plus a text label.
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| primary | `#E30613` |
| secondary | `#0057B8` |
| accent | `#FFD400` |
| bg | `#FFFFFF` |
| background | `#FFFFFF` |
| surface | `#FFFFFF` |
| surface_2 | `#F3F3F3` |
| text | `#000000` |
| muted | `#585858` |
| border | `#000000` |
| line | `#D9D9D9` |
| on_accent | `#FFFFFF` |
| success | `#007A3D` |
| warning | `#FFD400` |
| error | `#E30613` |
| info | `#0057B8` |
| black | `#000000` |
| white | `#FFFFFF` |
## Typography
- **Headline-Lg**: IBM Plex Sans Condensed, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: IBM Plex Sans Condensed, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: IBM Plex Sans, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex 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`
### Grid
Desktop uses a 12-column grid with 24px gutters, max-width ~1360-1480px, and a visible 64px construction-grid background. Tablet collapses the rail to a top strip or single column; mobile becomes a single stacked column with table overflow. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.
### Whitespace
Whitespace is an active module, not padding filler. Empty grid cells are kept on purpose, especially near headlines, to preserve poster-like asymmetric calm.
### Density
Compact interior modules with measured breathing room for legibility.
### Responsive
Every artifact renders from ~390px mobile to 2560px+ ultra-wide. At 1024px the rail becomes a top strip and key panels move to two columns; at 768px modules stack in one column; at 480px buttons go full width, controls stack, and data tables scroll horizontally. Ultra-wide caps contained content and lets only the full-bleed hero span 100vw.
### Breakpoints
- **Mobile**: 390-560
- **Tablet**: 561-900
- **Desktop**: 901-1440
- **Ultrawide**: 1441+
## Elevation & Depth
### Shadows
- **Sm**: none
- **Md**: none
- **Lg**: 6px 6px 0 #000000
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: flat
- **Card Style**: Flat white rectangular panels framed by a 2px black construction rule, anchored by paired circle+square corner markers; no glass, no gradient, no elevation.
- **Bg Pattern**: grid
### Borders
- **Default Width**: 2px
- **Style**: solid
- **Character**: Hard black construction lines that behave like printed crop marks and Swiss grid rules; modules are fully framed, never given a single coloured accent edge.
## Components
### Composition
Use a visible 64px construction grid with a 12-column rhythm, asymmetric placement, and deliberate empty grid cells. A dominant lead block (7-8 cols) carries the argument while metadata and controls sit in narrow rails (4-5 cols). Frame rectangular modules in 2px black rule; anchor them with paired circle+square corner markers rather than a single coloured edge.
### Hierarchy
Start with a condensed uppercase mono label and a leading square colour chip, then a large condensed headline or oversized numeral, then concise IBM Plex Sans body. Build hierarchy through scale, weight, case, position, and rule thickness before colour. Important metrics become poster-like typographic blocks on black ink.
### Density
Operational medium-high density with disciplined whitespace: modules are compact inside a generous page grid, separated by strong rules and blank grid cells.
### Signature
Visible 64px black construction grid; paired circle+square corner markers on every framed module; primary red/blue/yellow used only as functional signal blocks and status chips; oversized condensed figures on black ink panels as the primary graphic device; offset 6px black slab shadow on active primaries; outlined uppercase mono tags with leading square chips.
## 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-019ef880-326f-7e20-84bd-34ac675ac94e/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 pure #FFFFFF as the dominant ground and true #000000 for construction lines and type.
- Do Apply letter-spacing -0.02em globally, including labels, body, controls, and table text.
- Do Expose the grid with ruled borders, aligned columns, and measured empty cells rather than hiding structure.
- Do Use red, blue, and yellow as sparse functional markers — status chips, segmented measures, signal bars, corner anchors.
- Do Keep all containers square (0px radius); use offset black slab shadows only for active interactive emphasis.
- Do Build hierarchy through scale, weight, case, position, and rule thickness before adding colour.
- Do Explicitly style every form control; give each a hard focus state and a minimum 44px touch target.
- Don't Do not use gradients, glassmorphism, pastel washes, or blue-grey dark neutrals.
- Don't Do not round cards or controls except tiny status dots and corner markers.
- Don't Do not give a card a single coloured accent edge or trap the nav in a pill/floating card.
- Don't Do not centre every section or use a symmetrical hero composition.
- Don't Do not add distressed Bauhaus poster texture or faux vintage effects.
- Don't Do not communicate state through colour alone; pair every chip with a text label.
- Don't Do not use decorative or emoji icons where a typographic label or geometric marker is clearer.
### Accessibility
Maintain high black-on-white contrast; body text 17px+, table rows 14.5px+. Never communicate state through colour alone — pair status chips/dots with text. Preserve focus outlines (3px blue ring). Hero overlay text is paper-white over a solid black ink panel, not a faint scrim. Motion respects prefers-reduced-motion and the no-JS settled state shows the full finished page.
## Imagery Direction
### Pairs With
plakat
### Summary
Flat geometric Bauhaus-Swiss reconstruction: subjects decomposed into pure primitives — circles, squares, bars, ruled lines — on a visible black construction grid, in primary red, blue, and yellow against pure black and white, asymmetric and edge to edge.
### Subjects
- drafting tools — compass, T-square, set-square, protractor — as geometric primitives
- a layout board built from circles, bars, and ruled grid lines
- a primary-colour signal study aligned to a black lattice
- an exhibition wall reduced to flat modules and rules
### Usage
One full-bleed plakat hero behind the landing, composed for a left-side black overlay panel. Keep strictly to red, blue, yellow on black and white with the visible construction grid; never render the apparatus (a poster on a wall, a frame, an easel) and never add text or a fourth accent colour.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "konkret",
"type": "registry:theme",
"title": "Konkret shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#FFFFFF",
"foreground": "#000000",
"card": "#FFFFFF",
"card-foreground": "#000000",
"popover": "#FFFFFF",
"popover-foreground": "#000000",
"primary": "#E30613",
"primary-foreground": "#ffffff",
"secondary": "#0057B8",
"secondary-foreground": "#ffffff",
"muted": "#585858",
"muted-foreground": "#000000",
"accent": "#FFD400",
"accent-foreground": "#111111",
"destructive": "#E30613",
"border": "#000000",
"input": "#000000",
"ring": "#FFD400",
"chart-1": "#E30613",
"chart-2": "#0057B8",
"chart-3": "#FFD400",
"chart-4": "#007A3D",
"chart-5": "#FFD400",
"sidebar": "#FFFFFF",
"sidebar-foreground": "#000000",
"sidebar-primary": "#E30613",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#0057B8",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#000000",
"sidebar-ring": "#FFD400",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#E30613",
"primary-foreground": "#ffffff",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#FFD400",
"accent-foreground": "#111111",
"destructive": "#E30613",
"border": "#303642",
"input": "#303642",
"ring": "#FFD400",
"chart-1": "#E30613",
"chart-2": "#0057B8",
"chart-3": "#FFD400",
"chart-4": "#007A3D",
"chart-5": "#FFD400",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#E30613",
"sidebar-primary-foreground": "#ffffff",
"sidebar-accent": "#FFD400",
"sidebar-accent-foreground": "#111111",
"sidebar-border": "#303642",
"sidebar-ring": "#FFD400",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef880-326f-7e20-84bd-34ac675ac94e",
"slug": "konkret",
"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",
"background",
"bg",
"black",
"border",
"error",
"info",
"line",
"muted",
"on_accent",
"primary",
"secondary",
"success",
"surface",
"surface_2",
"text",
"warning",
"white"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"character",
"default_width",
"style"
],
"motion": [
"duration",
"easing",
"philosophy"
]
}
}
}
```The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
Keep Konkret and swap a palette and an art style onto it. The landing & dashboard recolor live.
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.
npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table:root {
--background: #FFFFFF;
--foreground: #000000;
--card: #FFFFFF;
--card-foreground: #000000;
--popover: #FFFFFF;
--popover-foreground: #000000;
--primary: #E30613;
--primary-foreground: #ffffff;
--secondary: #0057B8;
--secondary-foreground: #ffffff;
--muted: #585858;
--muted-foreground: #000000;
--accent: #FFD400;
--accent-foreground: #111111;
--destructive: #E30613;
--border: #000000;
--input: #000000;
--ring: #FFD400;
--chart-1: #E30613;
--chart-2: #0057B8;
--chart-3: #FFD400;
--chart-4: #007A3D;
--chart-5: #FFD400;
--sidebar: #FFFFFF;
--sidebar-foreground: #000000;
--sidebar-primary: #E30613;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #0057B8;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #000000;
--sidebar-ring: #FFD400;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #E30613;
--primary-foreground: #ffffff;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #FFD400;
--accent-foreground: #111111;
--destructive: #E30613;
--border: #303642;
--input: #303642;
--ring: #FFD400;
--chart-1: #E30613;
--chart-2: #0057B8;
--chart-3: #FFD400;
--chart-4: #007A3D;
--chart-5: #FFD400;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #E30613;
--sidebar-primary-foreground: #ffffff;
--sidebar-accent: #FFD400;
--sidebar-accent-foreground: #111111;
--sidebar-border: #303642;
--sidebar-ring: #FFD400;
--radius: 0px;
}
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 KonkretShadcnKit() {
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">Konkret</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",
"name": "konkret",
"type": "registry:theme",
"cssVars": {
"theme": {
"font-sans": "IBM Plex Sans, system-ui, sans-serif",
"font-mono": "IBM Plex Mono, ui-monospace, monospace",
"radius": "0px"
},
"light": {
"background": "#FFFFFF",
"foreground": "#000000",
"card": "#FFFFFF",
"card-foreground": "#000000",
"popover": "#FFFFFF",
"popover-foreground": "#000000",
"primary": "#E30613",
"primary-foreground": "#FFFFFF",
"secondary": "#F3F3F3",
"secondary-foreground": "#000000",
"muted": "#F3F3F3",
"muted-foreground": "#585858",
"accent": "#FFD400",
"accent-foreground": "#000000",
"destructive": "#E30613",
"destructive-foreground": "#FFFFFF",
"border": "#000000",
"input": "#000000",
"ring": "#0057B8",
"chart-1": "#E30613",
"chart-2": "#0057B8",
"chart-3": "#FFD400",
"chart-4": "#000000",
"chart-5": "#585858"
},
"dark": {
"background": "#000000",
"foreground": "#FFFFFF",
"card": "#000000",
"card-foreground": "#FFFFFF",
"popover": "#000000",
"popover-foreground": "#FFFFFF",
"primary": "#FFD400",
"primary-foreground": "#000000",
"secondary": "#141414",
"secondary-foreground": "#FFFFFF",
"muted": "#141414",
"muted-foreground": "#A8A8A8",
"accent": "#E30613",
"accent-foreground": "#FFFFFF",
"destructive": "#E30613",
"destructive-foreground": "#FFFFFF",
"border": "#FFFFFF",
"input": "#FFFFFF",
"ring": "#FFD400"
}
},
"visualProfile": {
"material": "flat",
"radius": "0px",
"border": "2px solid #000000",
"shadow": "6px 6px 0 #000000 (offset slab, on active/primary only)",
"elevation": "none — depth comes from borders, grid lines, and offset slabs",
"accentUse": "three primary signals (red/blue/yellow) used like highlighters; never as fills",
"typography": "IBM Plex Sans Condensed headings, IBM Plex Sans body, IBM Plex Mono meta, -0.02em",
"motif": "visible 64px black construction grid; paired circle+square corner markers on modules",
"tone": "constructivist, operational, high-contrast, never muddy"
}
}
# Konkret shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef880-326f-7e20-84bd-34ac675ac94e`
Slug: `konkret`
## Intent
Konkret runs the discipline of Concrete Art and Swiss typography as a working product interface. The screen behaves like a printed poster: every module snaps to a visible construction grid, every colour earns its place as a signal, and type does the structural work that ornament does elsewhere. It is a faithful refinement of Constructive Grid Modernism — same idea, same primary-colour direction (red, blue, yellow on pure black and white) — brought up to standard with paired geometric markers replacing single accent edges, an open masthead, fully styled controls, and a no-JS-settled motion model.
## 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:
{
"primary": "#E30613",
"secondary": "#0057B8",
"accent": "#FFD400",
"bg": "#FFFFFF",
"background": "#FFFFFF",
"surface": "#FFFFFF",
"surface_2": "#F3F3F3",
"text": "#000000",
"muted": "#585858",
"border": "#000000",
"line": "#D9D9D9",
"on_accent": "#FFFFFF",
"success": "#007A3D",
"warning": "#FFD400",
"error": "#E30613",
"info": "#0057B8",
"black": "#000000",
"white": "#FFFFFF"
}
Typography:
{
"base_size": "17px",
"body_font": "IBM Plex Sans",
"heading_font": "IBM Plex Sans Condensed",
"mono_font": "IBM Plex Mono",
"heading_weight": "700",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": 1.5,
"scale_ratio": 1.25,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"
}
## Visual character to preserve
- A 64px black construction grid runs across every surface; major modules snap to it like Swiss typographic rules and crop marks.
- Each framed white panel is anchored by a full circle and a full square corner marker at opposite corners — never a single coloured card edge.
- Oversized condensed figures and headlines on solid black ink panels are the primary graphic device, with primary-signal bars beneath.
- Metadata reads as small uppercase IBM Plex Mono tags with a leading square colour chip; status is always chip-or-dot plus a text label.
## ShadSync visual profile
{
"family": "brutalist",
"material": "ink",
"contour": "default",
"border": "solid",
"underlay": true,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "dense",
"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/konkret/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 pure #FFFFFF as the dominant ground and true #000000 for construction lines and type.; Apply letter-spacing -0.02em globally, including labels, body, controls, and table text.; Expose the grid with ruled borders, aligned columns, and measured empty cells rather than hiding structure.; Use red, blue, and yellow as sparse functional markers — status chips, segmented measures, signal bars, corner anchors.; Keep all containers square (0px radius); use offset black slab shadows only for active interactive emphasis.; Build hierarchy through scale, weight, case, position, and rule thickness before adding colour.; Explicitly style every form control; give each a hard focus state and a minimum 44px touch target.
- Do not: Do not use gradients, glassmorphism, pastel washes, or blue-grey dark neutrals.; Do not round cards or controls except tiny status dots and corner markers.; Do not give a card a single coloured accent edge or trap the nav in a pill/floating card.; Do not centre every section or use a symmetrical hero composition.; Do not add distressed Bauhaus poster texture or faux vintage effects.; Do not communicate state through colour alone; pair every chip with a text label.; Do not use decorative or emoji icons where a typographic label or geometric marker is clearer.
## 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 KonkretShadcnKit() {
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">Konkret</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
{
"grid": "Desktop uses a 12-column grid with 24px gutters, max-width ~1360-1480px, and a visible 64px construction-grid background. Tablet collapses the rail to a top strip or single column; mobile becomes a single stacked column with table overflow. minmax(0,1fr) columns and min-width:0 children keep grids from overflowing.",
"whitespace": "Whitespace is an active module, not padding filler. Empty grid cells are kept on purpose, especially near headlines, to preserve poster-like asymmetric calm.",
"density": "Compact interior modules with measured breathing room for legibility.",
"responsive": "Every artifact renders from ~390px mobile to 2560px+ ultra-wide. At 1024px the rail becomes a top strip and key panels move to two columns; at 768px modules stack in one column; at 480px buttons go full width, controls stack, and data tables scroll horizontally. Ultra-wide caps contained content and lets only the full-bleed hero span 100vw.",
"breakpoints": {
"mobile": "390-560",
"tablet": "561-900",
"desktop": "901-1440",
"ultrawide": "1441+"
}
}
{
"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-019ef880-326f-7e20-84bd-34ac675ac94e",
"name": "Konkret",
"slug": "konkret"
},
"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": [
"A 64px black construction grid runs across every surface; major modules snap to it like Swiss typographic rules and crop marks.",
"Each framed white panel is anchored by a full circle and a full square corner marker at opposite corners — never a single coloured card edge.",
"Oversized condensed figures and headlines on solid black ink panels are the primary graphic device, with primary-signal bars beneath.",
"Metadata reads as small uppercase IBM Plex Mono tags with a leading square colour chip; status is always chip-or-dot plus a text label."
],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "dense",
"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": "Konkret 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 pure #FFFFFF as the dominant ground and true #000000 for construction lines and type.",
"Apply letter-spacing -0.02em globally, including labels, body, controls, and table text.",
"Expose the grid with ruled borders, aligned columns, and measured empty cells rather than hiding structure.",
"Use red, blue, and yellow as sparse functional markers — status chips, segmented measures, signal bars, corner anchors.",
"Keep all containers square (0px radius); use offset black slab shadows only for active interactive emphasis.",
"Build hierarchy through scale, weight, case, position, and rule thickness before adding colour.",
"Explicitly style every form control; give each a hard focus state and a minimum 44px touch target."
],
"dont": [
"Do not use gradients, glassmorphism, pastel washes, or blue-grey dark neutrals.",
"Do not round cards or controls except tiny status dots and corner markers.",
"Do not give a card a single coloured accent edge or trap the nav in a pill/floating card.",
"Do not centre every section or use a symmetrical hero composition.",
"Do not add distressed Bauhaus poster texture or faux vintage effects.",
"Do not communicate state through colour alone; pair every chip with a text label.",
"Do not use decorative or emoji icons where a typographic label or geometric marker is clearer."
]
}
}