Ardoise

# Ardoise

## Philosophy

One sun, one horizon, and a shadow that does not always agree. Every raised surface throws the same hard 45-degree ink shadow, which forces square geometry everywhere and turns interaction into physics — a control moves into its own shade when you press it.

### Values

- one light source
- hard edges
- measured emptiness
- calm serene type over uncanny scenes
- physics as state
- concrete nouns

### Anti-Values

- soft or glowing shadows
- rounded corners
- edge stripes on cards
- boxed navigation
- decorative gradients
- busy grounds under copy
- inflated mid-scale type

### Visual Character

- box-shadow: 24px 24px 0 #14191E — equal on both axes, zero blur, ink only
- border-radius: 0 on every rectangle; 9999 only on a radio dot
- border-width: 0 everywhere; separation is a step down to #E7E2D6
- hover translate(4px,4px) with the throw halved; active translate(8px,8px) with the throw gone
- body 17px/1.62 Archivo 400 against a single 19.5vw Newsreader 200 display moment

### Lineage

> Belgian veristic surrealism — Magritte's flat immaculate paint, empty plains and impossible light — put to work as an instrument for a trade that reads buildings by their shadows.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#F2EFE8` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#14191E` |
| muted | `#454E56` |
| border | `#14191E` |
| accent | `#6FA8D6` |
| accent_2 | `#8CAE3E` |
| accent_soft | `#DCE7F0` |
| on_accent | `#14191E` |
| success | `#3F6B34` |
| warning | `#8A5B12` |
| error | `#96271D` |
| info | `#1D4E78` |

### Typography

- **Base Size**: 17px
- **Body Font**: Archivo, "Helvetica Neue", Arial, sans-serif
- **Heading Font**: Newsreader, Georgia, "Times New Roman", serif
- **Mono Font**: Archivo, "Helvetica Neue", Arial, sans-serif
- **Heading Weight**: 300
- **Heading Transform**: none
- **Letter Spacing**: -0.022em
- **Line Height**: 1.62
- **Scale Ratio**: 1.18
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400&display=swap

### Radii

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

### Shadows

- **Sm**: 8px 8px 0 #14191E
- **Md**: 16px 16px 0 #14191E
- **Lg**: 24px 24px 0 #14191E

### Spacing

- **Base**: 4px
- **Scale**: 4 · 8 · 12 · 18 · 26 · 34 · 44 · 64 · 96

### Surfaces

- **Treatment**: flat matte paint; no gradients, no glass, no texture overlays
- **Card Style**: white paper on bone ground, one hard ink throw, square corners, no rules, never nested
- **Bg Pattern**: none on ground; the landing's ground is a live sky-over-plain shader whose horizon travels with scroll

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: the language draws no lines that are not shadows; separation is a step down into the recess, space, or a throw

### Motion

- **Duration**: 260ms
- **Easing**: cubic-bezier(.22,.61,.16,1)
- **Philosophy**: things move along the sun vector or they do not move: hover translates +4,+4; press translates +8,+8; a link's rule arrives from up-and-left on the same diagonal. Nothing fades in place.

## Rules

### Composition

Full-bleed plates with reserved quiet zones; asymmetric splits (34/66, never 50/50); horizons that never sit at the middle; one focal point per scene, with the surrounding plain left genuinely empty.

### Hierarchy

Two extremes and a compressed middle: one large display or numeral moment per view, a quiet 17px fine body voice, and 12px micro caps for instruments. Nothing between them is allowed to grow.

### Density

Generous and deliberately uneven, but never a crowded cluster beside a starved void — an empty region is a composed region, sized on purpose and balanced by the weight of its one object.

### Signature Patterns

- The single sun: one hard 45-degree ink throw at 8/16/24, identical on every raised element in every artifact.
- Press into shade: hover translates halfway into the throw and halves it; press translates fully in and removes it.
- The disagreeing shadow: in drawings and specimens only, a solid ink shadow whose shape contradicts the outlined object above it, marking what is not doing what it appears to do.
- The travelling rule: links and nav underlines arrive from up-and-left along the sun vector rather than fading in.
- The step-down ground: table bands, fields at rest, and any unraised surface drop to #E7E2D6 instead of taking a rule.

## Layout

### Grid

12 columns, 1360–1520px max width, 56px gutters at desktop, 40 at 1180, 20 at 820. Asymmetric splits by default (34/66); centred symmetry is avoided.

### Breakpoints

390 / 768–1024 / 1440 / 1920+, each art-directed rather than reflowed. The tablet band keeps specimen rows four-across as its own composition; portrait re-crops every plate so the subject stays in frame.

### Whitespace

Generous, with padding always above a title. Emptiness is a material: the plain around a single object is composed, not left over. Ultra-wide caps and centres the content while plates and scene stages span 100vw.

## Guidance

### Do

- Throw every raised element down and to the right at 45 degrees, hard, ink, unblurred.
- Keep every corner square so the geometry and the light agree.
- Express state with fill and throw — a chip, a wash, a lift — in the language's own vocabulary.
- Place type over imagery by choosing the region and the ink for it, and measure the composited contrast behind the glyphs.
- Keep body at 17px regular and let only the display and the numerals be large.
- Let a step down into the recess do the work a rule would otherwise do.

### Don't

- Don't blur, spread, or tint a shadow, and don't light anything from a second direction.
- Don't round a corner; 16 and 24 are not in this language.
- Don't put a colour stripe on the edge of a card, a block, or a row.
- Don't box navigation in a card or a pill bar, and don't nest plates.
- Don't let a bright accent hue carry small type; use its dark ink variant.
- Don't use the disagreeing shadow in chrome, navigation, or controls.

## Imagery Direction

### Pairs With

midi

### Medium

oil

### Subject Policy

Ordinary isolated subjects — a door, a wall, a block of stone, objects on a shelf, a row of houses — placed in impossible relation to their light or their scale. The technique is subject-agnostic and dresses a face, a city, or a teapot the same way.

### Composition

High clean horizon, vast uninterrupted ground, one light source, hard unblurred cast shadows, frontal and calm. Every plate is generated with a reserved quiet zone for type — an empty half, an open sky, an uncluttered ground band.

### Palette

Bone ground #F2EFE8 to #E8DFCF, cerulean sky #6FA8D6 to #2E7CC0, slate ink #14191E, and at most one apple-green object.

### Treatment

Immaculate matte paint, no visible brush texture, no atmospheric haze, no film grain, no vignette.

### Avoid

- glow
- bloom
- lens flare
- depth-of-field blur
- multiple light sources
- text or lettering in the image

### Swap Contract

Every plate is consumed through a --plate-N variable with the real URL as the inline default at every use site, listed in a <!-- plate-manifest --> comment at the top of each artifact. The hero carries two slots, --hero-image and --hero-image-portrait, because portrait is art-directed rather than cropped.

---
version: "alpha"
name: "Ardoise"
description: "One sun, one horizon, and a shadow that does not always agree. Every raised surface throws the same hard 45-degree ink shadow, which forces square geometry everywhere and turns interaction into physics — a control moves into its own shad..."
colors:
  bg: "#F2EFE8"
  surface: "#FFFFFF"
  surface_solid: "#FFFFFF"
  text: "#14191E"
  muted: "#454E56"
  border: "#14191E"
  accent: "#6FA8D6"
  accent_2: "#8CAE3E"
  accent_soft: "#DCE7F0"
  on_accent: "#14191E"
  success: "#3F6B34"
  warning: "#8A5B12"
  error: "#96271D"
  info: "#1D4E78"
typography:
  headline-lg:
    fontFamily: "Newsreader, Georgia, \"Times New Roman\", serif"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.022em"
  headline-md:
    fontFamily: "Newsreader, Georgia, \"Times New Roman\", serif"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.022em"
  body-md:
    fontFamily: "Archivo, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.022em"
  label-md:
    fontFamily: "Archivo, \"Helvetica Neue\", Arial, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "0px"
  lg: "0px"
  full: "9999px"
spacing:
  base: "4px"
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_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: "{colors.on_accent}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.base}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Ardoise

## Overview

One sun, one horizon, and a shadow that does not always agree. Every raised surface throws the same hard 45-degree ink shadow, which forces square geometry everywhere and turns interaction into physics — a control moves into its own shade when you press it.

### Values

- one light source
- hard edges
- measured emptiness
- calm serene type over uncanny scenes
- physics as state
- concrete nouns

### Anti-Values

- soft or glowing shadows
- rounded corners
- edge stripes on cards
- boxed navigation
- decorative gradients
- busy grounds under copy
- inflated mid-scale type

### Visual Character

- box-shadow: 24px 24px 0 #14191E — equal on both axes, zero blur, ink only
- border-radius: 0 on every rectangle; 9999 only on a radio dot
- border-width: 0 everywhere; separation is a step down to #E7E2D6
- hover translate(4px,4px) with the throw halved; active translate(8px,8px) with the throw gone
- body 17px/1.62 Archivo 400 against a single 19.5vw Newsreader 200 display moment

### Lineage

> Belgian veristic surrealism — Magritte's flat immaculate paint, empty plains and impossible light — put to work as an instrument for a trade that reads buildings by their shadows.

## 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 | `#F2EFE8` |
| surface | `#FFFFFF` |
| surface_solid | `#FFFFFF` |
| text | `#14191E` |
| muted | `#454E56` |
| border | `#14191E` |
| accent | `#6FA8D6` |
| accent_2 | `#8CAE3E` |
| accent_soft | `#DCE7F0` |
| on_accent | `#14191E` |
| success | `#3F6B34` |
| warning | `#8A5B12` |
| error | `#96271D` |
| info | `#1D4E78` |

## Typography

Load the fonts from Google Fonts: https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400&display=swap

- **Headline-Lg**: Newsreader, Georgia, "Times New Roman", serif, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Newsreader, Georgia, "Times New Roman", serif, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Archivo, "Helvetica Neue", Arial, sans-serif, 17px, weight 400, line-height 1.5.
- **Label-Md**: Archivo, "Helvetica Neue", Arial, sans-serif, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `4px`

### Grid

12 columns, 1360–1520px max width, 56px gutters at desktop, 40 at 1180, 20 at 820. Asymmetric splits by default (34/66); centred symmetry is avoided.

### Breakpoints

390 / 768–1024 / 1440 / 1920+, each art-directed rather than reflowed. The tablet band keeps specimen rows four-across as its own composition; portrait re-crops every plate so the subject stays in frame.

### Whitespace

Generous, with padding always above a title. Emptiness is a material: the plain around a single object is composed, not left over. Ultra-wide caps and centres the content while plates and scene stages span 100vw.

## Elevation & Depth

### Shadows

- **Sm**: 8px 8px 0 #14191E
- **Md**: 16px 16px 0 #14191E
- **Lg**: 24px 24px 0 #14191E

## Shapes

### Rounded

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

### Surfaces

- **Treatment**: flat matte paint; no gradients, no glass, no texture overlays
- **Card Style**: white paper on bone ground, one hard ink throw, square corners, no rules, never nested
- **Bg Pattern**: none on ground; the landing's ground is a live sky-over-plain shader whose horizon travels with scroll

### Borders

- **Default Width**: 0px
- **Accent Width**: 0px
- **Style**: none
- **Character**: the language draws no lines that are not shadows; separation is a step down into the recess, space, or a throw

## Components

### Composition

Full-bleed plates with reserved quiet zones; asymmetric splits (34/66, never 50/50); horizons that never sit at the middle; one focal point per scene, with the surrounding plain left genuinely empty.

### Hierarchy

Two extremes and a compressed middle: one large display or numeral moment per view, a quiet 17px fine body voice, and 12px micro caps for instruments. Nothing between them is allowed to grow.

### Density

Generous and deliberately uneven, but never a crowded cluster beside a starved void — an empty region is a composed region, sized on purpose and balanced by the weight of its one object.

### Signature Patterns

- The single sun: one hard 45-degree ink throw at 8/16/24, identical on every raised element in every artifact.
- Press into shade: hover translates halfway into the throw and halves it; press translates fully in and removes it.
- The disagreeing shadow: in drawings and specimens only, a solid ink shadow whose shape contradicts the outlined object above it, marking what is not doing what it appears to do.
- The travelling rule: links and nav underlines arrive from up-and-left along the sun vector rather than fading in.
- The step-down ground: table bands, fields at rest, and any unraised surface drop to #E7E2D6 instead of taking a rule.

## 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-01a068ca-dab5-7080-a495-a616e07eba77/DESIGN.with-shadcn.md`.

Machine-readable companions for automation: `/language/en-01a068ca-dab5-7080-a495-a616e07eba77/shadcn.json` (registry theme), `/language/en-01a068ca-dab5-7080-a495-a616e07eba77/shadcn-components.md` (component recipes) and `/language/en-01a068ca-dab5-7080-a495-a616e07eba77/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 Throw every raised element down and to the right at 45 degrees, hard, ink, unblurred.
- Do Keep every corner square so the geometry and the light agree.
- Do Express state with fill and throw — a chip, a wash, a lift — in the language's own vocabulary.
- Do Place type over imagery by choosing the region and the ink for it, and measure the composited contrast behind the glyphs.
- Do Keep body at 17px regular and let only the display and the numerals be large.
- Do Let a step down into the recess do the work a rule would otherwise do.
- Don't Don't blur, spread, or tint a shadow, and don't light anything from a second direction.
- Don't Don't round a corner; 16 and 24 are not in this language.
- Don't Don't put a colour stripe on the edge of a card, a block, or a row.
- Don't Don't box navigation in a card or a pill bar, and don't nest plates.
- Don't Don't let a bright accent hue carry small type; use its dark ink variant.
- Don't Don't use the disagreeing shadow in chrome, navigation, or controls.

## Imagery Direction

### Pairs With

midi

### Medium

oil

### Subject Policy

Ordinary isolated subjects — a door, a wall, a block of stone, objects on a shelf, a row of houses — placed in impossible relation to their light or their scale. The technique is subject-agnostic and dresses a face, a city, or a teapot the same way.

### Composition

High clean horizon, vast uninterrupted ground, one light source, hard unblurred cast shadows, frontal and calm. Every plate is generated with a reserved quiet zone for type — an empty half, an open sky, an uncluttered ground band.

### Palette

Bone ground #F2EFE8 to #E8DFCF, cerulean sky #6FA8D6 to #2E7CC0, slate ink #14191E, and at most one apple-green object.

### Treatment

Immaculate matte paint, no visible brush texture, no atmospheric haze, no film grain, no vignette.

### Avoid

- glow
- bloom
- lens flare
- depth-of-field blur
- multiple light sources
- text or lettering in the image

### Swap Contract

Every plate is consumed through a --plate-N variable with the real URL as the inline default at every use site, listed in a <!-- plate-manifest --> comment at the top of each artifact. The hero carries two slots, --hero-image and --hero-image-portrait, because portrait is art-directed rather than cropped.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ardoise",
  "type": "registry:theme",
  "title": "Ardoise shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#F2EFE8",
      "foreground": "#14191E",
      "card": "#FFFFFF",
      "card-foreground": "#14191E",
      "popover": "#FFFFFF",
      "popover-foreground": "#14191E",
      "primary": "#14191E",
      "primary-foreground": "#ffffff",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#454E56",
      "muted-foreground": "#14191E",
      "accent": "#6FA8D6",
      "accent-foreground": "#ffffff",
      "destructive": "#96271D",
      "border": "#14191E",
      "input": "#14191E",
      "ring": "#6FA8D6",
      "chart-1": "#14191E",
      "chart-2": "#f4f4f5",
      "chart-3": "#6FA8D6",
      "chart-4": "#3F6B34",
      "chart-5": "#8A5B12",
      "sidebar": "#FFFFFF",
      "sidebar-foreground": "#14191E",
      "sidebar-primary": "#14191E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#1D4E78",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#14191E",
      "sidebar-ring": "#6FA8D6",
      "radius": "0px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#14191E",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#6FA8D6",
      "accent-foreground": "#ffffff",
      "destructive": "#96271D",
      "border": "#303642",
      "input": "#303642",
      "ring": "#6FA8D6",
      "chart-1": "#14191E",
      "chart-2": "#f4f4f5",
      "chart-3": "#6FA8D6",
      "chart-4": "#3F6B34",
      "chart-5": "#8A5B12",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#14191E",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#6FA8D6",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#303642",
      "sidebar-ring": "#6FA8D6",
      "radius": "0px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-01a068ca-dab5-7080-a495-a616e07eba77",
    "slug": "ardoise",
    "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_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"
      ]
    }
  }
}
```