Tessera

# Tessera

## Philosophy

A residential postmodern language for calm home-planning software: warm cream architecture, bounded Memphis colour held inside black drafting lines, terrazzo speckle clipped to material surfaces, and offset slab shadows that give panels furniture-like presence. Play, contained by architecture.

### Values

- play contained by architecture
- material contrast with domestic warmth
- legible symbolic surfaces
- colour as room-scale zoning
- productizable pattern without visual overload

### Anti-Values

- room-wide novelty wallpaper
- generic white SaaS dashboards
- nostalgic 1980s pastiche without livability
- unbounded rainbow accents

### Visual Character

- Warm ivory page fields with black 2px drafting outlines, square-corner panels, and hard offset slab shadows that read like architectural elevation drawings.
- Cobalt, tomato, butter, teal and lilac appear as bounded block inlays on headers, rails, handles, KPI plaques and status strips rather than full-screen colour washes.
- Terrazzo speckle is clipped to material surfaces (counters, sills, selected samples) so it reads as material, not wallpaper.
- Small drafted markers (circles, stepped arches, checker chips, squiggle rules) anchor at the corners of the hero artwork as wayfinding symbols, not loose confetti.
- One sculptural round hearth module breaks the rectilinear grid while every other panel stays squared.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#FAF1DE` |
| surface | `#FFFCF2` |
| text | `#181614` |
| muted | `#6E655A` |
| border | `#181614` |
| accent | `#F2C94C` |
| on_accent | `#181614` |
| cobalt | `#1646A8` |
| tomato | `#E24B32` |
| butter | `#F2C94C` |
| teal | `#0E7C66` |
| lilac | `#5C55B8` |
| primary | `#1646A8` |
| secondary | `#E24B32` |
| success | `#0E7C66` |
| warning | `#D99A18` |
| error | `#B7322C` |
| info | `#5C55B8` |

### Typography

- **Base Size**: 17px
- **Body Font**: Nunito Sans
- **Heading Font**: Fraunces
- **Mono Font**: Space Mono
- **Heading Weight**: 750
- **Heading Transform**: none
- **Letter Spacing**: -0.02em
- **Line Height**: 1.5
- **Scale Ratio**: 1.22
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,750&family=Nunito+Sans:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap

### Radii

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

### Shadows

- **Sm**: 3px 3px 0 #181614
- **Md**: 6px 6px 0 #181614
- **Lg**: 10px 10px 0 rgba(24,22,20,.92)
- **Character**: hard offset solid slab shadows, no blur

### Spacing

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

### Surfaces

- **Bg Pattern**: warm cream field with sparse radial terrazzo speckle, no full-room patterning
- **Card Style**: flat square cards, 2px black outline, offset slab shadow (no blur)
- **Treatment**: warm cream ground with clipped Memphis material inlays

### Borders

- **Default Width**: 2px
- **Accent Width**: 2px
- **Style**: solid
- **Character**: black architectural drafting 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

Rectilinear architectural plan: warm cream canvas, asymmetric hero module, material library and bounded pattern samples that never compete with the primary task.

### Hierarchy

Headlines use soft high-contrast Fraunces; operational labels and values use Nunito Sans; Space Mono is reserved for dimensions, SKUs, coordinates, and room codes.

### Density

Balanced residential-studio density: many objects may appear, but generous cream gutters and grouped panels keep the interface breathable.

### Signature

Memphis inlay rails — a 2px-outlined bar split into cobalt, tomato, butter, teal and lilac blocks — tag every zone (room group, material lane, status strip); terrazzo wells clipped to material surfaces; drafted-symbol corner markers; offset slab depth; one sculptural round hearth aperture that breaks the grid.

## Layout

### Grid

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

### Whitespace

Cream whitespace acts like wall surface; leave 24-48px around major modules and keep decorative fragments 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 contained.

### Breakpoints

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

## Guidance

### Do

- Use black linework to make playful colour feel architectural and precise.
- Clip patterns to useful surfaces such as samples, section headers, selected rows, and navigation handles.
- Pair one sculptural object with otherwise calm rectangular task areas.
- Keep the background warm and quiet so saturated colours remain bounded accents.
- Make depth from hard offset slab shadows and outlines, never blur.

### Don't

- Do not flood the whole screen with Memphis squiggles or checkerboards.
- Do not use soft glassmorphism, generic grey SaaS cards, or blurred gradient blobs.
- Do not round every container into friendly pills; most architecture remains squared.
- Do not treat historical postmodern references as ironic stickers divorced from product meaning.

### Accessibility

Body text 17px+ on warm cream with #181614 ink for high contrast; white text only on the saturated cobalt/tomato fills; focus states use a visible slab shadow; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

inlay

### Summary

Drafted residential scenes rendered in the Inlay technique: bounded flat color-blocks inside crisp black drafting outlines, terrazzo speckle on a few surfaces, hard offset slab shadows, corner Memphis markers.

### Subjects

- residential interiors
- rooms and apertures
- furniture and fixtures
- material samples
- everyday domestic objects

### Usage

Landing hero is a full-bleed drafted interior; feature and empty-state slots use single faceted objects on calm cream. Bright and clean, never muddy; no text.

---
version: "alpha"
name: "Tessera"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#FAF1DE"
  surface: "#FFFCF2"
  text: "#181614"
  muted: "#6E655A"
  border: "#181614"
  accent: "#F2C94C"
  on_accent: "#181614"
  cobalt: "#1646A8"
  tomato: "#E24B32"
  butter: "#F2C94C"
  teal: "#0E7C66"
  lilac: "#5C55B8"
  primary: "#1646A8"
  secondary: "#E24B32"
  success: "#0E7C66"
  warning: "#D99A18"
  error: "#B7322C"
  info: "#5C55B8"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: "Nunito Sans"
    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-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"
---

# Tessera

## Overview

A residential postmodern language for calm home-planning software: warm cream architecture, bounded Memphis colour held inside black drafting lines, terrazzo speckle clipped to material surfaces, and offset slab shadows that give panels furniture-like presence. Play, contained by architecture.

### Values

- play contained by architecture
- material contrast with domestic warmth
- legible symbolic surfaces
- colour as room-scale zoning
- productizable pattern without visual overload

### Anti-Values

- room-wide novelty wallpaper
- generic white SaaS dashboards
- nostalgic 1980s pastiche without livability
- unbounded rainbow accents

### Visual Character

- Warm ivory page fields with black 2px drafting outlines, square-corner panels, and hard offset slab shadows that read like architectural elevation drawings.
- Cobalt, tomato, butter, teal and lilac appear as bounded block inlays on headers, rails, handles, KPI plaques and status strips rather than full-screen colour washes.
- Terrazzo speckle is clipped to material surfaces (counters, sills, selected samples) so it reads as material, not wallpaper.
- Small drafted markers (circles, stepped arches, checker chips, squiggle rules) anchor at the corners of the hero artwork as wayfinding symbols, not loose confetti.
- One sculptural round hearth module breaks the rectilinear grid while every other panel stays squared.

## 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 | `#FAF1DE` |
| surface | `#FFFCF2` |
| text | `#181614` |
| muted | `#6E655A` |
| border | `#181614` |
| accent | `#F2C94C` |
| on_accent | `#181614` |
| cobalt | `#1646A8` |
| tomato | `#E24B32` |
| butter | `#F2C94C` |
| teal | `#0E7C66` |
| lilac | `#5C55B8` |
| primary | `#1646A8` |
| secondary | `#E24B32` |
| success | `#0E7C66` |
| warning | `#D99A18` |
| error | `#B7322C` |
| info | `#5C55B8` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Nunito Sans, 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 pattern rails retained as narrow strips.

### Whitespace

Cream whitespace acts like wall surface; leave 24-48px around major modules and keep decorative fragments 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 contained.

### Breakpoints

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

## Elevation & Depth

### Shadows

- **Sm**: 3px 3px 0 #181614
- **Md**: 6px 6px 0 #181614
- **Lg**: 10px 10px 0 rgba(24,22,20,.92)
- **Character**: hard offset solid slab shadows, no blur

## Shapes

### Rounded

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

### Surfaces

- **Bg Pattern**: warm cream field with sparse radial terrazzo speckle, no full-room patterning
- **Card Style**: flat square cards, 2px black outline, offset slab shadow (no blur)
- **Treatment**: warm cream ground with clipped Memphis material inlays

### Borders

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

## Components

### Composition

Rectilinear architectural plan: warm cream canvas, asymmetric hero module, material library and bounded pattern samples that never compete with the primary task.

### Hierarchy

Headlines use soft high-contrast Fraunces; operational labels and values use Nunito Sans; Space Mono is reserved for dimensions, SKUs, coordinates, and room codes.

### Density

Balanced residential-studio density: many objects may appear, but generous cream gutters and grouped panels keep the interface breathable.

### Signature

Memphis inlay rails — a 2px-outlined bar split into cobalt, tomato, butter, teal and lilac blocks — tag every zone (room group, material lane, status strip); terrazzo wells clipped to material surfaces; drafted-symbol corner markers; offset slab depth; one sculptural round hearth aperture that breaks the 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-019ef967-9043-7450-9fd4-cc12ae958871/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 Use black linework to make playful colour feel architectural and precise.
- Do Clip patterns to useful surfaces such as samples, section headers, selected rows, and navigation handles.
- Do Pair one sculptural object with otherwise calm rectangular task areas.
- Do Keep the background warm and quiet so saturated colours remain bounded accents.
- Do Make depth from hard offset slab shadows and outlines, never blur.
- Don't Do not flood the whole screen with Memphis squiggles or checkerboards.
- Don't Do not use soft glassmorphism, generic grey SaaS cards, or blurred gradient blobs.
- Don't Do not round every container into friendly pills; most architecture remains squared.
- Don't Do not treat historical postmodern references as ironic stickers divorced from product meaning.

### Accessibility

Body text 17px+ on warm cream with #181614 ink for high contrast; white text only on the saturated cobalt/tomato fills; focus states use a visible slab shadow; motion respects prefers-reduced-motion and the settled state renders with no JS.

## Imagery Direction

### Pairs With

inlay

### Summary

Drafted residential scenes rendered in the Inlay technique: bounded flat color-blocks inside crisp black drafting outlines, terrazzo speckle on a few surfaces, hard offset slab shadows, corner Memphis markers.

### Subjects

- residential interiors
- rooms and apertures
- furniture and fixtures
- material samples
- everyday domestic objects

### Usage

Landing hero is a full-bleed drafted interior; feature and empty-state slots use single faceted objects on calm cream. Bright and clean, never muddy; no text.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tessera",
  "type": "registry:theme",
  "title": "Tessera shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#FAF1DE",
      "foreground": "#181614",
      "card": "#FFFCF2",
      "card-foreground": "#181614",
      "popover": "#FFFCF2",
      "popover-foreground": "#181614",
      "primary": "#1646A8",
      "primary-foreground": "#ffffff",
      "secondary": "#E24B32",
      "secondary-foreground": "#ffffff",
      "muted": "#6E655A",
      "muted-foreground": "#181614",
      "accent": "#F2C94C",
      "accent-foreground": "#111111",
      "destructive": "#B7322C",
      "border": "#181614",
      "input": "#181614",
      "ring": "#F2C94C",
      "chart-1": "#1646A8",
      "chart-2": "#E24B32",
      "chart-3": "#F2C94C",
      "chart-4": "#0E7C66",
      "chart-5": "#D99A18",
      "sidebar": "#FFFCF2",
      "sidebar-foreground": "#181614",
      "sidebar-primary": "#1646A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#5C55B8",
      "sidebar-accent-foreground": "#ffffff",
      "sidebar-border": "#181614",
      "sidebar-ring": "#F2C94C",
      "radius": "16px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#1646A8",
      "primary-foreground": "#ffffff",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#F2C94C",
      "accent-foreground": "#111111",
      "destructive": "#B7322C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#F2C94C",
      "chart-1": "#1646A8",
      "chart-2": "#E24B32",
      "chart-3": "#F2C94C",
      "chart-4": "#0E7C66",
      "chart-5": "#D99A18",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#1646A8",
      "sidebar-primary-foreground": "#ffffff",
      "sidebar-accent": "#F2C94C",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#F2C94C",
      "radius": "16px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019ef967-9043-7450-9fd4-cc12ae958871",
    "slug": "tessera",
    "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",
        "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"
      ]
    }
  }
}
```