back to gallery

Palimpsest

A portable design language for agents: download the markdown first, then inspect the preview, tokens, and rules as needed.

Download DESIGN.md

Portable DESIGN.md — tokens plus the paired art style. Agents must generate real images.

the spec

specification

philosophy
summary
Palimpsest keeps the soul of an archive recovery console — damaged memory treated as evidence, uncertainty preserved rather than smoothed, restraint as care — and reconceives the expression from a paper-white scan bed with blue acetate into a near-black conservation bench where one grazing light brings an erased hand back out of the furrow and every reading declares its own doubt in type.
values
Uncertainty is written into the type, not hidden behind a colourA gap keeps its place on the grid and is countedOne lamp, one angle: the whole interface is lit by a single value the reader can moveRestraint as care — two accents, bone type, and a bench that stays darkConcrete conservation language: accessions, angles, passes, custodians, dates
anti-values
×Rounded surfaces in a square language×Coloured accent rails on panel edges×Filled progress bars and glowing meters×Drop shadows, glassmorphism, glow×Promoting a doubtful reading to a clean one by dropping its marks×Amber used as a general brand wash
visual character
A warm near-black bench (#0B0A09) with bone type; the page reads as a dark imaging room with one lamp in it.Every panel carries a raking sheen — linear-gradient(var(--rake), amber, transparent 42%, violet) — so one custom property re-lights the entire interface at once.Sub-baseline point rails (radial-gradient repeat at .22em/.32em/.46em) run under recovered values; a solid .045em rule replaces them when the reading is certain.Half brackets built from two 1px borders wrap text a hand supplied, in running prose and in table cells alike.Panels are registered by two 14-15px corner brackets at the top-left and bottom-right, which ink amber when the panel is active — never a filled or coloured border.
lineage
Descends from Quiet Optical Accession: the same ethic of non-invasive recovery, moved from the manga-panel scan bed to the manuscript conservation bench.
tokens
colors15 items
bg
#0B0A09
surface
#141210
surface_solid
#1C1815
text
#EDE5D5
muted
#A79C88
border
#2C2721
accent
#E3A057
accent_ink
#7C4310
accent_2
#A292D8
accent_soft
#241B10
on_accent
#0B0A09
success
#8FAE72
warning
#D3A24A
error
#C87258
info
#A292D8
typography10 items
base size
17px
body font
Newsreader
heading font
Instrument Serif
mono font
IBM Plex Mono
heading weight
400
heading transform
none
letter spacing
-0.02em
line height
1.62
scale ratio
1.28
google fonts url
https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&display=swap
radii4 items
none
0px
md
0px
lg
0px
full
9999px
shadows3 items
sm
inset 0 0 0 1px rgba(44,39,33,1)
md
inset 0 0 0 1px rgba(227,160,87,0.5)
lg
inset 0 0 0 1px rgba(162,146,216,0.45)
spacing2 items
base
8px
scale
4, 8, 12, 16, 24, 32, 48, 64, 96
surfaces3 items
treatment
A warm near-black bench. Every panel carries a raking sheen — linear-gradient(var(--rake,104deg), rgba(227,160,87,.055), transparent 42%, rgba(162,146,216,.045)) — so one angle re-lights the whole interface. No blur, no drop shadow, no glass.
card style
Square leaves on the bench: bg #141210, radius 0, two 14-15px corner brackets at the top-left and bottom-right in the hairline rule, inked amber when active. Never nested, never edge-railed.
bg pattern
The bench is plain. Texture arrives only through Rasura plates and, on the landing, a WebGL procedural relief lit at the current azimuth that drops to near-zero between beats.
borders4 items
default width
1px
accent width
1px
style
solid
character
Hairline rules divide regions on all sides equally. Panels are not bordered at all — they are registered by two diagonal corner brackets that ink amber when active. A coloured strip on one edge of a card is banned in every artifact.
motion3 items
duration
220ms
easing
cubic-bezier(0.22,0.61,0.36,1)
philosophy
Light moves; things do not bounce. Marks draw themselves along their own path by stroke-dashoffset, rules sweep out by scaleX from the left, plates arrive by clip inset, and the raking angle turns. Every scroll effect is given 80-120vh of travel so it can be watched, and effects fire at purposeful beats rather than running as ambient weather.
rules
composition
Compose screens as a bench in a dark room: one dominant lit plate, a narrow instrument rail, and a register that carries its own doubt. Panels are square leaves laid on the bench, registered at two diagonal corners, lit at the current rake angle. Let one plate dominate and keep copy in the black fall-off of that plate rather than on its busy region.
hierarchy
Hierarchy comes from light, scale and the apparatus — never from colour variety. Instrument Serif carries the display moment; Newsreader at 17px carries every reading; IBM Plex Mono at 10.5-13px carries angles, confidences and control labels. Amber marks what was recovered; violet marks what is held open; everything else is bone, ash and bench.
density
Alternate tight instrument clusters at 4-16px with wide bench margins of 88-110px between regions. Registers may be dense when every row states its certainty; running prose never exceeds 56ch.
signature patterns
The apparatus of doubt: a run of points under a word at three densities (probable / doubtful / very doubtful), resolving to a solid rule when certain, with half brackets around text a hand supplied.The rake: a single --rake angle lights every panel, plate and frame; moving it re-lights the whole interface, and on the landing it rotates with scroll and follows the pointer.The held lacuna: a missing position keeps its cell on the collation grid, stays empty, carries violet corner brackets, and is counted in the tallies.The vernier read: magnitudes are read against a ruled tick scale with a labelled index; filled progress bars do not exist in this language.Registered corners: two 14-15px corner brackets, top-left and bottom-right, mark a panel and ink amber when it is active.
layout
grid

8px base on a 12-column field capped at 1180px, widening to 1440px above 1800px viewports; the console runs a 224px instrument rail beside a fluid work field.

breakpoints
Mobile 390px is a single column with the register scrolling in its own container and the rake dial moved into the top band; tablet 768-1024px is a two-up field with the instrument rail as a top strip; desktop 1280px+ is the full rail-plus-field bench; wide 1800px+ caps the measure and lets only full-bleed plates span the viewport.
whitespace

Bench margins are wide and uneven: 88-110px between regions, 18-30px inside panels, 4-16px inside instrument clusters. Never a uniform 24px page.

guidance
do
  • Let one grazing angle light the whole interface, and give the reader the control that moves it.
  • Write uncertainty into the type with the apparatus, so a doubtful value never looks like a certain one.
  • Keep lacunae on the grid with their brackets, and count them beside what was read.
  • Spend amber on what was recovered and violet on what is held open; leave everything else bone, ash and bench.
  • Read magnitudes on a vernier scale with a labelled index.
  • Keep body prose at 17px and fine, and let only the display moment be large.
  • Place copy in the black fall-off of a plate and pick the ink for that region.
avoid
  • Do not round anything; a rounded card breaks a square language even though 16 is an allowed value.
  • Do not put a colour rail on a panel edge; state reads through chips and corner brackets.
  • Do not use drop shadows, glow or glass; depth here is the raking light.
  • Do not drop an apparatus mark to make a reading look cleaner than it is.
  • Do not let amber spread into a brand wash — it means recovered, and it detonates once.
  • Do not lay small amber text over a lit parchment plate; use the accent_ink variant there.
imagery
illustration style
Photographic plates in the Rasura technique: the subject printed on a torn, scraped sheet lying on a matte black bench, lit by one low warm amber light raking in from the side, bands of the image abraded away to bare pale fibre, violet fill in the deep shadows, heavy paper grain, generous empty black around the sheet. No line art, no mascots, no glass, no glow.
hero image direction
One full-bleed scraped leaf on a black bench with the lamp entering from the right and the upper third of the frame left in empty black, so the display type composes into the fall-off. A twin plate of the same leaf lit from the left carries the azimuth turn.
icon style

Drawn as thin SVG strokes at 1-1.4px — corner brackets, tick scales, the dial arm, the chevron. No filled glyphs, no emoji, no symbol characters in copy.

pairs with

rasura

image gen prompts
A {subject}, printed onto a torn sheet of aged vellum that has been scraped: the image survives only where the surface survives, and wide vertical bands of it are abraded away to bare pale fibre. The torn sheet lies on a matte black table and is lit by one low warm amber light raking in from the side, so the paper's ridges, tears and scrape marks throw long shadows across it. Deep violet-grey fill in the shadows, heavy paper grain, empty black ground around the sheet, {palette}, macro photograph. NO text, NO letters, NO logos
katagami spec
# Palimpsest

## Philosophy

Palimpsest keeps the soul of an archive recovery console — damaged memory treated as evidence, uncertainty preserved rather than smoothed, restraint as care — and reconceives the expression from a paper-white scan bed with blue acetate into a near-black conservation bench where one grazing light brings an erased hand back out of the furrow and every reading declares its own doubt in type.

### Values

- Uncertainty is written into the type, not hidden behind a colour
- A gap keeps its place on the grid and is counted
- One lamp, one angle: the whole interface is lit by a single value the reader can move
- Restraint as care — two accents, bone type, and a bench that stays dark
- Concrete conservation language: accessions, angles, passes, custodians, dates

### Anti-Values

- Rounded surfaces in a square language
- Coloured accent rails on panel edges
- Filled progress bars and glowing meters
- Drop shadows, glassmorphism, glow
- Promoting a doubtful reading to a clean one by dropping its marks
- Amber used as a general brand wash

### Visual Character

- A warm near-black bench (#0B0A09) with bone type; the page reads as a dark imaging room with one lamp in it.
- Every panel carries a raking sheen — linear-gradient(var(--rake), amber, transparent 42%, violet) — so one custom property re-lights the entire interface at once.
- Sub-baseline point rails (radial-gradient repeat at .22em/.32em/.46em) run under recovered values; a solid .045em rule replaces them when the reading is certain.
- Half brackets built from two 1px borders wrap text a hand supplied, in running prose and in table cells alike.
- Panels are registered by two 14-15px corner brackets at the top-left and bottom-right, which ink amber when the panel is active — never a filled or coloured border.

### Lineage

> Descends from Quiet Optical Accession: the same ethic of non-invasive recovery, moved from the manga-panel scan bed to the manuscript conservation bench.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0B0A09` |
| surface | `#141210` |
| surface_solid | `#1C1815` |
| text | `#EDE5D5` |
| muted | `#A79C88` |
| border | `#2C2721` |
| accent | `#E3A057` |
| accent_ink | `#7C4310` |
| accent_2 | `#A292D8` |
| accent_soft | `#241B10` |
| on_accent | `#0B0A09` |
| success | `#8FAE72` |
| warning | `#D3A24A` |
| error | `#C87258` |
| info | `#A292D8` |

### Typography

- **Base Size**: 17px
- **Body Font**: Newsreader
- **Heading Font**: Instrument Serif
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 400
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.62
- **Scale Ratio**: 1.28
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&display=swap

### Radii

- **None**: 0px
- **Md**: 0px
- **Lg**: 0px
- **Full**: 9999px

### Shadows

- **Sm**: inset 0 0 0 1px rgba(44,39,33,1)
- **Md**: inset 0 0 0 1px rgba(227,160,87,0.5)
- **Lg**: inset 0 0 0 1px rgba(162,146,216,0.45)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Treatment**: A warm near-black bench. Every panel carries a raking sheen — linear-gradient(var(--rake,104deg), rgba(227,160,87,.055), transparent 42%, rgba(162,146,216,.045)) — so one angle re-lights the whole interface. No blur, no drop shadow, no glass.
- **Card Style**: Square leaves on the bench: bg #141210, radius 0, two 14-15px corner brackets at the top-left and bottom-right in the hairline rule, inked amber when active. Never nested, never edge-railed.
- **Bg Pattern**: The bench is plain. Texture arrives only through Rasura plates and, on the landing, a WebGL procedural relief lit at the current azimuth that drops to near-zero between beats.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline rules divide regions on all sides equally. Panels are not bordered at all — they are registered by two diagonal corner brackets that ink amber when active. A coloured strip on one edge of a card is banned in every artifact.

### Motion

- **Duration**: 220ms
- **Easing**: cubic-bezier(0.22,0.61,0.36,1)
- **Philosophy**: Light moves; things do not bounce. Marks draw themselves along their own path by stroke-dashoffset, rules sweep out by scaleX from the left, plates arrive by clip inset, and the raking angle turns. Every scroll effect is given 80-120vh of travel so it can be watched, and effects fire at purposeful beats rather than running as ambient weather.

## Rules

### Composition

Compose screens as a bench in a dark room: one dominant lit plate, a narrow instrument rail, and a register that carries its own doubt. Panels are square leaves laid on the bench, registered at two diagonal corners, lit at the current rake angle. Let one plate dominate and keep copy in the black fall-off of that plate rather than on its busy region.

### Hierarchy

Hierarchy comes from light, scale and the apparatus — never from colour variety. Instrument Serif carries the display moment; Newsreader at 17px carries every reading; IBM Plex Mono at 10.5-13px carries angles, confidences and control labels. Amber marks what was recovered; violet marks what is held open; everything else is bone, ash and bench.

### Density

Alternate tight instrument clusters at 4-16px with wide bench margins of 88-110px between regions. Registers may be dense when every row states its certainty; running prose never exceeds 56ch.

### Signature Patterns

- The apparatus of doubt: a run of points under a word at three densities (probable / doubtful / very doubtful), resolving to a solid rule when certain, with half brackets around text a hand supplied.
- The rake: a single --rake angle lights every panel, plate and frame; moving it re-lights the whole interface, and on the landing it rotates with scroll and follows the pointer.
- The held lacuna: a missing position keeps its cell on the collation grid, stays empty, carries violet corner brackets, and is counted in the tallies.
- The vernier read: magnitudes are read against a ruled tick scale with a labelled index; filled progress bars do not exist in this language.
- Registered corners: two 14-15px corner brackets, top-left and bottom-right, mark a panel and ink amber when it is active.

## Layout

### Grid

8px base on a 12-column field capped at 1180px, widening to 1440px above 1800px viewports; the console runs a 224px instrument rail beside a fluid work field.

### Breakpoints

Mobile 390px is a single column with the register scrolling in its own container and the rake dial moved into the top band; tablet 768-1024px is a two-up field with the instrument rail as a top strip; desktop 1280px+ is the full rail-plus-field bench; wide 1800px+ caps the measure and lets only full-bleed plates span the viewport.

### Whitespace

Bench margins are wide and uneven: 88-110px between regions, 18-30px inside panels, 4-16px inside instrument clusters. Never a uniform 24px page.

## Guidance

### Do

- Let one grazing angle light the whole interface, and give the reader the control that moves it.
- Write uncertainty into the type with the apparatus, so a doubtful value never looks like a certain one.
- Keep lacunae on the grid with their brackets, and count them beside what was read.
- Spend amber on what was recovered and violet on what is held open; leave everything else bone, ash and bench.
- Read magnitudes on a vernier scale with a labelled index.
- Keep body prose at 17px and fine, and let only the display moment be large.
- Place copy in the black fall-off of a plate and pick the ink for that region.

### Don't

- Do not round anything; a rounded card breaks a square language even though 16 is an allowed value.
- Do not put a colour rail on a panel edge; state reads through chips and corner brackets.
- Do not use drop shadows, glow or glass; depth here is the raking light.
- Do not drop an apparatus mark to make a reading look cleaner than it is.
- Do not let amber spread into a brand wash — it means recovered, and it detonates once.
- Do not lay small amber text over a lit parchment plate; use the accent_ink variant there.

### Usage Context

Conservation and recovery benches, archival and forensic readers, provenance and custody tools, evidence review, transcription and collation interfaces, and any console where a value's certainty matters as much as its content.

## Imagery Direction

### Illustration Style

Photographic plates in the Rasura technique: the subject printed on a torn, scraped sheet lying on a matte black bench, lit by one low warm amber light raking in from the side, bands of the image abraded away to bare pale fibre, violet fill in the deep shadows, heavy paper grain, generous empty black around the sheet. No line art, no mascots, no glass, no glow.

### Hero Image Direction

One full-bleed scraped leaf on a black bench with the lamp entering from the right and the upper third of the frame left in empty black, so the display type composes into the fall-off. A twin plate of the same leaf lit from the left carries the azimuth turn.

### Icon Style

Drawn as thin SVG strokes at 1-1.4px — corner brackets, tick scales, the dial arm, the chevron. No filled glyphs, no emoji, no symbol characters in copy.

### Pairs With

rasura

### Image Gen Prompts

- A {subject}, printed onto a torn sheet of aged vellum that has been scraped: the image survives only where the surface survives, and wide vertical bands of it are abraded away to bare pale fibre. The torn sheet lies on a matte black table and is lit by one low warm amber light raking in from the side, so the paper's ridges, tears and scrape marks throw long shadows across it. Deep violet-grey fill in the shadows, heavy paper grain, empty black ground around the sheet, {palette}, macro photograph. NO text, NO letters, NO logos
DESIGN.md
---
version: "alpha"
name: "Palimpsest"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0B0A09"
  surface: "#141210"
  surface_solid: "#1C1815"
  text: "#EDE5D5"
  muted: "#A79C88"
  border: "#2C2721"
  accent: "#E3A057"
  accent_ink: "#7C4310"
  accent_2: "#A292D8"
  accent_soft: "#241B10"
  on_accent: "#0B0A09"
  success: "#8FAE72"
  warning: "#D3A24A"
  error: "#C87258"
  info: "#A292D8"
typography:
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: "2.228rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: "1.741rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Newsreader"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "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-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_solid:
    backgroundColor: "{colors.surface_solid}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_ink:
    backgroundColor: "{colors.accent_ink}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_soft:
    backgroundColor: "{colors.accent_soft}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#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"
---

# Palimpsest

## Overview

Palimpsest keeps the soul of an archive recovery console — damaged memory treated as evidence, uncertainty preserved rather than smoothed, restraint as care — and reconceives the expression from a paper-white scan bed with blue acetate into a near-black conservation bench where one grazing light brings an erased hand back out of the furrow and every reading declares its own doubt in type.

### Values

- Uncertainty is written into the type, not hidden behind a colour
- A gap keeps its place on the grid and is counted
- One lamp, one angle: the whole interface is lit by a single value the reader can move
- Restraint as care — two accents, bone type, and a bench that stays dark
- Concrete conservation language: accessions, angles, passes, custodians, dates

### Anti-Values

- Rounded surfaces in a square language
- Coloured accent rails on panel edges
- Filled progress bars and glowing meters
- Drop shadows, glassmorphism, glow
- Promoting a doubtful reading to a clean one by dropping its marks
- Amber used as a general brand wash

### Visual Character

- A warm near-black bench (#0B0A09) with bone type; the page reads as a dark imaging room with one lamp in it.
- Every panel carries a raking sheen — linear-gradient(var(--rake), amber, transparent 42%, violet) — so one custom property re-lights the entire interface at once.
- Sub-baseline point rails (radial-gradient repeat at .22em/.32em/.46em) run under recovered values; a solid .045em rule replaces them when the reading is certain.
- Half brackets built from two 1px borders wrap text a hand supplied, in running prose and in table cells alike.
- Panels are registered by two 14-15px corner brackets at the top-left and bottom-right, which ink amber when the panel is active — never a filled or coloured border.

### Lineage

> Descends from Quiet Optical Accession: the same ethic of non-invasive recovery, moved from the manga-panel scan bed to the manuscript conservation bench.

## 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 | `#0B0A09` |
| surface | `#141210` |
| surface_solid | `#1C1815` |
| text | `#EDE5D5` |
| muted | `#A79C88` |
| border | `#2C2721` |
| accent | `#E3A057` |
| accent_ink | `#7C4310` |
| accent_2 | `#A292D8` |
| accent_soft | `#241B10` |
| on_accent | `#0B0A09` |
| success | `#8FAE72` |
| warning | `#D3A24A` |
| error | `#C87258` |
| info | `#A292D8` |

## Typography

- **Headline-Lg**: Instrument Serif, 2.228rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Serif, 1.741rem, weight 600, line-height 1.15.
- **Body-Md**: Newsreader, 17px, weight 400, line-height 1.62.
- **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

8px base on a 12-column field capped at 1180px, widening to 1440px above 1800px viewports; the console runs a 224px instrument rail beside a fluid work field.

### Breakpoints

Mobile 390px is a single column with the register scrolling in its own container and the rake dial moved into the top band; tablet 768-1024px is a two-up field with the instrument rail as a top strip; desktop 1280px+ is the full rail-plus-field bench; wide 1800px+ caps the measure and lets only full-bleed plates span the viewport.

### Whitespace

Bench margins are wide and uneven: 88-110px between regions, 18-30px inside panels, 4-16px inside instrument clusters. Never a uniform 24px page.

## Elevation & Depth

### Shadows

- **Sm**: inset 0 0 0 1px rgba(44,39,33,1)
- **Md**: inset 0 0 0 1px rgba(227,160,87,0.5)
- **Lg**: inset 0 0 0 1px rgba(162,146,216,0.45)

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: A warm near-black bench. Every panel carries a raking sheen — linear-gradient(var(--rake,104deg), rgba(227,160,87,.055), transparent 42%, rgba(162,146,216,.045)) — so one angle re-lights the whole interface. No blur, no drop shadow, no glass.
- **Card Style**: Square leaves on the bench: bg #141210, radius 0, two 14-15px corner brackets at the top-left and bottom-right in the hairline rule, inked amber when active. Never nested, never edge-railed.
- **Bg Pattern**: The bench is plain. Texture arrives only through Rasura plates and, on the landing, a WebGL procedural relief lit at the current azimuth that drops to near-zero between beats.

### Borders

- **Default Width**: 1px
- **Accent Width**: 1px
- **Style**: solid
- **Character**: Hairline rules divide regions on all sides equally. Panels are not bordered at all — they are registered by two diagonal corner brackets that ink amber when active. A coloured strip on one edge of a card is banned in every artifact.

## Components

### Composition

Compose screens as a bench in a dark room: one dominant lit plate, a narrow instrument rail, and a register that carries its own doubt. Panels are square leaves laid on the bench, registered at two diagonal corners, lit at the current rake angle. Let one plate dominate and keep copy in the black fall-off of that plate rather than on its busy region.

### Hierarchy

Hierarchy comes from light, scale and the apparatus — never from colour variety. Instrument Serif carries the display moment; Newsreader at 17px carries every reading; IBM Plex Mono at 10.5-13px carries angles, confidences and control labels. Amber marks what was recovered; violet marks what is held open; everything else is bone, ash and bench.

### Density

Alternate tight instrument clusters at 4-16px with wide bench margins of 88-110px between regions. Registers may be dense when every row states its certainty; running prose never exceeds 56ch.

### Signature Patterns

- The apparatus of doubt: a run of points under a word at three densities (probable / doubtful / very doubtful), resolving to a solid rule when certain, with half brackets around text a hand supplied.
- The rake: a single --rake angle lights every panel, plate and frame; moving it re-lights the whole interface, and on the landing it rotates with scroll and follows the pointer.
- The held lacuna: a missing position keeps its cell on the collation grid, stays empty, carries violet corner brackets, and is counted in the tallies.
- The vernier read: magnitudes are read against a ruled tick scale with a labelled index; filled progress bars do not exist in this language.
- Registered corners: two 14-15px corner brackets, top-left and bottom-right, mark a panel and ink amber when it is active.

## 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-019ffc43-9d18-7c73-bf2d-dc0bd62f9bae/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 Let one grazing angle light the whole interface, and give the reader the control that moves it.
- Do Write uncertainty into the type with the apparatus, so a doubtful value never looks like a certain one.
- Do Keep lacunae on the grid with their brackets, and count them beside what was read.
- Do Spend amber on what was recovered and violet on what is held open; leave everything else bone, ash and bench.
- Do Read magnitudes on a vernier scale with a labelled index.
- Do Keep body prose at 17px and fine, and let only the display moment be large.
- Do Place copy in the black fall-off of a plate and pick the ink for that region.
- Don't Do not round anything; a rounded card breaks a square language even though 16 is an allowed value.
- Don't Do not put a colour rail on a panel edge; state reads through chips and corner brackets.
- Don't Do not use drop shadows, glow or glass; depth here is the raking light.
- Don't Do not drop an apparatus mark to make a reading look cleaner than it is.
- Don't Do not let amber spread into a brand wash — it means recovered, and it detonates once.
- Don't Do not lay small amber text over a lit parchment plate; use the accent_ink variant there.

### Usage Context

Conservation and recovery benches, archival and forensic readers, provenance and custody tools, evidence review, transcription and collation interfaces, and any console where a value's certainty matters as much as its content.

## Imagery Direction

### Illustration Style

Photographic plates in the Rasura technique: the subject printed on a torn, scraped sheet lying on a matte black bench, lit by one low warm amber light raking in from the side, bands of the image abraded away to bare pale fibre, violet fill in the deep shadows, heavy paper grain, generous empty black around the sheet. No line art, no mascots, no glass, no glow.

### Hero Image Direction

One full-bleed scraped leaf on a black bench with the lamp entering from the right and the upper third of the frame left in empty black, so the display type composes into the fall-off. A twin plate of the same leaf lit from the left carries the azimuth turn.

### Icon Style

Drawn as thin SVG strokes at 1-1.4px — corner brackets, tick scales, the dial arm, the chevron. No filled glyphs, no emoji, no symbol characters in copy.

### Pairs With

rasura

### Image Gen Prompts

- A {subject}, printed onto a torn sheet of aged vellum that has been scraped: the image survives only where the surface survives, and wide vertical bands of it are abraded away to bare pale fibre. The torn sheet lies on a matte black table and is lit by one low warm amber light raking in from the side, so the paper's ridges, tears and scrape marks throw long shadows across it. Deep violet-grey fill in the shadows, heavy paper grain, empty black ground around the sheet, {palette}, macro photograph. NO text, NO letters, NO logos
shadcn/ui theme
```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "palimpsest",
  "type": "registry:theme",
  "title": "Palimpsest shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0B0A09",
      "foreground": "#EDE5D5",
      "card": "#141210",
      "card-foreground": "#EDE5D5",
      "popover": "#141210",
      "popover-foreground": "#EDE5D5",
      "primary": "#EDE5D5",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#A79C88",
      "muted-foreground": "#EDE5D5",
      "accent": "#E3A057",
      "accent-foreground": "#ffffff",
      "destructive": "#C87258",
      "border": "#2C2721",
      "input": "#2C2721",
      "ring": "#E3A057",
      "chart-1": "#EDE5D5",
      "chart-2": "#f4f4f5",
      "chart-3": "#E3A057",
      "chart-4": "#8FAE72",
      "chart-5": "#D3A24A",
      "sidebar": "#141210",
      "sidebar-foreground": "#EDE5D5",
      "sidebar-primary": "#EDE5D5",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#A292D8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#2C2721",
      "sidebar-ring": "#E3A057",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#EDE5D5",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#E3A057",
      "accent-foreground": "#ffffff",
      "destructive": "#C87258",
      "border": "#303642",
      "input": "#303642",
      "ring": "#E3A057",
      "chart-1": "#EDE5D5",
      "chart-2": "#f4f4f5",
      "chart-3": "#E3A057",
      "chart-4": "#8FAE72",
      "chart-5": "#D3A24A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#EDE5D5",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#E3A057",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#E3A057",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ffc43-9d18-7c73-bf2d-dc0bd62f9bae",
    "slug": "palimpsest",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_ink",
        "accent_soft",
        "bg",
        "border",
        "error",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_solid",
        "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"
      ],
      "shadows": [
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```
in the wild

embodiments

DESIGN.md

at a glance

Typography

headline-lgInstrument Serif · 36px · 700

The quick brown fox jumps

headline-mdInstrument Serif · 28px · 600

The quick brown fox jumps

body-mdNewsreader · 17px · 400

The quick brown fox jumps

label-mdIBM Plex Mono · 12px · 600

The quick brown fox jumps

shadcn/ui

implementation kit

built with
Palette
Credits · in the lineage of
  • Archive recovery / digital forensics console traditionTraditionThe parent soul kept — damaged memory as evidence, uncertainty preserved, restraint as care.
  • Leiden Conventions of textual editingTraditionThe apparatus of doubt: sublinear points for uncertain letters and half brackets for supplied text, in use in papyrology and epigraphy since 1931.
  • Manuscript conservation and raking-light imagingTraditionThe grazing-angle lamp, the sweep in degrees, transmitted-light passes, and the practice of recording what remains unread.
  • Palimpsest scholarship and multispectral recovery of undertextsTraditionThe central idea: a leaf scraped and rewritten still holds the first hand in its surface.
  • Chiaroscuro photographyTraditionA single low-angle source against a dark ground, describing form entirely by relief and fall-off.

A generated style is an aggregate of many influences — credit is given to the artists and traditions it draws on, not a claim of authorship.

produced by claude-opus-5 · sourced by claude-opus-5 · images by FLUX.1 [dev]

remix lane

try a remix

Keep Palimpsest and swap a palette and an art style onto it. The landing & dashboard recolor live.

UI language · fixed
Palimpsest
Palette
Art style
Landing Page
live preview · recolored + filled
related

More like this

Acetateshares square-geometryAfficheshares square-geometryAmayadorishares dark-groundBroadsideshares dark-groundCalipershares dark-groundDeckleshares raking-light