@letterstory/design 0.1.0

package/PRINCIPLES.md

@@ -0,0 +1,60 @@
+<!-- Published copy. The source is AGENTS.md at the root of github.com/letterstory/letterstory; edit there and run design/scripts/build.mjs. -->
+
+# Letterstory design principles
+
+## The four principles
+
+1. **Primitives + intelligence, never a baked opinion.** Every surface is an unopinionated
+   substrate (data structures, one pipeline, storable as plain data) plus an intelligence layer
+   that pushes clients in an opinionated direction _through_ those primitives. The tell that
+   you have baked an opinion into a primitive: a consumer wants to branch on "what kind of
+   thing is this". Thesis and diagnostic in `docs/architecture/primitives-and-assembly.md`.
+   Precedents: `src/types/article-plan.ts` (an untemplated post is `preference: []`, not a
+   mode), `src/lib/collections/capabilities.ts` (branch on `brand_subject` /
+   `publish_control`, never on `profile` or `kind`).
+
+2. **One engine.** A blog collection and a phantom are the same engine with different
+   capabilities. Templated and untemplated posts are the same writing pipeline with different
+   constraints. Fleet tabs read one derivation of one measure. If you are about to write a
+   second module "like X but for Y", stop and add a flag or a capability to X. A module that
+   stops being phantom-only loses its `phantom-` prefix in the same PR.
+
+3. **One operation, one function, many projections.** UI route, MCP tool, REST endpoint and CLI
+   command are _projections_ of one lib function with one Zod schema. The manifest is `TOOLS`
+   in `src/lib/mcp/registry.ts`; MCP, OpenAPI and `/docs` are derived from it at request time
+   and cannot drift (`src/app/docs/AGENTS.md`). Where the UI has its own `/api/*` route, that
+   route and the tool must call the same lib function and share the schema — derive the tool
+   contract with `.omit()` for key-derived fields exactly as
+   `src/lib/validations/collection-onboard.ts` does. A `// mirrors /api/...` comment is a
+   confession, not a pattern; the ratchet freezes the existing ones.
+
+4. **Primitives live in `components/ui`; features map meaning to tokens.** A feature decides
+   _what_ a state means (ok / warn / risk, rising / falling) and hands that to a primitive. It
+   never picks a colour, a pixel size, a table header class or a date format. Tokens are in
+   `src/app/globals.css` (`@theme inline`): `accent-peach`, `accent-mint`, `rising`,
+   `falling`, `warning`, `text-2xs`. Formatters are `src/lib/format/{date,number}.ts`.
+   The primitives in `components/ui`: `app-page` (THE page shell every `(app)` layout
+   renders; `surface="dark"` is a recorded decision, not a per-route class), `table`,
+   `empty-state`, `status-badge` (a feature passes a _tone_ — ok / warn / risk / rising /
+   falling / info / neutral — never a colour), `stat-tile` (one delta convention),
+   `copy-button` (+ `useCopyToClipboard`), `stage-progress` (one checklist for durable jobs),
+   `collapsible-section`, `tabs` (`variant="segmented"` replaced the perf tab bar). Hooks:
+   `useTabParam` / `usePersistedTab` (ONE `?tab=` URL contract) and `useConfirm` (the only
+   destructive-action confirmation; `confirm()` is an ESLint error). If the primitive you
+   need does not exist, add it there first, then use it. Cross-feature imports of another
+   feature's private module are an ESLint error.
+
+## The two review questions
+
+Applied to every PR (from `docs/architecture/README.md`):
+
+> When a consumer wants to branch on what kind of thing this is, the assembly layer failed to
+> express it as a constraint.
+>
+> If you can't tell from the row who decided this and whether they can undo it, you wrote an
+> opinion into a fact.
+
+Add a third for surfaces:
+
+> If the app can do it and an agent cannot (or vice versa), which projection is missing, and
+> why did the shared function not force it?

package/README.md

@@ -0,0 +1,90 @@
+# `@letterstory/design`
+
+The cross-repo layer of Letterstory's design system: the **tokens** (colour, radius, font,
+type scale), the **phantom theme registry** Lettersprite renders, and the **design
+principles** as a shipped file. Framework-neutral data with one thin adapter per framework,
+so every Letterstory repo reads the same values and none of them copies a palette.
+
+Zero runtime dependencies, no build step to install. Published from this directory by
+`.github/workflows/publish-design.yml` (npm Trusted Publishing, on merge to `main`);
+`design-version-guard.yml` requires a version bump whenever a shipped file changes.
+
+## What ships
+
+| File                  | What it is                                                                                         |
+| --------------------- | -------------------------------------------------------------------------------------------------- |
+| `tokens.json`         | **Source.** The token values as one grouped object: `color.{light,dark}`, `radius`, `font`, `size` |
+| `tokens.css`          | The tokens as CSS custom properties on `:root`, with the dark overrides under `.dark`              |
+| `tailwind-v4.css`     | A `@theme inline` block mapping the custom properties to Tailwind v4 theme keys                    |
+| `tailwind-v3.cjs`     | A Tailwind v3 preset whose `theme.extend` references the custom properties                         |
+| `styled.js` + `.d.ts` | A plain object of resolved values (no stylesheet needed) for styled-components and similar         |
+| `themes.json`         | **Source.** The phantom theme registry: `groups` and `themes` (value, label, hint, group, tags)    |
+| `themes.d.ts`         | Literal-union types for the registry (`PhantomBlogTheme`, `PhantomBlogThemeGroup`, …)              |
+| `PRINCIPLES.md`       | The design principles, copied from the root `AGENTS.md` of the letterstory repo                    |
+
+`tokens.json` and `themes.json` are the sources. Everything else is generated by
+`scripts/build.mjs` and committed; a test regenerates and diffs, so editing a generated file
+by hand fails CI. To change a value: edit the JSON, run `node design/scripts/build.mjs`,
+commit both.
+
+In `tokens.json`, `color.dark` holds only the values that differ from light (exactly what the
+`.dark` block sets); `styled.js` resolves that into a full dark palette. Derived tokens keep
+their CSS expressions (`brand-light` is `oklch(from var(--brand) …)`, `radius.sm` is
+`calc(var(--radius) - 4px)`), so rebranding is one value: `color.light.brand`.
+
+## Consuming it
+
+**Tailwind v4** (letterstory, lettersprite): import the tokens, then the mapping, after
+Tailwind itself.
+
+```css
+@import "tailwindcss";
+@import "@letterstory/design/tokens.css";
+@import "@letterstory/design/tailwind-v4.css";
+```
+
+`bg-brand`, `text-accent-peach`, `text-rising`, `rounded-lg`, `text-2xs` now resolve to the
+tokens. `--font-sans` / `--font-mono` are set under Tailwind's own names, so `font-sans` and
+preflight's default pick up DM Sans with no mapping. Dark mode is the `.dark` class
+(`@custom-variant dark (&:is(.dark *))` in your stylesheet).
+
+**Tailwind v3** (lettertrace, kernels): load `tokens.css` on the page and add the preset.
+
+```js
+// tailwind.config.js
+module.exports = {
+	darkMode: "class",
+	presets: [require("@letterstory/design/tailwind-v3")],
+};
+```
+
+**styled-components** (the marketing repo): a resolved object, no stylesheet.
+
+```ts
+import { tokens } from "@letterstory/design";
+// tokens.color.light["accent-peach"] === "#ee724a"; tokens.color.dark.background; tokens.font.sans
+```
+
+**Plain CSS** (admin, the company site): import `tokens.css` and use `var(--brand)`,
+`var(--accent-peach)`, `var(--radius)`, `var(--font-size-2xs)` …
+
+**Theme registry** (lettersprite, letterstory):
+
+```ts
+import registry from "@letterstory/design/themes"; // themes.json, typed by themes.d.ts
+import type { PhantomBlogTheme } from "@letterstory/design/themes";
+```
+
+## Where the values come from
+
+The letterstory app is a **consumer**, not a source: `src/app/globals.css` imports
+`design/tokens.css` and `design/tailwind-v4.css` by relative path and defines no token of its
+own, and `src/types/deployments.ts` re-exports `themes.json` as `PHANTOM_BLOG_THEMES`. Edit
+`design/tokens.json` or `design/themes.json`, never `globals.css`. The principles in
+`PRINCIPLES.md` are generated from the root `AGENTS.md`; edit that.
+
+## Versioning
+
+Bump `version` in `package.json` whenever a shipped file changes (the guard enforces it);
+the merge to `main` publishes. Adding a token or a theme is a minor bump; changing a value is
+a patch; renaming or removing a token is a major.

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "@letterstory/design",
+	"version": "0.1.0",
+	"description": "Letterstory design tokens, the phantom theme registry, and the design principles — one source for every Letterstory repo.",
+	"type": "module",
+	"license": "UNLICENSED",
+	"author": "Letterstory",
+	"homepage": "https://github.com/letterstory/letterstory/tree/main/design#readme",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/letterstory/letterstory.git",
+		"directory": "design"
+	},
+	"bugs": {
+		"url": "https://github.com/letterstory/letterstory/issues"
+	},
+	"keywords": [
+		"letterstory",
+		"design-tokens",
+		"tailwind",
+		"styled-components",
+		"themes"
+	],
+	"sideEffects": [
+		"*.css"
+	],
+	"exports": {
+		".": {
+			"types": "./styled.d.ts",
+			"default": "./styled.js"
+		},
+		"./tokens.css": "./tokens.css",
+		"./tokens.json": "./tokens.json",
+		"./tailwind-v4.css": "./tailwind-v4.css",
+		"./tailwind-v3": "./tailwind-v3.cjs",
+		"./styled": {
+			"types": "./styled.d.ts",
+			"default": "./styled.js"
+		},
+		"./themes": {
+			"types": "./themes.d.ts",
+			"default": "./themes.json"
+		},
+		"./themes.json": "./themes.json",
+		"./PRINCIPLES.md": "./PRINCIPLES.md",
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"tokens.css",
+		"tokens.json",
+		"tailwind-v4.css",
+		"tailwind-v3.cjs",
+		"styled.js",
+		"styled.d.ts",
+		"themes.json",
+		"themes.d.ts",
+		"PRINCIPLES.md",
+		"README.md"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/styled.d.ts

@@ -0,0 +1,77 @@
+// GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/tokens.json.
+
+export interface Palette {
+	readonly brand: string;
+	readonly "brand-foreground": string;
+	readonly "brand-light": string;
+	readonly "brand-text": string;
+	readonly "accent-peach": string;
+	readonly "accent-peach-hover": string;
+	readonly "accent-mint": string;
+	readonly rising: string;
+	readonly falling: string;
+	readonly warning: string;
+	readonly background: string;
+	readonly foreground: string;
+	readonly card: string;
+	readonly "card-foreground": string;
+	readonly popover: string;
+	readonly "popover-foreground": string;
+	readonly primary: string;
+	readonly "primary-foreground": string;
+	readonly secondary: string;
+	readonly "secondary-foreground": string;
+	readonly muted: string;
+	readonly "muted-foreground": string;
+	readonly accent: string;
+	readonly "accent-foreground": string;
+	readonly destructive: string;
+	readonly border: string;
+	readonly input: string;
+	readonly ring: string;
+	readonly "chart-1": string;
+	readonly "chart-2": string;
+	readonly "chart-3": string;
+	readonly "chart-4": string;
+	readonly "chart-5": string;
+	readonly sidebar: string;
+	readonly "sidebar-foreground": string;
+	readonly "sidebar-primary": string;
+	readonly "sidebar-primary-foreground": string;
+	readonly "sidebar-accent": string;
+	readonly "sidebar-accent-foreground": string;
+	readonly "sidebar-border": string;
+	readonly "sidebar-ring": string;
+}
+
+export interface Radius {
+	readonly DEFAULT: string;
+	readonly sm: string;
+	readonly md: string;
+	readonly lg: string;
+	readonly xl: string;
+}
+
+export interface FontFamily {
+	readonly sans: string;
+	readonly mono: string;
+}
+
+export interface TypeStep {
+	readonly fontSize: string;
+	readonly lineHeight: string;
+}
+
+export interface TypeScale {
+	readonly "2xs": TypeStep;
+}
+
+export interface DesignTokens {
+	readonly color: { readonly light: Palette; readonly dark: Palette };
+	readonly radius: Radius;
+	readonly font: FontFamily;
+	readonly size: TypeScale;
+}
+
+export declare const tokens: DesignTokens;
+export default tokens;

package/styled.js

@@ -0,0 +1,115 @@
+// GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/tokens.json.
+//
+// The tokens as a plain object of resolved CSS values — every var() reference is
+// inlined, so this needs no stylesheet. `color.dark` is the full dark palette (light
+// with the dark overrides applied). For a styled-components ThemeProvider:
+//   <ThemeProvider theme={tokens}>…  then  ${({ theme }) => theme.color.light["accent-peach"]}
+export const tokens = {
+	color: {
+		light: {
+			brand: "oklch(0.332 0.074 243.6)",
+			"brand-foreground": "oklch(0.985 0 0)",
+			"brand-light": "oklch(from oklch(0.332 0.074 243.6) 0.82 0.06 h)",
+			"brand-text": "oklch(0.332 0.074 243.6)",
+			"accent-peach": "#ee724a",
+			"accent-peach-hover": "#e2643b",
+			"accent-mint": "#9af2e0",
+			rising: "oklch(0.72 0.17 155)",
+			falling: "oklch(0.63 0.21 25)",
+			warning: "oklch(0.75 0.16 75)",
+			background: "oklch(1 0 0)",
+			foreground: "oklch(0.145 0 0)",
+			card: "oklch(1 0 0)",
+			"card-foreground": "oklch(0.145 0 0)",
+			popover: "oklch(1 0 0)",
+			"popover-foreground": "oklch(0.145 0 0)",
+			primary: "oklch(0.205 0 0)",
+			"primary-foreground": "oklch(0.985 0 0)",
+			secondary: "oklch(0.97 0 0)",
+			"secondary-foreground": "oklch(0.205 0 0)",
+			muted: "oklch(0.97 0 0)",
+			"muted-foreground": "oklch(0.556 0 0)",
+			accent: "oklch(0.97 0 0)",
+			"accent-foreground": "oklch(0.205 0 0)",
+			destructive: "oklch(0.577 0.245 27.325)",
+			border: "oklch(0.922 0 0)",
+			input: "oklch(0.922 0 0)",
+			ring: "oklch(0.708 0 0)",
+			"chart-1": "oklch(0.646 0.222 41.116)",
+			"chart-2": "oklch(0.6 0.118 184.704)",
+			"chart-3": "oklch(0.398 0.07 227.392)",
+			"chart-4": "oklch(0.828 0.189 84.429)",
+			"chart-5": "oklch(0.769 0.188 70.08)",
+			sidebar: "oklch(0.985 0 0)",
+			"sidebar-foreground": "oklch(0.145 0 0)",
+			"sidebar-primary": "oklch(0.205 0 0)",
+			"sidebar-primary-foreground": "oklch(0.985 0 0)",
+			"sidebar-accent": "oklch(0.97 0 0)",
+			"sidebar-accent-foreground": "oklch(0.205 0 0)",
+			"sidebar-border": "oklch(0.922 0 0)",
+			"sidebar-ring": "oklch(0.708 0 0)",
+		},
+		dark: {
+			brand: "oklch(0.332 0.074 243.6)",
+			"brand-foreground": "oklch(0.985 0 0)",
+			"brand-light": "oklch(from oklch(0.332 0.074 243.6) 0.5 0.09 h)",
+			"brand-text": "oklch(from oklch(0.332 0.074 243.6) 0.72 0.1 h)",
+			"accent-peach": "#ee724a",
+			"accent-peach-hover": "#e2643b",
+			"accent-mint": "#9af2e0",
+			rising: "oklch(0.72 0.17 155)",
+			falling: "oklch(0.63 0.21 25)",
+			warning: "oklch(0.75 0.16 75)",
+			background: "oklch(0.145 0 0)",
+			foreground: "oklch(0.985 0 0)",
+			card: "oklch(0.205 0 0)",
+			"card-foreground": "oklch(0.985 0 0)",
+			popover: "oklch(0.205 0 0)",
+			"popover-foreground": "oklch(0.985 0 0)",
+			primary: "oklch(0.922 0 0)",
+			"primary-foreground": "oklch(0.205 0 0)",
+			secondary: "oklch(0.269 0 0)",
+			"secondary-foreground": "oklch(0.985 0 0)",
+			muted: "oklch(0.269 0 0)",
+			"muted-foreground": "oklch(0.708 0 0)",
+			accent: "oklch(0.269 0 0)",
+			"accent-foreground": "oklch(0.985 0 0)",
+			destructive: "oklch(0.704 0.191 22.216)",
+			border: "oklch(1 0 0 / 10%)",
+			input: "oklch(1 0 0 / 15%)",
+			ring: "oklch(0.556 0 0)",
+			"chart-1": "oklch(0.488 0.243 264.376)",
+			"chart-2": "oklch(0.696 0.17 162.48)",
+			"chart-3": "oklch(0.769 0.188 70.08)",
+			"chart-4": "oklch(0.692 0.162 38.8)",
+			"chart-5": "oklch(0.645 0.246 16.439)",
+			sidebar: "oklch(0.205 0 0)",
+			"sidebar-foreground": "oklch(0.985 0 0)",
+			"sidebar-primary": "oklch(0.488 0.243 264.376)",
+			"sidebar-primary-foreground": "oklch(0.985 0 0)",
+			"sidebar-accent": "oklch(0.269 0 0)",
+			"sidebar-accent-foreground": "oklch(0.985 0 0)",
+			"sidebar-border": "oklch(1 0 0 / 10%)",
+			"sidebar-ring": "oklch(0.556 0 0)",
+		},
+	},
+	radius: {
+		DEFAULT: "0.625rem",
+		sm: "calc(0.625rem - 4px)",
+		md: "calc(0.625rem - 2px)",
+		lg: "0.625rem",
+		xl: "calc(0.625rem + 4px)",
+	},
+	font: {
+		sans: '"DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+		mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+	},
+	size: {
+		"2xs": {
+			fontSize: "0.6875rem",
+			lineHeight: "1rem",
+		},
+	},
+};
+
+export default tokens;

package/tailwind-v3.cjs

@@ -0,0 +1,75 @@
+// GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/tokens.json.
+//
+// Tailwind v3 adapter: a preset whose theme.extend references the custom properties in
+// tokens.css, so `bg-brand`, `text-rising`, `rounded-lg`, `text-2xs` resolve to the
+// tokens. Load tokens.css on the page and add to tailwind.config:
+//   presets: [require("@letterstory/design/tailwind-v3")], darkMode: "class"
+// Opacity modifiers (bg-brand/50) do not apply to var() colours in v3; use color-mix().
+module.exports = {
+	theme: {
+		extend: {
+			colors: {
+				brand: "var(--brand)",
+				"brand-foreground": "var(--brand-foreground)",
+				"brand-light": "var(--brand-light)",
+				"brand-text": "var(--brand-text)",
+				"accent-peach": "var(--accent-peach)",
+				"accent-peach-hover": "var(--accent-peach-hover)",
+				"accent-mint": "var(--accent-mint)",
+				rising: "var(--rising)",
+				falling: "var(--falling)",
+				warning: "var(--warning)",
+				background: "var(--background)",
+				foreground: "var(--foreground)",
+				card: "var(--card)",
+				"card-foreground": "var(--card-foreground)",
+				popover: "var(--popover)",
+				"popover-foreground": "var(--popover-foreground)",
+				primary: "var(--primary)",
+				"primary-foreground": "var(--primary-foreground)",
+				secondary: "var(--secondary)",
+				"secondary-foreground": "var(--secondary-foreground)",
+				muted: "var(--muted)",
+				"muted-foreground": "var(--muted-foreground)",
+				accent: "var(--accent)",
+				"accent-foreground": "var(--accent-foreground)",
+				destructive: "var(--destructive)",
+				border: "var(--border)",
+				input: "var(--input)",
+				ring: "var(--ring)",
+				"chart-1": "var(--chart-1)",
+				"chart-2": "var(--chart-2)",
+				"chart-3": "var(--chart-3)",
+				"chart-4": "var(--chart-4)",
+				"chart-5": "var(--chart-5)",
+				sidebar: "var(--sidebar)",
+				"sidebar-foreground": "var(--sidebar-foreground)",
+				"sidebar-primary": "var(--sidebar-primary)",
+				"sidebar-primary-foreground": "var(--sidebar-primary-foreground)",
+				"sidebar-accent": "var(--sidebar-accent)",
+				"sidebar-accent-foreground": "var(--sidebar-accent-foreground)",
+				"sidebar-border": "var(--sidebar-border)",
+				"sidebar-ring": "var(--sidebar-ring)",
+			},
+			borderRadius: {
+				DEFAULT: "var(--radius)",
+				sm: "var(--radius-sm)",
+				md: "var(--radius-md)",
+				lg: "var(--radius-lg)",
+				xl: "var(--radius-xl)",
+			},
+			fontFamily: {
+				sans: "var(--font-sans)",
+				mono: "var(--font-mono)",
+			},
+			fontSize: {
+				"2xs": [
+					"var(--font-size-2xs)",
+					{
+						lineHeight: "var(--line-height-2xs)",
+					},
+				],
+			},
+		},
+	},
+};

package/tailwind-v4.css

@@ -0,0 +1,58 @@
+/* GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/tokens.json.
+ *
+ * Tailwind v4 adapter: maps the custom properties in tokens.css onto Tailwind theme
+ * keys, so `bg-brand`, `text-rising`, `rounded-lg`, `text-2xs` resolve to the
+ * tokens. Import tokens.css first, then this file, after `@import "tailwindcss"`.
+ * `inline` so utilities emit the var() reference and follow the .dark switch.
+ * Fonts are not mapped here: tokens.css sets --font-sans / --font-mono under
+ * Tailwind's own names.
+ */
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-brand: var(--brand);
+	--color-brand-foreground: var(--brand-foreground);
+	--color-brand-light: var(--brand-light);
+	--color-brand-text: var(--brand-text);
+	--color-accent-peach: var(--accent-peach);
+	--color-accent-peach-hover: var(--accent-peach-hover);
+	--color-accent-mint: var(--accent-mint);
+	--color-rising: var(--rising);
+	--color-falling: var(--falling);
+	--color-warning: var(--warning);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+	--text-2xs: 0.6875rem;
+	--text-2xs--line-height: 1rem;
+}

package/themes.d.ts

@@ -0,0 +1,91 @@
+// GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/themes.json.
+//
+// The phantom theme registry, typed with the literal unions the data implies, so a
+// consumer's `theme` field is checked against the registry rather than `string`.
+
+/** The families the theme picker groups themes under. */
+export type PhantomBlogThemeGroup = "baseline" | "publication" | "brand" | "business" | "technology";
+
+/** Every theme Lettersprite's THEME env var selects. */
+export type PhantomBlogTheme =
+	| "sleek"
+	| "classic"
+	| "minimal"
+	| "magazine"
+	| "midnight"
+	| "gazette"
+	| "dispatch"
+	| "metro"
+	| "review"
+	| "signal"
+	| "current"
+	| "ledger"
+	| "atelier"
+	| "noir"
+	| "chronicle"
+	| "verdure"
+	| "couture"
+	| "atlas"
+	| "missive"
+	| "commit"
+	| "apex"
+	| "mint"
+	| "bloom"
+	| "cinder"
+	| "hearth"
+	| "harvest"
+	| "terra"
+	| "verve"
+	| "estate"
+	| "counsel"
+	| "clinic"
+	| "nook"
+	| "lumen"
+	| "cellar"
+	| "horizon"
+	| "derma"
+	| "meridian"
+	| "keystone"
+	| "vantage"
+	| "cobalt"
+	| "sterling"
+	| "momentum"
+	| "forum"
+	| "cadence"
+	| "evergreen"
+	| "beacon"
+	| "kernel"
+	| "graphite"
+	| "cortex"
+	| "cipher"
+	| "pulse"
+	| "apiwire"
+	| "bourse"
+	| "folio"
+	| "kiosk";
+
+export interface PhantomBlogThemeGroupEntry {
+	readonly id: PhantomBlogThemeGroup;
+	readonly label: string;
+}
+
+export interface PhantomBlogThemeEntry {
+	readonly value: PhantomBlogTheme;
+	readonly label: string;
+	readonly hint: string;
+	readonly group: PhantomBlogThemeGroup;
+	/**
+	 * Industry / aesthetic descriptors an identity generator matches against a site's
+	 * inferred subject to shortlist fitting themes. Purely advisory — every theme stays
+	 * user-selectable regardless of tags.
+	 */
+	readonly tags: readonly string[];
+}
+
+export interface PhantomThemeRegistry {
+	readonly groups: readonly PhantomBlogThemeGroupEntry[];
+	readonly themes: readonly PhantomBlogThemeEntry[];
+}
+
+declare const registry: PhantomThemeRegistry;
+export default registry;

package/themes.json

@@ -0,0 +1,411 @@
+{
+	"groups": [
+		{
+			"id": "baseline",
+			"label": "Clean & versatile"
+		},
+		{
+			"id": "publication",
+			"label": "Magazine fronts"
+		},
+		{
+			"id": "brand",
+			"label": "Brand & product"
+		},
+		{
+			"id": "business",
+			"label": "Business & corporate"
+		},
+		{
+			"id": "technology",
+			"label": "Technology"
+		}
+	],
+	"themes": [
+		{
+			"value": "sleek",
+			"label": "Sleek",
+			"hint": "Clean, modern, versatile",
+			"group": "baseline",
+			"tags": ["tech", "saas", "startup", "modern", "versatile"]
+		},
+		{
+			"value": "classic",
+			"label": "Classic",
+			"hint": "Editorial serif, timeless",
+			"group": "baseline",
+			"tags": ["finance", "professional-services", "editorial", "timeless", "versatile"]
+		},
+		{
+			"value": "minimal",
+			"label": "Minimal",
+			"hint": "Bare, text-first",
+			"group": "baseline",
+			"tags": ["design", "writing", "essay", "understated", "versatile"]
+		},
+		{
+			"value": "magazine",
+			"label": "Magazine",
+			"hint": "Bold, image-forward",
+			"group": "baseline",
+			"tags": ["media", "consumer", "culture", "bold", "versatile"]
+		},
+		{
+			"value": "midnight",
+			"label": "Midnight",
+			"hint": "Dark mode, high contrast",
+			"group": "baseline",
+			"tags": ["developer", "security", "gaming", "crypto", "dark"]
+		},
+		{
+			"value": "gazette",
+			"label": "Gazette",
+			"hint": "Broadsheet, paper-of-record serif",
+			"group": "publication",
+			"tags": ["news", "policy", "b2b", "authoritative", "serif"]
+		},
+		{
+			"value": "dispatch",
+			"label": "Dispatch",
+			"hint": "Tech-news feed",
+			"group": "publication",
+			"tags": ["tech", "startup", "developer", "news"]
+		},
+		{
+			"value": "metro",
+			"label": "Metro",
+			"hint": "Bold asymmetric culture mosaic",
+			"group": "publication",
+			"tags": ["culture", "urban", "creative", "media", "bold"]
+		},
+		{
+			"value": "review",
+			"label": "Review",
+			"hint": "Refined longform column",
+			"group": "publication",
+			"tags": ["longform", "essay", "academic", "consulting", "refined"]
+		},
+		{
+			"value": "signal",
+			"label": "Signal",
+			"hint": "Vivid tech-culture hero grid",
+			"group": "publication",
+			"tags": ["tech", "media", "consumer", "vivid"]
+		},
+		{
+			"value": "current",
+			"label": "Current",
+			"hint": "High-contrast electric grotesque",
+			"group": "publication",
+			"tags": ["fashion", "culture", "creative", "bold"]
+		},
+		{
+			"value": "ledger",
+			"label": "Ledger",
+			"hint": "Business / markets desk",
+			"group": "publication",
+			"tags": ["finance", "markets", "fintech", "b2b", "professional"]
+		},
+		{
+			"value": "atelier",
+			"label": "Atelier",
+			"hint": "Warm-paper lifestyle quarterly",
+			"group": "publication",
+			"tags": ["lifestyle", "craft", "hospitality", "warm"]
+		},
+		{
+			"value": "noir",
+			"label": "Noir",
+			"hint": "Dark neon terminal",
+			"group": "publication",
+			"tags": ["developer", "security", "crypto", "gaming", "dark"]
+		},
+		{
+			"value": "chronicle",
+			"label": "Chronicle",
+			"hint": "Authoritative politics + economics",
+			"group": "publication",
+			"tags": ["policy", "economics", "legal", "authoritative"]
+		},
+		{
+			"value": "verdure",
+			"label": "Verdure",
+			"hint": "Nutrition & wellness pinboard",
+			"group": "brand",
+			"tags": ["nutrition", "wellness", "health", "fitness", "green"]
+		},
+		{
+			"value": "couture",
+			"label": "Couture",
+			"hint": "High-fashion magazine cover",
+			"group": "brand",
+			"tags": ["fashion", "luxury", "beauty"]
+		},
+		{
+			"value": "atlas",
+			"label": "Atlas",
+			"hint": "Travel & exploration gallery",
+			"group": "brand",
+			"tags": ["travel", "outdoors", "hospitality", "exploration"]
+		},
+		{
+			"value": "missive",
+			"label": "Missive",
+			"hint": "Personal newsletter digest",
+			"group": "brand",
+			"tags": ["newsletter", "personal", "community", "writing"]
+		},
+		{
+			"value": "commit",
+			"label": "Commit",
+			"hint": "Engineering changelog timeline",
+			"group": "brand",
+			"tags": ["developer", "engineering", "saas", "technical"]
+		},
+		{
+			"value": "apex",
+			"label": "Apex",
+			"hint": "Athletic performance, dark cinematic",
+			"group": "brand",
+			"tags": ["fitness", "sports", "performance", "dark"]
+		},
+		{
+			"value": "mint",
+			"label": "Mint",
+			"hint": "Consumer fintech, rounded grid",
+			"group": "brand",
+			"tags": ["fintech", "consumer", "finance", "friendly"]
+		},
+		{
+			"value": "bloom",
+			"label": "Bloom",
+			"hint": "Beauty editorial, blush grid",
+			"group": "brand",
+			"tags": ["beauty", "skincare", "lifestyle", "soft"]
+		},
+		{
+			"value": "cinder",
+			"label": "Cinder",
+			"hint": "Gaming & esports, neon mosaic",
+			"group": "brand",
+			"tags": ["gaming", "esports", "entertainment", "dark"]
+		},
+		{
+			"value": "hearth",
+			"label": "Hearth",
+			"hint": "Interior design & architecture",
+			"group": "brand",
+			"tags": ["interior-design", "architecture", "real-estate", "warm"]
+		},
+		{
+			"value": "harvest",
+			"label": "Harvest",
+			"hint": "Food & recipe mosaic",
+			"group": "brand",
+			"tags": ["food", "recipes", "hospitality", "consumer"]
+		},
+		{
+			"value": "terra",
+			"label": "Terra",
+			"hint": "Sustainability & climate longform",
+			"group": "brand",
+			"tags": ["sustainability", "climate", "nonprofit", "green"]
+		},
+		{
+			"value": "verve",
+			"label": "Verve",
+			"hint": "Music & pop culture mosaic",
+			"group": "brand",
+			"tags": ["music", "pop-culture", "entertainment", "bold"]
+		},
+		{
+			"value": "estate",
+			"label": "Estate",
+			"hint": "Luxury real estate hero",
+			"group": "brand",
+			"tags": ["real-estate", "luxury", "professional"]
+		},
+		{
+			"value": "counsel",
+			"label": "Counsel",
+			"hint": "Professional-services thought leadership",
+			"group": "brand",
+			"tags": ["legal", "consulting", "professional-services", "b2b"]
+		},
+		{
+			"value": "clinic",
+			"label": "Clinic",
+			"hint": "Healthcare & biotech feed",
+			"group": "brand",
+			"tags": ["healthcare", "biotech", "medical", "clean"]
+		},
+		{
+			"value": "nook",
+			"label": "Nook",
+			"hint": "Parenting & family, cozy grid",
+			"group": "brand",
+			"tags": ["parenting", "family", "education", "cozy"]
+		},
+		{
+			"value": "lumen",
+			"label": "Lumen",
+			"hint": "Science & ideas feature feed",
+			"group": "brand",
+			"tags": ["science", "research", "education", "clean"]
+		},
+		{
+			"value": "cellar",
+			"label": "Cellar",
+			"hint": "Craft coffee & beverage journal",
+			"group": "brand",
+			"tags": ["coffee", "beverage", "craft", "hospitality"]
+		},
+		{
+			"value": "horizon",
+			"label": "Horizon",
+			"hint": "B2B SaaS product marketing, glossy gradient",
+			"group": "brand",
+			"tags": ["saas", "b2b", "tech", "product-marketing"]
+		},
+		{
+			"value": "derma",
+			"label": "Derma",
+			"hint": "Editorial skin/beauty, Caslon serif headlines",
+			"group": "brand",
+			"tags": ["beauty", "skincare", "wellness", "editorial", "serif"]
+		},
+		{
+			"value": "meridian",
+			"label": "Meridian",
+			"hint": "Management-consulting column, brass serif",
+			"group": "business",
+			"tags": ["consulting", "management", "professional-services", "b2b", "serif"]
+		},
+		{
+			"value": "keystone",
+			"label": "Keystone",
+			"hint": "Financial-services feed",
+			"group": "business",
+			"tags": ["finance", "financial-services", "banking", "b2b", "professional"]
+		},
+		{
+			"value": "vantage",
+			"label": "Vantage",
+			"hint": "B2B SaaS product grid",
+			"group": "business",
+			"tags": ["saas", "b2b", "product", "tech", "professional"]
+		},
+		{
+			"value": "cobalt",
+			"label": "Cobalt",
+			"hint": "Enterprise cloud & IT, dark",
+			"group": "business",
+			"tags": ["cloud", "enterprise", "it", "infrastructure", "dark"]
+		},
+		{
+			"value": "sterling",
+			"label": "Sterling",
+			"hint": "Private banking & wealth column",
+			"group": "business",
+			"tags": ["wealth", "private-banking", "finance", "luxury", "professional"]
+		},
+		{
+			"value": "momentum",
+			"label": "Momentum",
+			"hint": "Marketing & brand, glossy",
+			"group": "business",
+			"tags": ["marketing", "brand", "advertising", "growth", "bold"]
+		},
+		{
+			"value": "forum",
+			"label": "Forum",
+			"hint": "Economics & policy broadsheet",
+			"group": "business",
+			"tags": ["economics", "policy", "think-tank", "b2b", "authoritative"]
+		},
+		{
+			"value": "cadence",
+			"label": "Cadence",
+			"hint": "People & future-of-work grid",
+			"group": "business",
+			"tags": ["hr", "future-of-work", "workplace", "people", "b2b"]
+		},
+		{
+			"value": "evergreen",
+			"label": "Evergreen",
+			"hint": "Sustainability & ESG grid",
+			"group": "business",
+			"tags": ["sustainability", "esg", "climate", "corporate", "green"]
+		},
+		{
+			"value": "beacon",
+			"label": "Beacon",
+			"hint": "Professional-services feed",
+			"group": "business",
+			"tags": ["professional-services", "consulting", "advisory", "b2b"]
+		},
+		{
+			"value": "kernel",
+			"label": "Kernel",
+			"hint": "Developer & open-source, minimal mono",
+			"group": "technology",
+			"tags": ["developer", "open-source", "engineering", "technical", "minimal"]
+		},
+		{
+			"value": "graphite",
+			"label": "Graphite",
+			"hint": "Dark engineering writing, minimal",
+			"group": "technology",
+			"tags": ["engineering", "developer", "writing", "technical", "dark", "minimal"]
+		},
+		{
+			"value": "cortex",
+			"label": "Cortex",
+			"hint": "AI / ML research lab, glossy",
+			"group": "technology",
+			"tags": ["ai", "ml", "research", "data-science", "tech"]
+		},
+		{
+			"value": "cipher",
+			"label": "Cipher",
+			"hint": "Cybersecurity feed, alert red",
+			"group": "technology",
+			"tags": ["security", "cybersecurity", "infosec", "enterprise", "dark"]
+		},
+		{
+			"value": "pulse",
+			"label": "Pulse",
+			"hint": "DevOps & observability mosaic",
+			"group": "technology",
+			"tags": ["devops", "observability", "sre", "infrastructure", "tech"]
+		},
+		{
+			"value": "apiwire",
+			"label": "API Wire",
+			"hint": "Dark developer gallery, sci-fi type",
+			"group": "technology",
+			"tags": ["developer", "api", "integration", "security", "dark", "technical"]
+		},
+		{
+			"value": "bourse",
+			"label": "Bourse",
+			"hint": "Creative Boom-style VC/finance magazine, stock photos",
+			"group": "business",
+			"tags": ["venture", "vc", "finance", "startup", "editorial", "magazine"]
+		},
+		{
+			"value": "folio",
+			"label": "Folio",
+			"hint": "grafill-style design magazine, immersive photo articles",
+			"group": "business",
+			"tags": ["finance", "accounting", "b2b", "saas", "editorial", "design"]
+		},
+		{
+			"value": "kiosk",
+			"label": "Kiosk",
+			"hint": "Taste-style warm editorial newsstand, riso covers",
+			"group": "publication",
+			"tags": ["editorial", "magazine", "tech", "b2b", "warm", "design"]
+		}
+	]
+}

package/tokens.css

@@ -0,0 +1,111 @@
+/* GENERATED by design/scripts/build.mjs — do not edit by hand. Source: design/tokens.json.
+ *
+ * Letterstory design tokens as CSS custom properties. Framework-neutral: load this
+ * stylesheet, then map the variables with the adapter for your framework
+ * (tailwind-v4.css, tailwind-v3.cjs, styled.js) or read them with var() directly.
+ * Dark values switch on a `.dark` class on an ancestor (next-themes attribute="class").
+ *
+ * --font-sans and --font-mono deliberately use Tailwind v4's own theme names so the
+ * font-sans / font-mono utilities and preflight's html default pick them up with no
+ * @theme mapping; radii and the type scale are mirrored in each adapter instead.
+ */
+:root {
+	--radius: 0.625rem;
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	/* BRAND COLOR — the single source (#093959). To rebrand, change color.light.brand in tokens.json. */
+	--brand: oklch(0.332 0.074 243.6);
+	/* text/icons on a --brand background */
+	--brand-foreground: oklch(0.985 0 0);
+	/* derived from --brand (same hue, adjusted lightness/chroma) */
+	--brand-light: oklch(from var(--brand) 0.82 0.06 h);
+	/* naked brand text/icons on light surfaces */
+	--brand-text: var(--brand);
+	/* "Burnt Peach" — the product accent */
+	--accent-peach: #ee724a;
+	--accent-peach-hover: #e2643b;
+	--accent-mint: #9af2e0;
+	/* emerald — up / good */
+	--rising: oklch(0.72 0.17 155);
+	/* red — down / at risk */
+	--falling: oklch(0.63 0.21 25);
+	/* amber — needs attention, not yet at risk */
+	--warning: oklch(0.75 0.16 75);
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--font-sans:
+		"DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+		"Noto Color Emoji";
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+	--font-size-2xs: 0.6875rem;
+	--line-height-2xs: 1rem;
+}
+
+.dark {
+	/* --brand and --brand-foreground inherit from :root; only the on-dark variants are lightened */
+	--brand-light: oklch(from var(--brand) 0.5 0.09 h);
+	--brand-text: oklch(from var(--brand) 0.72 0.1 h);
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	/* Burnt Peach (#EE724A) */
+	--chart-4: oklch(0.692 0.162 38.8);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}

package/tokens.json

@@ -0,0 +1,117 @@
+{
+	"color": {
+		"light": {
+			"brand": "oklch(0.332 0.074 243.6)",
+			"brand-foreground": "oklch(0.985 0 0)",
+			"brand-light": "oklch(from var(--brand) 0.82 0.06 h)",
+			"brand-text": "var(--brand)",
+			"accent-peach": "#ee724a",
+			"accent-peach-hover": "#e2643b",
+			"accent-mint": "#9af2e0",
+			"rising": "oklch(0.72 0.17 155)",
+			"falling": "oklch(0.63 0.21 25)",
+			"warning": "oklch(0.75 0.16 75)",
+			"background": "oklch(1 0 0)",
+			"foreground": "oklch(0.145 0 0)",
+			"card": "oklch(1 0 0)",
+			"card-foreground": "oklch(0.145 0 0)",
+			"popover": "oklch(1 0 0)",
+			"popover-foreground": "oklch(0.145 0 0)",
+			"primary": "oklch(0.205 0 0)",
+			"primary-foreground": "oklch(0.985 0 0)",
+			"secondary": "oklch(0.97 0 0)",
+			"secondary-foreground": "oklch(0.205 0 0)",
+			"muted": "oklch(0.97 0 0)",
+			"muted-foreground": "oklch(0.556 0 0)",
+			"accent": "oklch(0.97 0 0)",
+			"accent-foreground": "oklch(0.205 0 0)",
+			"destructive": "oklch(0.577 0.245 27.325)",
+			"border": "oklch(0.922 0 0)",
+			"input": "oklch(0.922 0 0)",
+			"ring": "oklch(0.708 0 0)",
+			"chart-1": "oklch(0.646 0.222 41.116)",
+			"chart-2": "oklch(0.6 0.118 184.704)",
+			"chart-3": "oklch(0.398 0.07 227.392)",
+			"chart-4": "oklch(0.828 0.189 84.429)",
+			"chart-5": "oklch(0.769 0.188 70.08)",
+			"sidebar": "oklch(0.985 0 0)",
+			"sidebar-foreground": "oklch(0.145 0 0)",
+			"sidebar-primary": "oklch(0.205 0 0)",
+			"sidebar-primary-foreground": "oklch(0.985 0 0)",
+			"sidebar-accent": "oklch(0.97 0 0)",
+			"sidebar-accent-foreground": "oklch(0.205 0 0)",
+			"sidebar-border": "oklch(0.922 0 0)",
+			"sidebar-ring": "oklch(0.708 0 0)"
+		},
+		"dark": {
+			"brand-light": "oklch(from var(--brand) 0.5 0.09 h)",
+			"brand-text": "oklch(from var(--brand) 0.72 0.1 h)",
+			"background": "oklch(0.145 0 0)",
+			"foreground": "oklch(0.985 0 0)",
+			"card": "oklch(0.205 0 0)",
+			"card-foreground": "oklch(0.985 0 0)",
+			"popover": "oklch(0.205 0 0)",
+			"popover-foreground": "oklch(0.985 0 0)",
+			"primary": "oklch(0.922 0 0)",
+			"primary-foreground": "oklch(0.205 0 0)",
+			"secondary": "oklch(0.269 0 0)",
+			"secondary-foreground": "oklch(0.985 0 0)",
+			"muted": "oklch(0.269 0 0)",
+			"muted-foreground": "oklch(0.708 0 0)",
+			"accent": "oklch(0.269 0 0)",
+			"accent-foreground": "oklch(0.985 0 0)",
+			"destructive": "oklch(0.704 0.191 22.216)",
+			"border": "oklch(1 0 0 / 10%)",
+			"input": "oklch(1 0 0 / 15%)",
+			"ring": "oklch(0.556 0 0)",
+			"chart-1": "oklch(0.488 0.243 264.376)",
+			"chart-2": "oklch(0.696 0.17 162.48)",
+			"chart-3": "oklch(0.769 0.188 70.08)",
+			"chart-4": "oklch(0.692 0.162 38.8)",
+			"chart-5": "oklch(0.645 0.246 16.439)",
+			"sidebar": "oklch(0.205 0 0)",
+			"sidebar-foreground": "oklch(0.985 0 0)",
+			"sidebar-primary": "oklch(0.488 0.243 264.376)",
+			"sidebar-primary-foreground": "oklch(0.985 0 0)",
+			"sidebar-accent": "oklch(0.269 0 0)",
+			"sidebar-accent-foreground": "oklch(0.985 0 0)",
+			"sidebar-border": "oklch(1 0 0 / 10%)",
+			"sidebar-ring": "oklch(0.556 0 0)"
+		}
+	},
+	"radius": {
+		"DEFAULT": "0.625rem",
+		"sm": "calc(var(--radius) - 4px)",
+		"md": "calc(var(--radius) - 2px)",
+		"lg": "var(--radius)",
+		"xl": "calc(var(--radius) + 4px)"
+	},
+	"font": {
+		"sans": [
+			"DM Sans",
+			"ui-sans-serif",
+			"system-ui",
+			"sans-serif",
+			"Apple Color Emoji",
+			"Segoe UI Emoji",
+			"Segoe UI Symbol",
+			"Noto Color Emoji"
+		],
+		"mono": [
+			"ui-monospace",
+			"SFMono-Regular",
+			"Menlo",
+			"Monaco",
+			"Consolas",
+			"Liberation Mono",
+			"Courier New",
+			"monospace"
+		]
+	},
+	"size": {
+		"2xs": {
+			"fontSize": "0.6875rem",
+			"lineHeight": "1rem"
+		}
+	}
+}