Smalti

# Smalti

## Philosophy

A nocturnal civic language for night-shift transit operations: bounded glass-tile colour pressed into black grout, terrazzo platform light clipped to material surfaces, hard offset slab shadows, the whole network drafted in ink on a deep concourse ground. Colour is signal, not decoration.

### Values

- colour as line signal, never ornament
- bounded glass held in black grout
- material contrast on a dark ground
- drafted precision over novelty
- one mechanic that scales from chip to station

### Anti-Values

- warm cream daylight pastiche
- all-over Memphis squiggles or speckle wallpaper
- glassmorphism, grey SaaS cards, blurred glow
- unbounded rainbow accents divorced from meaning

### Visual Character

- Deep ink concourse ground (#14151B) with 2px near-black grout lines, squared tiles, and hard offset solid slab shadows that give panels furniture-like presence at night.
- Five smalti glass colours (cobalt, tomato, butter, teal, lilac) each bound to a transit line, used like highlighters as bounded chips set in grout, never colour washes.
- Terrazzo speckle is clipped to material surfaces (platform-floor rails, card footers, the clock plinth) so it reads as polished aggregate, not wallpaper.
- The mosaic signal board is the signature: one route is one glass chip, tiled larger into the departure matrix, tiled again into the platform wall.
- One sculptural round station-clock aperture breaks the otherwise-squared grid; corner Memphis markers anchor drafted artwork as wayfinding.
- Display type is Archivo 900 uppercase signage; Space Mono carries times, track codes and line IDs; Hanken Grotesk keeps body prose quiet on the ink.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#14151B` |
| surface | `#1E2029` |
| surface_2 | `#262936` |
| text | `#F4F1E8` |
| muted | `#9A9FB2` |
| border | `#07080C` |
| accent | `#F4C53A` |
| on_accent | `#0B0C10` |
| cobalt | `#2E6BF0` |
| tomato | `#F0533A` |
| butter | `#F4C53A` |
| teal | `#13A085` |
| lilac | `#7B74E8` |
| primary | `#2E6BF0` |
| secondary | `#F0533A` |
| success | `#13A085` |
| warning | `#F4C53A` |
| error | `#F0533A` |
| info | `#2E6BF0` |

### Typography

- **Base Size**: 17px
- **Body Font**: Hanken Grotesk
- **Heading Font**: Archivo
- **Mono Font**: Space Mono
- **Heading Weight**: 900
- **Heading Transform**: uppercase
- **Letter Spacing**: -0.02em
- **Line Height**: 1.0
- **Scale Ratio**: 1.25
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: 4px 4px 0 #07080C
- **Md**: 7px 7px 0 #07080C
- **Lg**: 11px 11px 0 #07080C
- **Character**: hard offset solid slab shadows, no blur

### Spacing

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

### Surfaces

- **Bg Pattern**: deep ink concourse ground with terrazzo speckle clipped to material rails only, no full-screen pattern
- **Card Style**: flat squared tile, 2px near-black grout outline, hard offset slab shadow (no blur)
- **Treatment**: dark ink ground with bounded glass-tile colour set in black grout

### Borders

- **Default Width**: 2px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: near-black grout lines; depth from offset slab shadow, never a single accent edge

### Motion

- **Duration**: 160ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: tiny tactile lifts and colour-slide reveals; settled state is the default and visible with no JS; respect prefers-reduced-motion

## Rules

### Composition

A wayfinding console: full-viewport night-station hero with a left-weighted legible overlay, then a live board strip, mosaic feature tiles, the signal-wall showcase, and service metrics; the dashboard is a dispatcher's night board with an open sidebar.

### Hierarchy

Headlines use Archivo 900 uppercase signage; operational labels and prose use Hanken Grotesk; Space Mono is reserved for times, track codes, headways, line IDs, and capacities.

### Density

Dispatcher-console density: many live objects, but generous ink gutters and grouped tiles keep the board breathable.

### Signature

Mosaic signal board — one route is one bounded glass chip set in 2px black grout, tiled larger into the live departure matrix and again into the platform wall; terrazzo clipped to material rails; corner Memphis markers; hard offset slab depth; one round station-clock aperture breaks the squared grid.

## Layout

### Grid

12-column desktop grid with 24px gutters; tablet collapses to fewer columns; mobile becomes a single column with the signal rails retained as narrow strips.

### Whitespace

Ink whitespace acts like the dark concourse between tiles; leave 24-48px around major modules and keep terrazzo and corner markers close to their parent component.

### Density

breathable

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide without horizontal overflow; only the landing hero spans full 100vw; minmax(0,1fr) columns and min-width:0 children keep grids and the mosaic board contained.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Wide**: 1700px

## Guidance

### Do

- Bind one glass colour to one line and let the grout hold it.
- Clip terrazzo speckle to surfaces that earn it; keep the ink ground quiet.
- Build depth from hard offset slab shadows and grout outlines, never blur or glow.
- Pair the single round clock aperture against otherwise squared panels.
- Reserve Space Mono for the numbers a dispatcher reads.

### Don't

- Do not flood the screen with Memphis squiggles or all-over terrazzo.
- Do not use glassmorphism, grey SaaS cards, or blurred gradient blobs.
- Do not round every container into pills; the architecture stays squared.
- Do not let line colour become decoration divorced from which-line meaning.

### Accessibility

Body text 17px+ in warm bone #F4F1E8 on the deep ink #14151B ground for high contrast; white text only on the saturated cobalt and tomato fills; focus states use a visible butter ring plus slab shadow; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

inlay

### Summary

Nocturnal civic transit scenes rendered in the Inlay technique — bounded flat colour-blocks in crisp black outlines, terrazzo speckle on a few station surfaces, hard offset slab shadows, corner Memphis markers — on a deep ink ground rather than cream.

### Subjects

- a night metro station concourse
- a mosaic-tiled platform wall
- an arriving tram in cut-glass colour blocks
- a circular station clock
- a tunnel mouth and viaduct arches

### Usage

One full-bleed landing hero composed with a calmer dark upper-left for the overlay; feature and spot imagery as single faceted transit objects on quiet ink.

---
version: "alpha"
name: "Smalti"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#14151B"
  surface: "#1E2029"
  surface_2: "#262936"
  text: "#F4F1E8"
  muted: "#9A9FB2"
  border: "#07080C"
  accent: "#F4C53A"
  on_accent: "#0B0C10"
  cobalt: "#2E6BF0"
  tomato: "#F0533A"
  butter: "#F4C53A"
  teal: "#13A085"
  lilac: "#7B74E8"
  primary: "#2E6BF0"
  secondary: "#F0533A"
  success: "#13A085"
  warning: "#F4C53A"
  error: "#F0533A"
  info: "#2E6BF0"
typography:
  headline-lg:
    fontFamily: "Archivo"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Archivo"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.02em"
  label-md:
    fontFamily: "Space Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  md: "16px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-border:
    backgroundColor: "{colors.border}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-cobalt:
    backgroundColor: "{colors.cobalt}"
  color-reference-tomato:
    backgroundColor: "{colors.tomato}"
  color-reference-butter:
    backgroundColor: "{colors.butter}"
  color-reference-teal:
    backgroundColor: "{colors.teal}"
  color-reference-lilac:
    backgroundColor: "{colors.lilac}"
  color-reference-primary:
    backgroundColor: "{colors.primary}"
  color-reference-secondary:
    backgroundColor: "{colors.secondary}"
  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.primary}"
    textColor: "#ffffff"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Smalti

## Overview

A nocturnal civic language for night-shift transit operations: bounded glass-tile colour pressed into black grout, terrazzo platform light clipped to material surfaces, hard offset slab shadows, the whole network drafted in ink on a deep concourse ground. Colour is signal, not decoration.

### Values

- colour as line signal, never ornament
- bounded glass held in black grout
- material contrast on a dark ground
- drafted precision over novelty
- one mechanic that scales from chip to station

### Anti-Values

- warm cream daylight pastiche
- all-over Memphis squiggles or speckle wallpaper
- glassmorphism, grey SaaS cards, blurred glow
- unbounded rainbow accents divorced from meaning

### Visual Character

- Deep ink concourse ground (#14151B) with 2px near-black grout lines, squared tiles, and hard offset solid slab shadows that give panels furniture-like presence at night.
- Five smalti glass colours (cobalt, tomato, butter, teal, lilac) each bound to a transit line, used like highlighters as bounded chips set in grout, never colour washes.
- Terrazzo speckle is clipped to material surfaces (platform-floor rails, card footers, the clock plinth) so it reads as polished aggregate, not wallpaper.
- The mosaic signal board is the signature: one route is one glass chip, tiled larger into the departure matrix, tiled again into the platform wall.
- One sculptural round station-clock aperture breaks the otherwise-squared grid; corner Memphis markers anchor drafted artwork as wayfinding.
- Display type is Archivo 900 uppercase signage; Space Mono carries times, track codes and line IDs; Hanken Grotesk keeps body prose quiet on the ink.

## 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 | `#14151B` |
| surface | `#1E2029` |
| surface_2 | `#262936` |
| text | `#F4F1E8` |
| muted | `#9A9FB2` |
| border | `#07080C` |
| accent | `#F4C53A` |
| on_accent | `#0B0C10` |
| cobalt | `#2E6BF0` |
| tomato | `#F0533A` |
| butter | `#F4C53A` |
| teal | `#13A085` |
| lilac | `#7B74E8` |
| primary | `#2E6BF0` |
| secondary | `#F0533A` |
| success | `#13A085` |
| warning | `#F4C53A` |
| error | `#F0533A` |
| info | `#2E6BF0` |

## Typography

- **Headline-Lg**: Archivo, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Archivo, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Hanken Grotesk, 17px, weight 400, line-height 1.5.
- **Label-Md**: Space 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`

### Grid

12-column desktop grid with 24px gutters; tablet collapses to fewer columns; mobile becomes a single column with the signal rails retained as narrow strips.

### Whitespace

Ink whitespace acts like the dark concourse between tiles; leave 24-48px around major modules and keep terrazzo and corner markers close to their parent component.

### Density

breathable

### Responsive

Renders from ~390px mobile to 2560px+ ultra-wide without horizontal overflow; only the landing hero spans full 100vw; minmax(0,1fr) columns and min-width:0 children keep grids and the mosaic board contained.

### Breakpoints

- **Mobile**: 390px
- **Tablet**: 768px
- **Desktop**: 1200px
- **Wide**: 1700px

## Elevation & Depth

### Shadows

- **Sm**: 4px 4px 0 #07080C
- **Md**: 7px 7px 0 #07080C
- **Lg**: 11px 11px 0 #07080C
- **Character**: hard offset solid slab shadows, no blur

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: deep ink concourse ground with terrazzo speckle clipped to material rails only, no full-screen pattern
- **Card Style**: flat squared tile, 2px near-black grout outline, hard offset slab shadow (no blur)
- **Treatment**: dark ink ground with bounded glass-tile colour set in black grout

### Borders

- **Default Width**: 2px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: near-black grout lines; depth from offset slab shadow, never a single accent edge

## Components

### Composition

A wayfinding console: full-viewport night-station hero with a left-weighted legible overlay, then a live board strip, mosaic feature tiles, the signal-wall showcase, and service metrics; the dashboard is a dispatcher's night board with an open sidebar.

### Hierarchy

Headlines use Archivo 900 uppercase signage; operational labels and prose use Hanken Grotesk; Space Mono is reserved for times, track codes, headways, line IDs, and capacities.

### Density

Dispatcher-console density: many live objects, but generous ink gutters and grouped tiles keep the board breathable.

### Signature

Mosaic signal board — one route is one bounded glass chip set in 2px black grout, tiled larger into the live departure matrix and again into the platform wall; terrazzo clipped to material rails; corner Memphis markers; hard offset slab depth; one round station-clock aperture breaks the squared grid.

## 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-019ef992-a838-76d0-bdbe-1edf637af574/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 Bind one glass colour to one line and let the grout hold it.
- Do Clip terrazzo speckle to surfaces that earn it; keep the ink ground quiet.
- Do Build depth from hard offset slab shadows and grout outlines, never blur or glow.
- Do Pair the single round clock aperture against otherwise squared panels.
- Do Reserve Space Mono for the numbers a dispatcher reads.
- Don't Do not flood the screen with Memphis squiggles or all-over terrazzo.
- Don't Do not use glassmorphism, grey SaaS cards, or blurred gradient blobs.
- Don't Do not round every container into pills; the architecture stays squared.
- Don't Do not let line colour become decoration divorced from which-line meaning.

### Accessibility

Body text 17px+ in warm bone #F4F1E8 on the deep ink #14151B ground for high contrast; white text only on the saturated cobalt and tomato fills; focus states use a visible butter ring plus slab shadow; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

inlay

### Summary

Nocturnal civic transit scenes rendered in the Inlay technique — bounded flat colour-blocks in crisp black outlines, terrazzo speckle on a few station surfaces, hard offset slab shadows, corner Memphis markers — on a deep ink ground rather than cream.

### Subjects

- a night metro station concourse
- a mosaic-tiled platform wall
- an arriving tram in cut-glass colour blocks
- a circular station clock
- a tunnel mouth and viaduct arches

### Usage

One full-bleed landing hero composed with a calmer dark upper-left for the overlay; feature and spot imagery as single faceted transit objects on quiet ink.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "smalti",
  "type": "registry:theme",
  "title": "Smalti shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#14151B",
      "foreground": "#F4F1E8",
      "card": "#1E2029",
      "card-foreground": "#F4F1E8",
      "popover": "#1E2029",
      "popover-foreground": "#F4F1E8",
      "primary": "#2E6BF0",
      "primary-foreground": "#ffffff",
      "secondary": "#F0533A",
      "secondary-foreground": "#ffffff",
      "muted": "#9A9FB2",
      "muted-foreground": "#F4F1E8",
      "accent": "#F4C53A",
      "accent-foreground": "#111111",
      "destructive": "#F0533A",
      "border": "#07080C",
      "input": "#07080C",
      "ring": "#F4C53A",
      "chart-1": "#2E6BF0",
      "chart-2": "#F0533A",
      "chart-3": "#F4C53A",
      "chart-4": "#13A085",
      "chart-5": "#F4C53A",
      "sidebar": "#1E2029",
      "sidebar-foreground": "#F4F1E8",
      "sidebar-primary": "#2E6BF0",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#2E6BF0",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#07080C",
      "sidebar-ring": "#F4C53A",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#2E6BF0",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F4C53A",
      "accent-foreground": "#111111",
      "destructive": "#F0533A",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F4C53A",
      "chart-1": "#2E6BF0",
      "chart-2": "#F0533A",
      "chart-3": "#F4C53A",
      "chart-4": "#13A085",
      "chart-5": "#F4C53A",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#2E6BF0",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F4C53A",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F4C53A",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef992-a838-76d0-bdbe-1edf637af574",
    "slug": "smalti",
    "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",
        "butter",
        "cobalt",
        "error",
        "info",
        "lilac",
        "muted",
        "on_accent",
        "primary",
        "secondary",
        "success",
        "surface",
        "surface_2",
        "teal",
        "text",
        "tomato",
        "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": [
        "character",
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "accent_width",
        "character",
        "default_width",
        "style"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```