Theme

Harbor tokens in a live workbench

Chrome already uses this contract's DNA. Tweak closed prefs (brand · radius · paper), then install them into any project via MCP apply_prefs.

Install MCP UI gallery

Quiet paper ops surfaces, semantic status chips, dense index rows — no cinema. Prefs are closed presets only — not layout builders or animation pickers. Those stay laws (layout, animations).

Live knobs

Reskin the workbench

Closed presets only — brand · radius · paper. Layout shells and motion stay laws. Export below feeds MCP apply_prefs (6 CSS vars).

Ink teal · Compact · Warm paper

⌘K

empty via search

ID	Title	Meta
ISS-1842	Tighten selected-state contrast	2h
ISS-1839	Ship help drawer reading lane	48m
ISS-1831	Map activity to agent timeline	—
ISS-1820	Align edge depth on panels	1d

Install these prefs

Copy into your project, or ask the contract MCP to apply_prefs. Not a freeform theme editor — unknown ids fail closed.

MCP call

apply_prefs({ brand: "teal", radius: "compact", paper: "warm", surface: "application" })

contract.prefs.json

{
  "contractId": "harbor",
  "brand": "teal",
  "radius": "compact",
  "paper": "warm",
  "surface": "application"
}

app/contract-prefs.css

/* contract-prefs — generated from closed preset ids. Do not invent OKLCH here.
 * contractId=harbor brand=teal radius=compact paper=warm
 * Re-apply via MCP apply_prefs. Layout/motion are laws, not prefs.
 */
:root {
  color-scheme: light;
  --brand: oklch(0.42 0.09 200);
  --brand-foreground: oklch(0.97 0.01 85);
  --brand-muted: oklch(0.93 0.03 200);
  --accent: oklch(0.93 0.02 200);
  --primary: oklch(0.42 0.09 200);
  --primary-foreground: oklch(0.97 0.01 85);
  --ring: oklch(0.42 0.09 200);
  --success: oklch(0.42 0.09 200);
  --chart-1: oklch(0.42 0.09 200);
  --sidebar-primary: oklch(0.42 0.09 200);
  --sidebar-ring: oklch(0.42 0.09 200);
  --background: oklch(0.965 0.01 72);
  --foreground: oklch(0.28 0.02 55);
  --card: oklch(0.98 0.008 72);
  --card-foreground: oklch(0.28 0.02 55);
  --popover: oklch(0.98 0.008 72);
  --popover-foreground: oklch(0.28 0.02 55);
  --radius: 0.375rem;
}