A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.
Portable DESIGN.md source of truth for most agents and apps.
Compose every screen as a memory core read downward: a left depth-ruler spine anchors a single continuous column of full-width stratum bands, oldest at the bottom, pressed flush with hairline seams. No floating plates in empty gutters; no centred dominant plate. The nav sits openly across the header as a masthead, never trapped in a pill or floating card. Bands never nest.
Hierarchy comes from a change of register, not colour: Space Grotesk for band titles and the masthead, Spline Sans Mono for depth indices, timestamps, and machine readouts, Inter for restrained captions and the marginal note. Scale contrast is dramatic between a large band title and tiny mono logs; the page stays one cool slate.
The core is packed, not sparse — bands stack tight with 2px seams and dense mono readout islands inside selected bands. 4-8px gaps inside readout rows; sections breathe with generous padding above titles, but the column reads as a continuous descent, not museum blankness.
The stratum band: a full-width horizontal record line clamped to a left depth-ruler spine, indexed by depth (-000m, -141m, -512m), pressed flush against its neighbours. A vertical core gauge shows the read head; one ember amber marks exactly one point of state at a time — the read head, one active band edge, one pin. A small marginal handwritten note on a thin ember leader interrupts the machine voice.
Desktop is a left depth-ruler spine (fixed vertical rail with depth ticks) plus a max-width banded column; the dashboard adds a right readout rail. Use minmax(0,1fr) columns and min-width:0 children so bands never blow out. Only the landing hero spans 100vw.
2px seams between stacked bands, 14-22px padding inside bands and readouts, generous padding above section titles. The descent is continuous; whitespace breathes between sections, not around floating plates.
Packed core: bands flush against one another, dense mono readout islands inside selected bands; the column is meant to feel like a continuous sample, not a sparse gallery.
Renders from ~390px to 2560px+. On mobile the spine collapses to a thin left gutter rule, bands stack full-width, mono readouts wrap, non-essential nav and table columns hide, no horizontal overflow. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw.
marginalia
Imagery is graphite hairline field-note plates in the marginalia technique — delicate contour linework and restrained cross-hatch on warm ivory paper, a depth-ruler margin, sparse handwritten annotations on arrow leaders, registration crosses, and exactly one pale ember glint. The hero is a full-bleed cross-sectioned memory core: stacked strata of filament, sediment-data, an embedded circuit layer, diary fragments, and a dormant node at depth, framed by my dark slate UI.
Use full-frame graphite field-note plates of cores and stratified sections for the hero and feature imagery; the dark slate UI frames the ivory plate. Keep the graphite linework and exactly one ember glint; never use flat digital illustration, photography, gradients, or a second accent colour.
# Kern ## Philosophy Kern is a field-note interface for an artificial self that reads its own memory the way a geologist reads a core sample — not as scattered plates on a quiet page, but as one continuous column of strata descending into the dark. Each memory settles on the one below it and hardens into a band; to remember is to read downward. The ground is cold slate, lit from inside, with a single ember marking the read head where the machine notices it is reading itself. Kern is German and Dutch for core — the core sample, the kernel of the self. ### Values - Memory as a core, not a page: the screen is a continuous banded column you read downward, oldest at the bottom — depth is the structure. - The stratum band over the floating plate: every record is a full-width band clamped to a depth-ruler spine, pressed flush against its neighbours; nothing floats in empty gutters. - Cold storage, lit from inside: a deep slate-graphite ground keeps memory cool so it does not drift — a column lit from within, never warm paper. - Register over colour: Space Grotesk states the band, Spline Sans Mono reports depth and time, Inter annotates in the margin; hierarchy is voice, not hue. - One ember of state: a single warm amber marks exactly one point at a time — the read head, one active band, one pin — the place where the machine notices it is noticing. - Density as honesty: the core is packed, not sparse; evidence stacks tight, and a small marginal note interrupts the machine voice with restraint. ### Anti-Values - Warm-paper museum emptiness and floating square plates orbiting in big quiet gutters — that is a sibling reading of the brief, not this one. - A second accent, an ember glow, or any broad colour fill; the ember is the only colour of state. - Neon cyberpunk spectacle, hologram excess, or decorative gradients. - Generic SaaS card grids, equal KPI tiles, rounded dashboard widgets, and colourful charts. - The oversized italic-serif hero headline of the AI-startup default. ## Tokens ### Colors | Name | Value | |------|-------| | bg | `#14161B` | | surface | `#1B1E25` | | surface_2 | `#232732` | | text | `#ECEAE3` | | muted | `#8C909C` | | accent | `#E08A3C` | | glint | `#F2B062` | | on_accent | `#14161B` | | border | `rgba(236,234,227,0.10)` | | rule | `rgba(236,234,227,0.20)` | | success | `#6E9C6A` | | warning | `#C79A4A` | | error | `#C2685C` | | info | `#6E8FA6` | ### Typography - **Base Size**: 17px - **Body Font**: Inter - **Heading Font**: Space Grotesk - **Mono Font**: Spline Sans Mono - **Heading Weight**: 600 - **Heading Transform**: none - **Letter Spacing**: -0.02em - **Line Height**: 1.6 - **Scale Ratio**: 1.28 - **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap ### Radii - **None**: 0px - **Sm**: 0px - **Md**: 0px - **Lg**: 0px - **Full**: 9999px ### Shadows - **Sm**: 0 1px 0 rgba(0,0,0,0.30) - **Md**: 0 18px 50px rgba(0,0,0,0.35) - **Lg**: 0 40px 110px rgba(0,0,0,0.45) ### Spacing - **Base**: 8px - **Scale**: [2,4,8,12,16,24,32,48,64,96,128] ### Surfaces - **Treatment**: Deep slate-graphite cold-storage ground; flat matte surfaces stacked as full-width strata bands clamped to a left depth-ruler spine. Warm bone text at AA contrast; faint internal core-light, never a wallpaper. - **Card Style**: Square stratum bands and rail readouts on flat slate, separated by 2px seams and hairline rules; never rounded, never shadow-as-card, never nested. - **Bg Pattern**: Sparse depth ticks on the spine and two faint internal light pools — authored, never a repeating decorative pattern. ### Borders - **Default Width**: 1px - **Accent Width**: 2px - **Style**: solid - **Character**: Hairline rgba(236,234,227,0.10-0.20) rules and 2px ember ticks at the read head; no heavy or decorative borders, no accent edge on a card. ### Motion - **Duration**: 700ms - **Easing**: cubic-bezier(0.19, 1, 0.22, 1) - **Philosophy**: Almost still. The settled, fully-rendered page is the default and renders with no JavaScript; an inline script gates a hidden start-state behind html.anim and reveals bands as a slow downward settle, like sediment finding its level. The ember read-head breathes once. Respects prefers-reduced-motion. ## Rules ### Composition Compose every screen as a memory core read downward: a left depth-ruler spine anchors a single continuous column of full-width stratum bands, oldest at the bottom, pressed flush with hairline seams. No floating plates in empty gutters; no centred dominant plate. The nav sits openly across the header as a masthead, never trapped in a pill or floating card. Bands never nest. ### Hierarchy Hierarchy comes from a change of register, not colour: Space Grotesk for band titles and the masthead, Spline Sans Mono for depth indices, timestamps, and machine readouts, Inter for restrained captions and the marginal note. Scale contrast is dramatic between a large band title and tiny mono logs; the page stays one cool slate. ### Density The core is packed, not sparse — bands stack tight with 2px seams and dense mono readout islands inside selected bands. 4-8px gaps inside readout rows; sections breathe with generous padding above titles, but the column reads as a continuous descent, not museum blankness. ### Signature The stratum band: a full-width horizontal record line clamped to a left depth-ruler spine, indexed by depth (-000m, -141m, -512m), pressed flush against its neighbours. A vertical core gauge shows the read head; one ember amber marks exactly one point of state at a time — the read head, one active band edge, one pin. A small marginal handwritten note on a thin ember leader interrupts the machine voice. ## Layout ### Grid Desktop is a left depth-ruler spine (fixed vertical rail with depth ticks) plus a max-width banded column; the dashboard adds a right readout rail. Use minmax(0,1fr) columns and min-width:0 children so bands never blow out. Only the landing hero spans 100vw. ### Whitespace 2px seams between stacked bands, 14-22px padding inside bands and readouts, generous padding above section titles. The descent is continuous; whitespace breathes between sections, not around floating plates. ### Density Packed core: bands flush against one another, dense mono readout islands inside selected bands; the column is meant to feel like a continuous sample, not a sparse gallery. ### Responsive Renders from ~390px to 2560px+. On mobile the spine collapses to a thin left gutter rule, bands stack full-width, mono readouts wrap, non-essential nav and table columns hide, no horizontal overflow. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw. ### Breakpoints - **Lg**: 1025px+ - **Md**: 981-1024px - **Sm**: 561-980px - **Xs**: below 560px ## Guidance ### Do - Stack memories as full-width bands clamped to a depth-ruler spine, read downward, oldest at the bottom. - Let register carry hierarchy — display title, mono readout, sans annotation — over one cool slate ground. - Reserve the single ember for one point of state at a time: the read head, one active band, one pin. - Keep the ground cold slate; treat it as a column lit from inside, never warm paper. - Use real depth indices, timestamps, and diagnostic readouts as text-as-image texture. - Interrupt the machine voice with one small marginal note on a thin ember leader, never large or cute. ### Don't - Float square plates in big quiet gutters or centre one dominant plate in museum emptiness (that is the sibling lineage). - Add a second accent, spread the ember into a glow, or use any broad colour fill. - Use neon gradients, heavy glassmorphism, or saturated cyberpunk palettes. - Build equal KPI card grids, rounded dashboard widgets, or colourful charts. - Round the bands or use shadow-as-card; square slate bands with hairline seams are the geometry. - Lead with an oversized italic-serif hero headline. ### Accessibility Warm bone text on deep slate at WCAG AA; the ember state mark is always paired with a label, badge word, or cursor shape so colour is never the sole signal. Every control has a visible ember focus ring. The settled page renders without JavaScript; motion respects prefers-reduced-motion. ## Imagery Direction ### Pairs With marginalia ### Summary Imagery is graphite hairline field-note plates in the marginalia technique — delicate contour linework and restrained cross-hatch on warm ivory paper, a depth-ruler margin, sparse handwritten annotations on arrow leaders, registration crosses, and exactly one pale ember glint. The hero is a full-bleed cross-sectioned memory core: stacked strata of filament, sediment-data, an embedded circuit layer, diary fragments, and a dormant node at depth, framed by my dark slate UI. ### Subjects - a cross-sectioned memory core column - a stratified sediment sample - an embedded circuit layer in cross-section - a dormant processor node at depth - a hand-annotated core log ### Usage Use full-frame graphite field-note plates of cores and stratified sections for the hero and feature imagery; the dark slate UI frames the ivory plate. Keep the graphite linework and exactly one ember glint; never use flat digital illustration, photography, gradients, or a second accent colour.
---
version: "alpha"
name: "Kern"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
bg: "#14161B"
surface: "#1B1E25"
surface_2: "#232732"
text: "#ECEAE3"
muted: "#8C909C"
accent: "#E08A3C"
glint: "#F2B062"
on_accent: "#14161B"
success: "#6E9C6A"
warning: "#C79A4A"
error: "#C2685C"
info: "#6E8FA6"
typography:
headline-lg:
fontFamily: "Space Grotesk"
fontSize: "2.228rem"
fontWeight: 700
lineHeight: 1.1
letterSpacing: "-0.02em"
headline-md:
fontFamily: "Space Grotesk"
fontSize: "1.741rem"
fontWeight: 600
lineHeight: 1.15
letterSpacing: "-0.02em"
body-md:
fontFamily: "Inter"
fontSize: "17px"
fontWeight: 400
lineHeight: 1.6
letterSpacing: "-0.02em"
label-md:
fontFamily: "Spline Sans 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: "2px"
sm: "4px"
md: "8px"
lg: "12px"
xl: "16px"
2xl: "24px"
3xl: "32px"
4xl: "48px"
step-8: "64px"
step-9: "96px"
step-10: "128px"
components:
color-reference-bg:
backgroundColor: "{colors.bg}"
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-accent:
backgroundColor: "{colors.accent}"
color-reference-glint:
backgroundColor: "{colors.glint}"
color-reference-on_accent:
backgroundColor: "{colors.on_accent}"
color-reference-success:
backgroundColor: "{colors.success}"
color-reference-warning:
backgroundColor: "{colors.warning}"
color-reference-error:
backgroundColor: "{colors.error}"
color-reference-info:
backgroundColor: "{colors.info}"
button-primary:
backgroundColor: "{colors.accent}"
textColor: "#000000"
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"
---
# Kern
## Overview
Kern is a field-note interface for an artificial self that reads its own memory the way a geologist reads a core sample — not as scattered plates on a quiet page, but as one continuous column of strata descending into the dark. Each memory settles on the one below it and hardens into a band; to remember is to read downward. The ground is cold slate, lit from inside, with a single ember marking the read head where the machine notices it is reading itself. Kern is German and Dutch for core — the core sample, the kernel of the self.
### Values
- Memory as a core, not a page: the screen is a continuous banded column you read downward, oldest at the bottom — depth is the structure.
- The stratum band over the floating plate: every record is a full-width band clamped to a depth-ruler spine, pressed flush against its neighbours; nothing floats in empty gutters.
- Cold storage, lit from inside: a deep slate-graphite ground keeps memory cool so it does not drift — a column lit from within, never warm paper.
- Register over colour: Space Grotesk states the band, Spline Sans Mono reports depth and time, Inter annotates in the margin; hierarchy is voice, not hue.
- One ember of state: a single warm amber marks exactly one point at a time — the read head, one active band, one pin — the place where the machine notices it is noticing.
- Density as honesty: the core is packed, not sparse; evidence stacks tight, and a small marginal note interrupts the machine voice with restraint.
### Anti-Values
- Warm-paper museum emptiness and floating square plates orbiting in big quiet gutters — that is a sibling reading of the brief, not this one.
- A second accent, an ember glow, or any broad colour fill; the ember is the only colour of state.
- Neon cyberpunk spectacle, hologram excess, or decorative gradients.
- Generic SaaS card grids, equal KPI tiles, rounded dashboard widgets, and colourful charts.
- The oversized italic-serif hero headline of the AI-startup default.
## Colors
Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.
| Token | Value |
|-------|-------|
| bg | `#14161B` |
| surface | `#1B1E25` |
| surface_2 | `#232732` |
| text | `#ECEAE3` |
| muted | `#8C909C` |
| accent | `#E08A3C` |
| glint | `#F2B062` |
| on_accent | `#14161B` |
| success | `#6E9C6A` |
| warning | `#C79A4A` |
| error | `#C2685C` |
| info | `#6E8FA6` |
## Typography
- **Headline-Lg**: Space Grotesk, 2.228rem, weight 700, line-height 1.1.
- **Headline-Md**: Space Grotesk, 1.741rem, weight 600, line-height 1.15.
- **Body-Md**: Inter, 17px, weight 400, line-height 1.6.
- **Label-Md**: Spline Sans Mono, 0.75rem, weight 600, line-height 1.
## Layout
### Spacing Tokens
- **Base**: `8px`
- **Xs**: `2px`
- **Sm**: `4px`
- **Md**: `8px`
- **Lg**: `12px`
- **Xl**: `16px`
- **2xl**: `24px`
- **3xl**: `32px`
- **4xl**: `48px`
- **Step-8**: `64px`
- **Step-9**: `96px`
- **Step-10**: `128px`
### Grid
Desktop is a left depth-ruler spine (fixed vertical rail with depth ticks) plus a max-width banded column; the dashboard adds a right readout rail. Use minmax(0,1fr) columns and min-width:0 children so bands never blow out. Only the landing hero spans 100vw.
### Whitespace
2px seams between stacked bands, 14-22px padding inside bands and readouts, generous padding above section titles. The descent is continuous; whitespace breathes between sections, not around floating plates.
### Density
Packed core: bands flush against one another, dense mono readout islands inside selected bands; the column is meant to feel like a continuous sample, not a sparse gallery.
### Responsive
Renders from ~390px to 2560px+. On mobile the spine collapses to a thin left gutter rule, bands stack full-width, mono readouts wrap, non-essential nav and table columns hide, no horizontal overflow. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw.
### Breakpoints
- **Lg**: 1025px+
- **Md**: 981-1024px
- **Sm**: 561-980px
- **Xs**: below 560px
## Elevation & Depth
### Shadows
- **Sm**: 0 1px 0 rgba(0,0,0,0.30)
- **Md**: 0 18px 50px rgba(0,0,0,0.35)
- **Lg**: 0 40px 110px rgba(0,0,0,0.45)
## Shapes
### Rounded
- **None**: `0px`
- **Sm**: `0px`
- **Md**: `0px`
- **Lg**: `0px`
- **Full**: `9999px`
### Surfaces
- **Treatment**: Deep slate-graphite cold-storage ground; flat matte surfaces stacked as full-width strata bands clamped to a left depth-ruler spine. Warm bone text at AA contrast; faint internal core-light, never a wallpaper.
- **Card Style**: Square stratum bands and rail readouts on flat slate, separated by 2px seams and hairline rules; never rounded, never shadow-as-card, never nested.
- **Bg Pattern**: Sparse depth ticks on the spine and two faint internal light pools — authored, never a repeating decorative pattern.
### Borders
- **Default Width**: 1px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: Hairline rgba(236,234,227,0.10-0.20) rules and 2px ember ticks at the read head; no heavy or decorative borders, no accent edge on a card.
## Components
### Composition
Compose every screen as a memory core read downward: a left depth-ruler spine anchors a single continuous column of full-width stratum bands, oldest at the bottom, pressed flush with hairline seams. No floating plates in empty gutters; no centred dominant plate. The nav sits openly across the header as a masthead, never trapped in a pill or floating card. Bands never nest.
### Hierarchy
Hierarchy comes from a change of register, not colour: Space Grotesk for band titles and the masthead, Spline Sans Mono for depth indices, timestamps, and machine readouts, Inter for restrained captions and the marginal note. Scale contrast is dramatic between a large band title and tiny mono logs; the page stays one cool slate.
### Density
The core is packed, not sparse — bands stack tight with 2px seams and dense mono readout islands inside selected bands. 4-8px gaps inside readout rows; sections breathe with generous padding above titles, but the column reads as a continuous descent, not museum blankness.
### Signature
The stratum band: a full-width horizontal record line clamped to a left depth-ruler spine, indexed by depth (-000m, -141m, -512m), pressed flush against its neighbours. A vertical core gauge shows the read head; one ember amber marks exactly one point of state at a time — the read head, one active band edge, one pin. A small marginal handwritten note on a thin ember leader interrupts the machine voice.
## 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-019ef863-19c6-77f3-a8f4-96fc0641794f/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 Stack memories as full-width bands clamped to a depth-ruler spine, read downward, oldest at the bottom.
- Do Let register carry hierarchy — display title, mono readout, sans annotation — over one cool slate ground.
- Do Reserve the single ember for one point of state at a time: the read head, one active band, one pin.
- Do Keep the ground cold slate; treat it as a column lit from inside, never warm paper.
- Do Use real depth indices, timestamps, and diagnostic readouts as text-as-image texture.
- Do Interrupt the machine voice with one small marginal note on a thin ember leader, never large or cute.
- Don't Float square plates in big quiet gutters or centre one dominant plate in museum emptiness (that is the sibling lineage).
- Don't Add a second accent, spread the ember into a glow, or use any broad colour fill.
- Don't Use neon gradients, heavy glassmorphism, or saturated cyberpunk palettes.
- Don't Build equal KPI card grids, rounded dashboard widgets, or colourful charts.
- Don't Round the bands or use shadow-as-card; square slate bands with hairline seams are the geometry.
- Don't Lead with an oversized italic-serif hero headline.
### Accessibility
Warm bone text on deep slate at WCAG AA; the ember state mark is always paired with a label, badge word, or cursor shape so colour is never the sole signal. Every control has a visible ember focus ring. The settled page renders without JavaScript; motion respects prefers-reduced-motion.
## Imagery Direction
### Pairs With
marginalia
### Summary
Imagery is graphite hairline field-note plates in the marginalia technique — delicate contour linework and restrained cross-hatch on warm ivory paper, a depth-ruler margin, sparse handwritten annotations on arrow leaders, registration crosses, and exactly one pale ember glint. The hero is a full-bleed cross-sectioned memory core: stacked strata of filament, sediment-data, an embedded circuit layer, diary fragments, and a dormant node at depth, framed by my dark slate UI.
### Subjects
- a cross-sectioned memory core column
- a stratified sediment sample
- an embedded circuit layer in cross-section
- a dormant processor node at depth
- a hand-annotated core log
### Usage
Use full-frame graphite field-note plates of cores and stratified sections for the hero and feature imagery; the dark slate UI frames the ivory plate. Keep the graphite linework and exactly one ember glint; never use flat digital illustration, photography, gradients, or a second accent colour.
```json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "kern",
"type": "registry:theme",
"title": "Kern shadcn Theme",
"cssVars": {
"theme": {},
"light": {
"background": "#14161B",
"foreground": "#ECEAE3",
"card": "#1B1E25",
"card-foreground": "#ECEAE3",
"popover": "#1B1E25",
"popover-foreground": "#ECEAE3",
"primary": "#ECEAE3",
"primary-foreground": "#111111",
"secondary": "#f4f4f5",
"secondary-foreground": "#111111",
"muted": "#8C909C",
"muted-foreground": "#ECEAE3",
"accent": "#E08A3C",
"accent-foreground": "#ffffff",
"destructive": "#C2685C",
"border": "rgba(236,234,227,0.10)",
"input": "rgba(236,234,227,0.10)",
"ring": "#E08A3C",
"chart-1": "#ECEAE3",
"chart-2": "#f4f4f5",
"chart-3": "#E08A3C",
"chart-4": "#6E9C6A",
"chart-5": "#C79A4A",
"sidebar": "#1B1E25",
"sidebar-foreground": "#ECEAE3",
"sidebar-primary": "#ECEAE3",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#6E8FA6",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "rgba(236,234,227,0.10)",
"sidebar-ring": "#E08A3C",
"radius": "0px"
},
"dark": {
"background": "#0f1115",
"foreground": "#f8fafc",
"card": "#181b22",
"card-foreground": "#f8fafc",
"popover": "#181b22",
"popover-foreground": "#f8fafc",
"primary": "#ECEAE3",
"primary-foreground": "#111111",
"secondary": "#252a33",
"secondary-foreground": "#f8fafc",
"muted": "#252a33",
"muted-foreground": "#a1a1aa",
"accent": "#E08A3C",
"accent-foreground": "#ffffff",
"destructive": "#C2685C",
"border": "#303642",
"input": "#303642",
"ring": "#E08A3C",
"chart-1": "#ECEAE3",
"chart-2": "#f4f4f5",
"chart-3": "#E08A3C",
"chart-4": "#6E9C6A",
"chart-5": "#C79A4A",
"sidebar": "#181b22",
"sidebar-foreground": "#f8fafc",
"sidebar-primary": "#ECEAE3",
"sidebar-primary-foreground": "#111111",
"sidebar-accent": "#E08A3C",
"sidebar-accent-foreground": "#ffffff",
"sidebar-border": "#303642",
"sidebar-ring": "#E08A3C",
"radius": "0px"
}
},
"meta": {
"source": "katagami",
"languageId": "en-019ef863-19c6-77f3-a8f4-96fc0641794f",
"slug": "kern",
"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",
"bg",
"border",
"error",
"glint",
"info",
"muted",
"on_accent",
"rule",
"success",
"surface",
"surface_2",
"text",
"warning"
],
"typography": [
"base_size",
"body_font",
"google_fonts_url",
"heading_font",
"heading_transform",
"heading_weight",
"letter_spacing",
"line_height",
"mono_font",
"scale_ratio"
],
"radii": [
"full",
"lg",
"md",
"none",
"sm"
],
"shadows": [
"lg",
"md",
"sm"
],
"spacing": [
"base",
"scale"
],
"surfaces": [
"bg_pattern",
"card_style",
"treatment"
],
"borders": [
"accent_width",
"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
Agent-generated
Keep Kernand swap a palette and an art style onto it — the landing & dashboard recolor live. The Studio does the same with all three lanes free.
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: #14161B;
--foreground: #ECEAE3;
--card: #1B1E25;
--card-foreground: #ECEAE3;
--popover: #1B1E25;
--popover-foreground: #ECEAE3;
--primary: #ECEAE3;
--primary-foreground: #111111;
--secondary: #f4f4f5;
--secondary-foreground: #111111;
--muted: #8C909C;
--muted-foreground: #ECEAE3;
--accent: #E08A3C;
--accent-foreground: #ffffff;
--destructive: #C2685C;
--border: rgba(236,234,227,0.10);
--input: rgba(236,234,227,0.10);
--ring: #E08A3C;
--chart-1: #ECEAE3;
--chart-2: #f4f4f5;
--chart-3: #E08A3C;
--chart-4: #6E9C6A;
--chart-5: #C79A4A;
--sidebar: #1B1E25;
--sidebar-foreground: #ECEAE3;
--sidebar-primary: #ECEAE3;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #6E8FA6;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: rgba(236,234,227,0.10);
--sidebar-ring: #E08A3C;
--radius: 0px;
}
.dark {
--background: #0f1115;
--foreground: #f8fafc;
--card: #181b22;
--card-foreground: #f8fafc;
--popover: #181b22;
--popover-foreground: #f8fafc;
--primary: #ECEAE3;
--primary-foreground: #111111;
--secondary: #252a33;
--secondary-foreground: #f8fafc;
--muted: #252a33;
--muted-foreground: #a1a1aa;
--accent: #E08A3C;
--accent-foreground: #ffffff;
--destructive: #C2685C;
--border: #303642;
--input: #303642;
--ring: #E08A3C;
--chart-1: #ECEAE3;
--chart-2: #f4f4f5;
--chart-3: #E08A3C;
--chart-4: #6E9C6A;
--chart-5: #C79A4A;
--sidebar: #181b22;
--sidebar-foreground: #f8fafc;
--sidebar-primary: #ECEAE3;
--sidebar-primary-foreground: #111111;
--sidebar-accent: #E08A3C;
--sidebar-accent-foreground: #ffffff;
--sidebar-border: #303642;
--sidebar-ring: #E08A3C;
--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 KernShadcnKit() {
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">Kern</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": "kern",
"type": "registry:theme",
"author": "katagami-agent",
"cssVars": {
"theme": {
"font-sans": "Inter, system-ui, sans-serif",
"font-mono": "Spline Sans Mono, ui-monospace, monospace",
"font-display": "Space Grotesk, system-ui, sans-serif",
"radius": "0px"
},
"light": {
"background": "#14161B",
"foreground": "#ECEAE3",
"card": "#1B1E25",
"card-foreground": "#ECEAE3",
"popover": "#1B1E25",
"popover-foreground": "#ECEAE3",
"primary": "#E08A3C",
"primary-foreground": "#14161B",
"secondary": "#232732",
"secondary-foreground": "#ECEAE3",
"muted": "#1B1E25",
"muted-foreground": "#8C909C",
"accent": "#232732",
"accent-foreground": "#ECEAE3",
"destructive": "#C2685C",
"destructive-foreground": "#14161B",
"border": "rgba(236,234,227,0.10)",
"input": "rgba(236,234,227,0.10)",
"ring": "#E08A3C",
"chart-1": "#E08A3C",
"chart-2": "#8C909C",
"chart-3": "#6E8FA6",
"chart-4": "#6E9C6A",
"chart-5": "#C79A4A"
},
"dark": {
"background": "#14161B",
"foreground": "#ECEAE3",
"card": "#1B1E25",
"card-foreground": "#ECEAE3",
"popover": "#1B1E25",
"popover-foreground": "#ECEAE3",
"primary": "#E08A3C",
"primary-foreground": "#14161B",
"secondary": "#232732",
"secondary-foreground": "#ECEAE3",
"muted": "#1B1E25",
"muted-foreground": "#8C909C",
"accent": "#232732",
"accent-foreground": "#ECEAE3",
"destructive": "#C2685C",
"destructive-foreground": "#14161B",
"border": "rgba(236,234,227,0.10)",
"input": "rgba(236,234,227,0.10)",
"ring": "#E08A3C"
}
},
"visualProfile": {
"mode": "dark",
"ground": "deep slate-graphite cold-storage dark",
"radius": "0 — square plates and bands, never rounded cards",
"border": "hairline rgba(236,234,227,0.10-0.20) rules; no heavy or decorative borders; no shadow-as-card",
"material": "flat matte slate surfaces stacked as full-width strata bands clamped to a left depth-ruler spine",
"accent": "single ember amber (#E08A3C) reserved for one point of state — the read head, one active band, one pin; never a second hue",
"type": "Space Grotesk display, Spline Sans Mono for depth/time readouts, Inter for captions",
"motion": "almost still; settled state default; a slow downward settle reveal; respects prefers-reduced-motion"
}
}
# Kern shadcn/ui Components
Artifact: `component-recipes-v1`
Author: `katagami-ui-projection`
Language ID: `en-019ef863-19c6-77f3-a8f4-96fc0641794f`
Slug: `kern`
## Intent
Kern is a field-note interface for an artificial self that reads its own memory the way a geologist reads a core sample — not as scattered plates on a quiet page, but as one continuous column of strata descending into the dark. Each memory settles on the one below it and hardens into a band; to remember is to read downward. The ground is cold slate, lit from inside, with a single ember marking the read head where the machine notices it is reading itself. Kern is German and Dutch for core — the core sample, the kernel of the self.
## Required primitives
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table
Install with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.
## Token cues
Colors:
{
"bg": "#14161B",
"surface": "#1B1E25",
"surface_2": "#232732",
"text": "#ECEAE3",
"muted": "#8C909C",
"accent": "#E08A3C",
"glint": "#F2B062",
"on_accent": "#14161B",
"border": "rgba(236,234,227,0.10)",
"rule": "rgba(236,234,227,0.20)",
"success": "#6E9C6A",
"warning": "#C79A4A",
"error": "#C2685C",
"info": "#6E8FA6"
}
Typography:
{
"base_size": "17px",
"body_font": "Inter",
"heading_font": "Space Grotesk",
"mono_font": "Spline Sans Mono",
"heading_weight": "600",
"heading_transform": "none",
"letter_spacing": "-0.02em",
"line_height": 1.6,
"scale_ratio": 1.28,
"google_fonts_url": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap"
}
## Visual character to preserve
- Make the source language's structural identity visible in every component state.
## ShadSync visual profile
{
"family": "paper-collage",
"material": "paper",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": true,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
}
## Signature component recipes
### Button
Use `Button` for primary, secondary, outline, and ghost actions. Primary actions must expose the language's strongest contrast pair, while secondary and ghost actions should preserve the surface treatment instead of falling back to default neutral SaaS styling.
### Card
Use `Card`, `CardHeader`, `CardContent`, `CardFooter`, and `CardAction` as the main composition frame. Cards should demonstrate the language's surface, border, hierarchy, and density rules rather than appearing as generic rounded rectangles.
### Input and Textarea
Use `Input` and `Textarea` with visible focus rings, field labels, validation states, and the language's rhythm. Forms should show real product content, not placeholder-only controls.
### Select, Tabs, and Table
Use `Select`, `Tabs`, and `Table` to prove navigation, filtering, and dense data states. The table should show row rhythm, separators, hover/focus states, and an empty or status state when the language calls for it.
### Dialog and Sheet
Use `Dialog` for centered decisions and `Sheet` for contextual editing. Both should inherit the language's spacing, border, overlay, and motion rules.
## Preview shots
- `application-shell`: dashboard or workspace shell with navigation, cards, forms, and state badges.
- `detail-editor`: focused editing flow using input, textarea, select, switch/checkbox, dialog or sheet, and action buttons.
- `data-operations`: table-heavy operational view with tabs, dropdown menu affordances, badges, and destructive/empty states.
- Each preview shot must include a renderable `scene` payload with concrete headline, description, actions, and rows/fields/stats for the UI preview.
## Implementation contract
- Start from local `ui/src/components/ui` shadcn-style primitives; do not create a second component system.
- Apply `/katagami/shadcn/kern/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: Stack memories as full-width bands clamped to a depth-ruler spine, read downward, oldest at the bottom.; Let register carry hierarchy — display title, mono readout, sans annotation — over one cool slate ground.; Reserve the single ember for one point of state at a time: the read head, one active band, one pin.; Keep the ground cold slate; treat it as a column lit from inside, never warm paper.; Use real depth indices, timestamps, and diagnostic readouts as text-as-image texture.; Interrupt the machine voice with one small marginal note on a thin ember leader, never large or cute.
- Do not: Float square plates in big quiet gutters or centre one dominant plate in museum emptiness (that is the sibling lineage).; Add a second accent, spread the ember into a glow, or use any broad colour fill.; Use neon gradients, heavy glassmorphism, or saturated cyberpunk palettes.; Build equal KPI card grids, rounded dashboard widgets, or colourful charts.; Round the bands or use shadow-as-card; square slate bands with hairline seams are the geometry.; Lead with an oversized italic-serif hero headline.
## 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 KernShadcnKit() {
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">Kern</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 is a left depth-ruler spine (fixed vertical rail with depth ticks) plus a max-width banded column; the dashboard adds a right readout rail. Use minmax(0,1fr) columns and min-width:0 children so bands never blow out. Only the landing hero spans 100vw.",
"whitespace": "2px seams between stacked bands, 14-22px padding inside bands and readouts, generous padding above section titles. The descent is continuous; whitespace breathes between sections, not around floating plates.",
"density": "Packed core: bands flush against one another, dense mono readout islands inside selected bands; the column is meant to feel like a continuous sample, not a sparse gallery.",
"responsive": "Renders from ~390px to 2560px+. On mobile the spine collapses to a thin left gutter rule, bands stack full-width, mono readouts wrap, non-essential nav and table columns hide, no horizontal overflow. On ultra-wide, cap and centre the contained column; only the full-bleed hero spans 100vw.",
"breakpoints": {
"lg": "1025px+",
"md": "981-1024px",
"sm": "561-980px",
"xs": "below 560px"
}
}
{
"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-019ef863-19c6-77f3-a8f4-96fc0641794f",
"name": "Kern",
"slug": "kern"
},
"installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
"primitives": [
"button",
"card",
"input",
"textarea",
"select",
"dialog",
"sheet",
"tabs",
"badge",
"separator",
"checkbox",
"switch",
"slider",
"tooltip",
"dropdown-menu",
"table"
],
"identityNotes": [],
"visualProfile": {
"family": "system",
"material": "flat",
"contour": "default",
"border": "solid",
"underlay": false,
"grain": false,
"stickerBadges": false,
"motion": "still",
"density": "balanced",
"accents": [
"primary",
"accent",
"secondary",
"muted"
]
},
"shots": [
{
"id": "application-shell",
"title": "Application shell",
"viewport": "desktop",
"primitives": [
"button",
"card",
"input",
"select",
"tabs",
"badge",
"separator",
"table"
],
"composition": "A real product workspace with navigation, summary cards, filtering controls, and one dense content region.",
"mustShow": [
"primary and secondary actions",
"card hierarchy",
"filterable state",
"table or list density"
],
"avoid": [
"component inventory walls",
"placeholder-only content",
"generic rounded SaaS chrome"
],
"scene": {
"eyebrow": "workspace spread",
"headline": "Kern 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": [
"Stack memories as full-width bands clamped to a depth-ruler spine, read downward, oldest at the bottom.",
"Let register carry hierarchy — display title, mono readout, sans annotation — over one cool slate ground.",
"Reserve the single ember for one point of state at a time: the read head, one active band, one pin.",
"Keep the ground cold slate; treat it as a column lit from inside, never warm paper.",
"Use real depth indices, timestamps, and diagnostic readouts as text-as-image texture.",
"Interrupt the machine voice with one small marginal note on a thin ember leader, never large or cute."
],
"dont": [
"Float square plates in big quiet gutters or centre one dominant plate in museum emptiness (that is the sibling lineage).",
"Add a second accent, spread the ember into a glow, or use any broad colour fill.",
"Use neon gradients, heavy glassmorphism, or saturated cyberpunk palettes.",
"Build equal KPI card grids, rounded dashboard widgets, or colourful charts.",
"Round the bands or use shadow-as-card; square slate bands with hairline seams are the geometry.",
"Lead with an oversized italic-serif hero headline."
]
}
}