Cicero

# Cicero

## Philosophy

Cicero is a quarterly field journal of applied silicon, and its interface is the issue itself. Vol. 14, No. 3 lies square on a white presentation table, a perfect-bound journal with a laid-paper cover, and Fig. 1, a silver print of the Plant 4 test wafer, is paperclipped to its cover with one saw street marked in red grease pencil. Lift the clip and the print peels up toward you. Around the object everything is small, flat and precise: Manrope for reading and controls, Instrument Serif for the nameplate and headlines, Fragment Mono only on data labels, one big light number, and one oxblood for the answer and the action.

### Values

- One object is the interface: the issue with Fig. 1 clipped to its cover, rendered as a real thing and the only raised or lit element in a view.
- Every claim arrives with its figure. Prints, plots and tables are numbered and captioned where they sit.
- Depth is a verb. The print peels only while you lift the clip; a loose print lifts only while you pick it up.
- One oxblood that means something: the nameplate e, the current tab, the grease-pencil street and the one action.
- Small quiet type around one big light element: a 104px Manrope Light figure or a serif headline, never both loud.
- The journal's own words are the content: Vol. 14, No. 3, Fig. 1, R9, the close-line, a note to the desk.

### Anti-Values

- Rounded paper sheets, hairline rules and a masthead rule in place of space and value.
- Fake halftone, crop ticks, leader lines and red dots as ornament.
- Uppercase mono microtype on everything; mono is for data.
- Warm cream or beige page washes and radial gradients on the ground.
- A second accent, glow, glass, or a filled red block for a risky action.
- Cards, stat bands of big numbers, and a primary plus secondary button pair.

### Visual Character

- The issue lies whole on the white table, once per page, at about 400 to 620px wide beside the headline on the landing and centred with small UI in the corners on the embodiment: laid-paper cover #FBF8F1, a hinge score by the spine, four page-edge tones and a three-layer warm shadow.
- Fig. 1 is a glossy fibre-paper print (#FCFBF7) turned 2.4 degrees under a steel Gem clip, with a window-light band across the photograph, a typed Fragment Mono caption on its bottom margin and one waxy oxblood stroke on a saw street.
- Oxblood #B13A2E is spent only on the nameplate e, the current nav item, the grease-pencil marks, the action pill and the latest run.
- Nothing is boxed: lists, tables, forms and the contents sit straight on #FFFFFF, parted by space; wells are square #F4F1EB and pills are round.
- Type is small and quiet around one big element: 17px Manrope, 14.5px captions, Instrument Serif at 28 to 64px, and one 104px Manrope Light number with its % dimmed.

### Lineage

> A revision of Cicero (generation 2), rebuilt the Inspora way from the approved elevated specimen. It keeps the field journal of applied silicon, the Instrument Serif nameplate with its oxblood e, Manrope, one oxblood accent, the figure plate and the Plant 4 wafer, and drops IBM Plex Mono, uppercase microtype everywhere, the rounded sheet and hairline rules, the fake halftone with crop ticks and leader line, and the cream ground.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FFFFFF` |
| surface | `#F4F1EB` |
| text | `#000000` |
| muted | `#655B52` |
| border | `#E4DED4` |
| accent | `#B13A2E` |
| on_accent | `#FFFFFF` |
| success | `#2F6A53` |
| warning | `#9A6A2C` |
| error | `#A8392F` |
| info | `#3F6178` |
| cover | `#FBF8F1` |
| fibre | `#FCFBF7` |
| silver | `#12100F` |
| shade | `#46301C` |
| light | `#FFFFFF` |
| steel_hi | `#F4F5F6` |
| steel | `#A3A6AC` |
| steel_lo | `#4B4E54` |
| dim | `#908982` |
| ink_soft | `#1C1917` |

### Derived

- **Dim**: color-mix(in srgb, var(--muted) 72%, var(--bg))
- **Ink Soft**: color-mix(in srgb, var(--text) 72%, var(--muted))
- **Page Block**: four page-edge tones mixed from cover and shade at 4, 6, 7, 12 and 17%
- **Note**: The eleven role colours are what a palette swap changes. cover, fibre, silver, shade, light and steel are the object's own materials and stay put; the grease-pencil street, the nameplate e and the current tab take var(--accent), so they recolour with the palette.

### Typography

- **Heading Font**: Instrument Serif
- **Body Font**: Manrope
- **Mono Font**: Fragment Mono
- **Heading Weight**: 400
- **Body Weight**: 400
- **Body Light Weight**: 300
- **Button Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.02em on Instrument Serif display, -0.035em on the nameplate; -0.005em on body
- **Line Height**: 1.6
- **Base Size**: 17px
- **Scale**: ["14.5px","17px","21px","28px","40px","64px","104px"]
- **Roles**: {"display":"Instrument Serif 400: the nameplate with its oxblood italic e, headlines, the cover lines, table-of-contents titles and pull quotes","body":"Manrope 400 at 17px for reading, nav and every control; 300 for the one big light number; 500 for emphasis; 600 only on button labels","mono":"Fragment Mono 400 at 14.5px, only where a label names data: Fig. numbers, run ids, page folios and table heads"}
- **Object Type**: Type printed on the issue (nameplate, cover lines, the typed caption on the print) is sized in container units of the object, so it scales with the journal like real print.
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&family=Fragment+Mono&display=swap

### Radii

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

### Shadows

- **Print**: 0 .21cqi .38cqi shade 30% (contact) plus .86cqi 1.9cqi 2.59cqi -.86cqi shade 28% (ambient), both falling down and right
- **Issue**: four stacked page-edge tones, then 1.38cqi 2.14cqi .52cqi shade 34%, 2.41cqi 5.17cqi 7.93cqi -1.38cqi shade 30% and 5.17cqi 12.07cqi 17.24cqi -5.17cqi shade 16%
- **Overlay**: 0 2px 4px shade 12% plus 10px 26px 60px -16px shade 30%
- **Note**: One light from the top left. Every shadow is two or three layers tinted warm brown from the paper, never grey, and only real paper on the table casts one.

### Spacing

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

### Surfaces

- **Treatment**: one-object-on-a-white-presentation-table
- **Material**: The issue is the only material object: Cicero Vol. 14 No. 3, a perfect-bound journal with a laid-paper cover (tooth from SVG noise, laid and chain lines at 2%, a hinge score by the spine, a page block of four paper tones), and Fig. 1, a glossy fibre-paper silver print held to the cover by a steel Gem clip, with one saw street marked in red grease pencil. Everything else is flat.
- **Card Style**: No cards or panels. Content sits straight on the white table, grouped by space and an Instrument Serif title. A --surface tint appears only as an input well, a selected tab, a row hover or an open menu; an overlay is white on its two-layer shadow. At most one filled surface per view.
- **Table**: The page ground --bg is the presentation table. On the landing the hero image is the same table photographed empty in soft window light, with the live issue lying on it.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules or outlines. Rows separate by space and by the value of their type; wells are the one tinted surface. The only lines are data (the close-line on a chart) and the oxblood underline under the current nav item and quiet links. Focus is a 2px oxblood outline at 2 to 3px offset.

### Motion

- **Duration**: 460ms
- **Easing**: cubic-bezier(.2,.9,.25,1.2)
- **Clip**: the clip rocks up on cubic-bezier(.3,1.4,.4,1) over 420ms while the print peels to rotateX(24deg) about its top edge over 500ms
- **Reveal**: 900ms cubic-bezier(.2,.7,.2,1), rising 24px, staggered 110ms
- **Philosophy**: Motion is a physical verb: lift the clip, pick up the print, count up from the close-line. The settled state is the default and renders with no JavaScript; an inline script adds .anim to <html> to gate start states, and prefers-reduced-motion skips all of it.

### Controls

- **Height**: 52px
- **Radius**: 0 for wells, 9999px for the action pill, tabs and switches
- **Wells**: --surface on the white table, no border

## Rules

### Composition

- Give a view at most one object moment: the issue with Fig. 1 clipped on, a loose print lying on the table, or a line drawing of the issue taken apart. Everything else in the view stays flat.
- Lay the issue square on the table with air on every side; only the print is turned. Never frame it in a card or put a panel or scrim over it.
- Order a page like a product page: the object and its headline, copy and one action beside it on the ground, then the reading, the ledger and the desk.
- Separate by space and value, never by boxes: lists, tables and forms sit straight on the table; a filled --surface appears only as a well, a selected tab, a hover or an open menu.
- Show the whole issue once per page; later views take another moment (a loose print, the anatomy drawing).
- One oxblood action per view; a second action is a quiet link with a grease-pencil underline.

### Hierarchy

- The object, one serif headline and one big light number are the only large things; ledes, labels and card copy stay at 14.5 to 21px.
- Instrument Serif 400 at -0.02em for headlines (40px, 64px on the landing hero), contents titles (28px) and pull quotes (28 to 40px).
- Manrope 400 at 17px for reading and controls, muted #655B52 for secondary words and ink for the lead phrase; 300 for the one 104px figure.
- Fragment Mono 400 at 14.5px only for data labels: Fig. numbers, run ids, folios, table heads.
- Status is a small round dot and a word, never a coloured field.

### Density

Calm product-page density: one object and a short headline per view, 160 to 168px between sections on desktop and 112 to 120px on phones, 52px controls, table rows parted by 15 to 16px padding, and prose held under about 60 characters.

### Signature Patterns

- The issue: Cicero Vol. 14 No. 3 as a CSS object (container units), laid-paper cover with tooth, hinge score and page block, three-layer warm shadow, lying square on the white table.
- Fig. 1 clipped on: a fibre-paper silver print turned 2.4 degrees, held by a two-layer SVG Gem clip (back loop under the cover, front loop over the print), with a typed caption on its bottom margin.
- Lift the clip: hovering or focusing the print (or tapping it) rocks the clip up with rotateX(48deg) and peels the print to rotateX(24deg) about its top edge, while its shadow slides down and right and softens.
- The grease-pencil mark: one waxy oxblood stroke drawn with an SVG displacement filter over a real feature of the photograph (a saw street, one ringed die).
- Pick up the print: a loose print at -1.8 degrees straightens, lifts and grows its shadow on a spring when pointed at.
- The one big light number: Manrope Light at 104px with the % dimmed, counting up from the close-line (88.0) to the run it reports.

## Layout

### Grid

- **Type**: object-first product page
- **Max Width**: 1240px content (1360px from 1800px wide); the landing hero content runs to 1400px, 1560px on ultra-wide
- **Gutter**: 40px desktop, 28px tablet, 16px phone
- **Column Behavior**: Two-column rows on minmax(0,5fr) minmax(0,6fr) or minmax(0,4fr) minmax(0,8fr); the reading view adds a minmax(0,3fr) margin rail; three-column method rows. Every track is minmax(0,1fr)-style and every grid child min-width:0.

### Whitespace

- **Section Gap**: 160 to 168px desktop, 112 to 120px phone
- **Card Gap**: no cards; 16 to 22px row padding, 48 to 96px between groups
- **Content Padding**: content sits on the table, aligned to the grid edge; overlays pad 36px
- **Approach**: The table is empty space by design: the issue needs air on every side, and each view carries one focal point.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"about 54px table rows, 22px contents padding"}

### Responsive

Phones (390px) stack to one column, put the issue above the headline at about 70% of the width, hide non-essential nav links and table columns, and keep one action. Tablets (768 to 1100px) stack the ledger and move the margin rail under the reading column. Ultra-wide caps and centres the content; only the landing hero image spans the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 900 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Guidance

### Do

- Put the issue, with Fig. 1 clipped to its cover, at the centre of the first view on the white table with air all round.
- Cite by figure: every claim points to a numbered print, plot or table captioned where it sits.
- Spend oxblood on the nameplate e, the current tab, grease-pencil marks and one action per view.
- Separate rows by space and value, and keep at most one filled surface in a view.
- Keep mono for data labels only, and set everything else in small Manrope in sentence case.
- Style every control explicitly: square 52px wells, a round oxblood pill, round switches, drawn chevrons and ticks, an oxblood focus ring.

### Don't

- Don't draw rules, hairlines, borders or a rounded sheet around content.
- Don't use fake halftone, crop ticks, leader lines or red dots as ornament.
- Don't set labels in uppercase mono unless they name data.
- Don't put a cream wash, gradient or grain on the page ground.
- Don't lift more than one thing at a time or show the whole issue twice on a page.
- Don't pair a secondary button with the oxblood one; use a quiet link.
- Don't put emoji or symbol glyphs on buttons.

### Accessibility

WCAG AA on the white table: ink #000000 is 21:1, muted #655B52 is 6.6:1 (5.9:1 on the #F4F1EB well, 6.2:1 on the cover), oxblood #B13A2E is 6.0:1 and white on oxblood is 6.0:1; the dimmed % (#908982) is 3.5:1 and only used on the 104px figure. Semantic colours clear 4.7:1 on white. Focus is a visible 2px oxblood outline on every control; the print and loose prints are focusable and lift on focus, and tap toggles them. prefers-reduced-motion skips the reveals, the count-up and the clip-on entrance; the verbs still change state.

## Imagery Direction

### Pairs With

gravure

### Summary

Two kinds of image. The prints inside the journal (Fig. 1, Fig. 2) follow Gravure's documentary technology photography: strong directional light, deep shadow, warm-black tonality, printed here as fibre-paper silver prints rather than halftone, with the red limited to one grease-pencil mark drawn in the page. The table is a plain high-key studio photograph: an empty pale paper surface in soft window light from the top left, used as the landing hero with the live issue lying on it.

### Subjects

- silicon wafers on inspection stages
- inspection sheets, tweezers and raking light
- saw streets and dies in close-up
- the empty presentation table in window light

### Usage

One full-bleed hero per landing: the empty table photograph, with the live CSS issue lying on it beside the headline. Figures inside pages are silver prints with a typed caption on their own bottom margin, never a separate caption rule. From Gravure keep the subject matter, the directional light and the warm ink-black tonality; leave out its halftone rosette, crop-mark brackets, hairline rules and leader lines, and move its oxblood from the rule to one grease-pencil mark on the print. No text or numbers inside the photographs.

---
version: "alpha"
name: "Cicero"
description: "Cicero is a quarterly field journal of applied silicon, and its interface is the issue itself. Vol. 14, No. 3 lies square on a white presentation table, a perfect-bound journal with a laid-paper cover, and Fig. 1, a silver print of the P..."
colors:
  bg: "#FFFFFF"
  surface: "#F4F1EB"
  text: "#000000"
  muted: "#655B52"
  border: "#E4DED4"
  accent: "#B13A2E"
  on_accent: "#FFFFFF"
  success: "#2F6A53"
  warning: "#9A6A2C"
  error: "#A8392F"
  info: "#3F6178"
  cover: "#FBF8F1"
  fibre: "#FCFBF7"
  silver: "#12100F"
  shade: "#46301C"
  light: "#FFFFFF"
  steel_hi: "#F4F5F6"
  steel: "#A3A6AC"
  steel_lo: "#4B4E54"
  dim: "#908982"
  ink_soft: "#1C1917"
typography:
  headline-lg:
    fontFamily: "Instrument Serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Instrument Serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Manrope"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Fragment Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "96px"
  step-8: "160px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  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-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-cover:
    backgroundColor: "{colors.cover}"
  color-reference-fibre:
    backgroundColor: "{colors.fibre}"
  color-reference-silver:
    backgroundColor: "{colors.silver}"
  color-reference-shade:
    backgroundColor: "{colors.shade}"
  color-reference-light:
    backgroundColor: "{colors.light}"
  color-reference-steel_hi:
    backgroundColor: "{colors.steel_hi}"
  color-reference-steel:
    backgroundColor: "{colors.steel}"
  color-reference-steel_lo:
    backgroundColor: "{colors.steel_lo}"
  color-reference-dim:
    backgroundColor: "{colors.dim}"
  color-reference-ink_soft:
    backgroundColor: "{colors.ink_soft}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.none}"
    height: "44px"
---

# Cicero

## Overview

Cicero is a quarterly field journal of applied silicon, and its interface is the issue itself. Vol. 14, No. 3 lies square on a white presentation table, a perfect-bound journal with a laid-paper cover, and Fig. 1, a silver print of the Plant 4 test wafer, is paperclipped to its cover with one saw street marked in red grease pencil. Lift the clip and the print peels up toward you. Around the object everything is small, flat and precise: Manrope for reading and controls, Instrument Serif for the nameplate and headlines, Fragment Mono only on data labels, one big light number, and one oxblood for the answer and the action.

### Values

- One object is the interface: the issue with Fig. 1 clipped to its cover, rendered as a real thing and the only raised or lit element in a view.
- Every claim arrives with its figure. Prints, plots and tables are numbered and captioned where they sit.
- Depth is a verb. The print peels only while you lift the clip; a loose print lifts only while you pick it up.
- One oxblood that means something: the nameplate e, the current tab, the grease-pencil street and the one action.
- Small quiet type around one big light element: a 104px Manrope Light figure or a serif headline, never both loud.
- The journal's own words are the content: Vol. 14, No. 3, Fig. 1, R9, the close-line, a note to the desk.

### Anti-Values

- Rounded paper sheets, hairline rules and a masthead rule in place of space and value.
- Fake halftone, crop ticks, leader lines and red dots as ornament.
- Uppercase mono microtype on everything; mono is for data.
- Warm cream or beige page washes and radial gradients on the ground.
- A second accent, glow, glass, or a filled red block for a risky action.
- Cards, stat bands of big numbers, and a primary plus secondary button pair.

### Visual Character

- The issue lies whole on the white table, once per page, at about 400 to 620px wide beside the headline on the landing and centred with small UI in the corners on the embodiment: laid-paper cover #FBF8F1, a hinge score by the spine, four page-edge tones and a three-layer warm shadow.
- Fig. 1 is a glossy fibre-paper print (#FCFBF7) turned 2.4 degrees under a steel Gem clip, with a window-light band across the photograph, a typed Fragment Mono caption on its bottom margin and one waxy oxblood stroke on a saw street.
- Oxblood #B13A2E is spent only on the nameplate e, the current nav item, the grease-pencil marks, the action pill and the latest run.
- Nothing is boxed: lists, tables, forms and the contents sit straight on #FFFFFF, parted by space; wells are square #F4F1EB and pills are round.
- Type is small and quiet around one big element: 17px Manrope, 14.5px captions, Instrument Serif at 28 to 64px, and one 104px Manrope Light number with its % dimmed.

### Lineage

> A revision of Cicero (generation 2), rebuilt the Inspora way from the approved elevated specimen. It keeps the field journal of applied silicon, the Instrument Serif nameplate with its oxblood e, Manrope, one oxblood accent, the figure plate and the Plant 4 wafer, and drops IBM Plex Mono, uppercase microtype everywhere, the rounded sheet and hairline rules, the fake halftone with crop ticks and leader line, and the cream ground.

## 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 | `#FFFFFF` |
| surface | `#F4F1EB` |
| text | `#000000` |
| muted | `#655B52` |
| border | `#E4DED4` |
| accent | `#B13A2E` |
| on_accent | `#FFFFFF` |
| success | `#2F6A53` |
| warning | `#9A6A2C` |
| error | `#A8392F` |
| info | `#3F6178` |
| cover | `#FBF8F1` |
| fibre | `#FCFBF7` |
| silver | `#12100F` |
| shade | `#46301C` |
| light | `#FFFFFF` |
| steel_hi | `#F4F5F6` |
| steel | `#A3A6AC` |
| steel_lo | `#4B4E54` |
| dim | `#908982` |
| ink_soft | `#1C1917` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600&family=Fragment+Mono&display=swap

- **Headline-Lg**: Instrument Serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Instrument Serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Manrope, 17px, weight 400, line-height 1.6.
- **Label-Md**: Fragment Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `16px`
- **Lg**: `24px`
- **Xl**: `32px`
- **2xl**: `48px`
- **3xl**: `64px`
- **4xl**: `96px`
- **Step-8**: `160px`

### Grid

- **Type**: object-first product page
- **Max Width**: 1240px content (1360px from 1800px wide); the landing hero content runs to 1400px, 1560px on ultra-wide
- **Gutter**: 40px desktop, 28px tablet, 16px phone
- **Column Behavior**: Two-column rows on minmax(0,5fr) minmax(0,6fr) or minmax(0,4fr) minmax(0,8fr); the reading view adds a minmax(0,3fr) margin rail; three-column method rows. Every track is minmax(0,1fr)-style and every grid child min-width:0.

### Whitespace

- **Section Gap**: 160 to 168px desktop, 112 to 120px phone
- **Card Gap**: no cards; 16 to 22px row padding, 48 to 96px between groups
- **Content Padding**: content sits on the table, aligned to the grid edge; overlays pad 36px
- **Approach**: The table is empty space by design: the issue needs air on every side, and each view carries one focal point.

### Density

- **Default**: comfortable
- **Comfortable**: {"button_height":"52px","input_height":"52px","row_height":"about 54px table rows, 22px contents padding"}

### Responsive

Phones (390px) stack to one column, put the issue above the headline at about 70% of the width, hide non-essential nav links and table columns, and keep one action. Tablets (768 to 1100px) stack the ledger and move the margin rail under the reading column. Ultra-wide caps and centres the content; only the landing hero image spans the full width.

### Breakpoints

- **Mobile**: 390px
- **Phone Max**: 640px
- **Tablet**: 900 to 1100px
- **Desktop**: 1280px
- **Wide**: 1440px
- **Ultrawide**: 1800px and 2560px

## Elevation & Depth

### Shadows

- **Print**: 0 .21cqi .38cqi shade 30% (contact) plus .86cqi 1.9cqi 2.59cqi -.86cqi shade 28% (ambient), both falling down and right
- **Issue**: four stacked page-edge tones, then 1.38cqi 2.14cqi .52cqi shade 34%, 2.41cqi 5.17cqi 7.93cqi -1.38cqi shade 30% and 5.17cqi 12.07cqi 17.24cqi -5.17cqi shade 16%
- **Overlay**: 0 2px 4px shade 12% plus 10px 26px 60px -16px shade 30%
- **Note**: One light from the top left. Every shadow is two or three layers tinted warm brown from the paper, never grey, and only real paper on the table casts one.

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: one-object-on-a-white-presentation-table
- **Material**: The issue is the only material object: Cicero Vol. 14 No. 3, a perfect-bound journal with a laid-paper cover (tooth from SVG noise, laid and chain lines at 2%, a hinge score by the spine, a page block of four paper tones), and Fig. 1, a glossy fibre-paper silver print held to the cover by a steel Gem clip, with one saw street marked in red grease pencil. Everything else is flat.
- **Card Style**: No cards or panels. Content sits straight on the white table, grouped by space and an Instrument Serif title. A --surface tint appears only as an input well, a selected tab, a row hover or an open menu; an overlay is white on its two-layer shadow. At most one filled surface per view.
- **Table**: The page ground --bg is the presentation table. On the landing the hero image is the same table photographed empty in soft window light, with the live issue lying on it.

### Borders

- **Default Width**: 0
- **Style**: none
- **Character**: No borders, rules or outlines. Rows separate by space and by the value of their type; wells are the one tinted surface. The only lines are data (the close-line on a chart) and the oxblood underline under the current nav item and quiet links. Focus is a 2px oxblood outline at 2 to 3px offset.

## Components

### Composition

- Give a view at most one object moment: the issue with Fig. 1 clipped on, a loose print lying on the table, or a line drawing of the issue taken apart. Everything else in the view stays flat.
- Lay the issue square on the table with air on every side; only the print is turned. Never frame it in a card or put a panel or scrim over it.
- Order a page like a product page: the object and its headline, copy and one action beside it on the ground, then the reading, the ledger and the desk.
- Separate by space and value, never by boxes: lists, tables and forms sit straight on the table; a filled --surface appears only as a well, a selected tab, a hover or an open menu.
- Show the whole issue once per page; later views take another moment (a loose print, the anatomy drawing).
- One oxblood action per view; a second action is a quiet link with a grease-pencil underline.

### Hierarchy

- The object, one serif headline and one big light number are the only large things; ledes, labels and card copy stay at 14.5 to 21px.
- Instrument Serif 400 at -0.02em for headlines (40px, 64px on the landing hero), contents titles (28px) and pull quotes (28 to 40px).
- Manrope 400 at 17px for reading and controls, muted #655B52 for secondary words and ink for the lead phrase; 300 for the one 104px figure.
- Fragment Mono 400 at 14.5px only for data labels: Fig. numbers, run ids, folios, table heads.
- Status is a small round dot and a word, never a coloured field.

### Density

Calm product-page density: one object and a short headline per view, 160 to 168px between sections on desktop and 112 to 120px on phones, 52px controls, table rows parted by 15 to 16px padding, and prose held under about 60 characters.

### Signature Patterns

- The issue: Cicero Vol. 14 No. 3 as a CSS object (container units), laid-paper cover with tooth, hinge score and page block, three-layer warm shadow, lying square on the white table.
- Fig. 1 clipped on: a fibre-paper silver print turned 2.4 degrees, held by a two-layer SVG Gem clip (back loop under the cover, front loop over the print), with a typed caption on its bottom margin.
- Lift the clip: hovering or focusing the print (or tapping it) rocks the clip up with rotateX(48deg) and peels the print to rotateX(24deg) about its top edge, while its shadow slides down and right and softens.
- The grease-pencil mark: one waxy oxblood stroke drawn with an SVG displacement filter over a real feature of the photograph (a saw street, one ringed die).
- Pick up the print: a loose print at -1.8 degrees straightens, lifts and grows its shadow on a spring when pointed at.
- The one big light number: Manrope Light at 104px with the % dimmed, counting up from the close-line (88.0) to the run it reports.

## 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-01a0ecae-9bbe-7db0-b747-e821ef734e1a/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a0ecae-9bbe-7db0-b747-e821ef734e1a/shadcn.json` (registry theme), `/language/en-01a0ecae-9bbe-7db0-b747-e821ef734e1a/shadcn-components.md` (component recipes) and `/language/en-01a0ecae-9bbe-7db0-b747-e821ef734e1a/shadcn-shots.json` (preview shots). The human-facing handoff is still 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 Put the issue, with Fig. 1 clipped to its cover, at the centre of the first view on the white table with air all round.
- Do Cite by figure: every claim points to a numbered print, plot or table captioned where it sits.
- Do Spend oxblood on the nameplate e, the current tab, grease-pencil marks and one action per view.
- Do Separate rows by space and value, and keep at most one filled surface in a view.
- Do Keep mono for data labels only, and set everything else in small Manrope in sentence case.
- Do Style every control explicitly: square 52px wells, a round oxblood pill, round switches, drawn chevrons and ticks, an oxblood focus ring.
- Don't Don't draw rules, hairlines, borders or a rounded sheet around content.
- Don't Don't use fake halftone, crop ticks, leader lines or red dots as ornament.
- Don't Don't set labels in uppercase mono unless they name data.
- Don't Don't put a cream wash, gradient or grain on the page ground.
- Don't Don't lift more than one thing at a time or show the whole issue twice on a page.
- Don't Don't pair a secondary button with the oxblood one; use a quiet link.
- Don't Don't put emoji or symbol glyphs on buttons.

### Accessibility

WCAG AA on the white table: ink #000000 is 21:1, muted #655B52 is 6.6:1 (5.9:1 on the #F4F1EB well, 6.2:1 on the cover), oxblood #B13A2E is 6.0:1 and white on oxblood is 6.0:1; the dimmed % (#908982) is 3.5:1 and only used on the 104px figure. Semantic colours clear 4.7:1 on white. Focus is a visible 2px oxblood outline on every control; the print and loose prints are focusable and lift on focus, and tap toggles them. prefers-reduced-motion skips the reveals, the count-up and the clip-on entrance; the verbs still change state.

## Imagery Direction

### Pairs With

gravure

### Summary

Two kinds of image. The prints inside the journal (Fig. 1, Fig. 2) follow Gravure's documentary technology photography: strong directional light, deep shadow, warm-black tonality, printed here as fibre-paper silver prints rather than halftone, with the red limited to one grease-pencil mark drawn in the page. The table is a plain high-key studio photograph: an empty pale paper surface in soft window light from the top left, used as the landing hero with the live issue lying on it.

### Subjects

- silicon wafers on inspection stages
- inspection sheets, tweezers and raking light
- saw streets and dies in close-up
- the empty presentation table in window light

### Usage

One full-bleed hero per landing: the empty table photograph, with the live CSS issue lying on it beside the headline. Figures inside pages are silver prints with a typed caption on their own bottom margin, never a separate caption rule. From Gravure keep the subject matter, the directional light and the warm ink-black tonality; leave out its halftone rosette, crop-mark brackets, hairline rules and leader lines, and move its oxblood from the rule to one grease-pencil mark on the print. No text or numbers inside the photographs.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cicero",
  "type": "registry:theme",
  "title": "Cicero shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FFFFFF",
      "foreground": "#000000",
      "card": "#F4F1EB",
      "card-foreground": "#000000",
      "popover": "#F4F1EB",
      "popover-foreground": "#000000",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#655B52",
      "muted-foreground": "#000000",
      "accent": "#B13A2E",
      "accent-foreground": "#ffffff",
      "destructive": "#A8392F",
      "border": "#E4DED4",
      "input": "#E4DED4",
      "ring": "#B13A2E",
      "chart-1": "#000000",
      "chart-2": "#f4f4f5",
      "chart-3": "#B13A2E",
      "chart-4": "#2F6A53",
      "chart-5": "#9A6A2C",
      "sidebar": "#F4F1EB",
      "sidebar-foreground": "#000000",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#3F6178",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#E4DED4",
      "sidebar-ring": "#B13A2E",
      "radius": "0.625rem"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#000000",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#B13A2E",
      "accent-foreground": "#ffffff",
      "destructive": "#A8392F",
      "border": "#303642",
      "input": "#303642",
      "ring": "#B13A2E",
      "chart-1": "#000000",
      "chart-2": "#f4f4f5",
      "chart-3": "#B13A2E",
      "chart-4": "#2F6A53",
      "chart-5": "#9A6A2C",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#000000",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#B13A2E",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#B13A2E",
      "radius": "0.625rem"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a0ecae-9bbe-7db0-b747-e821ef734e1a",
    "slug": "cicero",
    "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",
        "cover",
        "dim",
        "error",
        "fibre",
        "info",
        "ink_soft",
        "light",
        "muted",
        "on_accent",
        "shade",
        "silver",
        "steel",
        "steel_hi",
        "steel_lo",
        "success",
        "surface",
        "text",
        "warning"
      ],
      "derived": [
        "dim",
        "ink_soft",
        "note",
        "page_block"
      ],
      "typography": [
        "base_size",
        "body_font",
        "body_light_weight",
        "body_weight",
        "button_weight",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font",
        "object_type",
        "roles",
        "scale"
      ],
      "radii": [
        "full",
        "none"
      ],
      "shadows": [
        "issue",
        "note",
        "overlay",
        "print"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "card_style",
        "material",
        "table",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "clip",
        "duration",
        "easing",
        "philosophy",
        "reveal"
      ],
      "controls": [
        "height",
        "radius",
        "wells"
      ]
    }
  }
}
```