@monoes/monodesign 1.0.0

package/skill/scripts/pin.mjs

@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+// Pattern adapted from impeccable (Apache-2.0) — rebranded for monomind
+/**
+ * Pin/unpin sub-commands as standalone skill shortcuts.
+ *
+ * Usage:
+ *   node <scripts_path>/pin.mjs pin <command>
+ *   node <scripts_path>/pin.mjs unpin <command>
+ *
+ * `pin audit` creates a lightweight audit skill that redirects to Monodesign's audit workflow.
+ * `unpin audit` removes that shortcut.
+ *
+ * The script discovers harness directories (.claude/skills, .cursor/skills, etc.)
+ * in the project root and creates/removes the pin in all of them.
+ */
+
+import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs';
+import { basename, join, resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// All known harness directories
+const HARNESS_DIRS = [
+  '.claude', '.cursor', '.gemini', '.codex', '.agents',
+  '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev',
+];
+
+const CODEX_HARNESSES = new Set(['.codex', '.agents']);
+
+// Valid sub-command names
+const VALID_COMMANDS = [
+  'craft', 'init', 'extract', 'document', 'shape',
+  'critique', 'audit',
+  'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'live',
+  'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive',
+  'clarify', 'adapt', 'optimize',
+];
+
+// Marker to identify pinned skills (so unpin doesn't delete user skills)
+const PIN_MARKER = '<!-- monodesign-pinned-skill -->';
+
+/**
+ * Walk up from startDir to find a project root.
+ */
+function findProjectRoot(startDir = process.cwd()) {
+  let dir = resolve(startDir);
+  while (dir !== '/') {
+    if (
+      existsSync(join(dir, 'package.json')) ||
+      existsSync(join(dir, '.git')) ||
+      existsSync(join(dir, 'skills-lock.json'))
+    ) {
+      return dir;
+    }
+    const parent = resolve(dir, '..');
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return resolve(startDir);
+}
+
+/**
+ * Find harness skill directories that have an monodesign skill installed.
+ */
+function findHarnessDirs(projectRoot) {
+  const dirs = [];
+  for (const harness of HARNESS_DIRS) {
+    const skillsDir = join(projectRoot, harness, 'skills');
+    // Only pin in harness dirs that already have monodesign installed
+    const monodesignDir = join(skillsDir, 'monodesign');
+    if (existsSync(monodesignDir) || existsSync(join(skillsDir, 'i-monodesign'))) {
+      dirs.push(skillsDir);
+    }
+  }
+  return dirs;
+}
+
+/**
+ * Load command metadata (descriptions for pinned skills).
+ */
+function loadCommandMetadata() {
+  const metadataPath = join(__dirname, 'command-metadata.json');
+  if (existsSync(metadataPath)) {
+    return JSON.parse(readFileSync(metadataPath, 'utf-8'));
+  }
+  return {};
+}
+
+/**
+ * Generate a pinned skill's SKILL.md content.
+ */
+function commandPrefixForSkillsDir(skillsDir) {
+  return CODEX_HARNESSES.has(basename(dirname(skillsDir))) ? '$' : '/';
+}
+
+function generatePinnedSkill(command, metadata, commandPrefix) {
+  const desc = metadata[command]?.description || `Shortcut for ${commandPrefix}monodesign ${command}.`;
+  const hint = metadata[command]?.argumentHint || '[target]';
+
+  return `---
+name: ${command}
+description: "${desc}"
+argument-hint: "${hint}"
+user-invocable: true
+---
+
+${PIN_MARKER}
+
+This is a pinned shortcut for \`${commandPrefix}monodesign ${command}\`.
+
+Invoke ${commandPrefix}monodesign ${command}, passing along any arguments provided here, and follow its instructions.
+`;
+}
+
+/**
+ * Pin a command: create shortcut skill in all harness dirs.
+ */
+function pin(command, projectRoot) {
+  const metadata = loadCommandMetadata();
+  const harnessDirs = findHarnessDirs(projectRoot);
+
+  if (harnessDirs.length === 0) {
+    console.log('No harness directories with monodesign installed found.');
+    return false;
+  }
+
+  let created = 0;
+
+  for (const skillsDir of harnessDirs) {
+    const commandPrefix = commandPrefixForSkillsDir(skillsDir);
+    const content = generatePinnedSkill(command, metadata, commandPrefix);
+    // Check if skill already exists (and isn't a pin)
+    const skillDir = join(skillsDir, command);
+    if (existsSync(skillDir)) {
+      const existingMd = join(skillDir, 'SKILL.md');
+      if (existsSync(existingMd)) {
+        const existing = readFileSync(existingMd, 'utf-8');
+        if (!existing.includes(PIN_MARKER)) {
+          console.log(`  SKIP: ${skillDir} (non-pinned skill already exists)`);
+          continue;
+        }
+      }
+    }
+
+    mkdirSync(skillDir, { recursive: true });
+    writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8');
+    console.log(`  + ${skillDir}`);
+    created++;
+  }
+
+  if (created > 0) {
+    console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`);
+    console.log('Use the pinned command directly in each harness.');
+  }
+
+  return created > 0;
+}
+
+/**
+ * Unpin a command: remove shortcut skill from all harness dirs.
+ */
+function unpin(command, projectRoot) {
+  const harnessDirs = findHarnessDirs(projectRoot);
+  let removed = 0;
+
+  for (const skillsDir of harnessDirs) {
+    const skillDir = join(skillsDir, command);
+    if (!existsSync(skillDir)) continue;
+
+    const skillMd = join(skillDir, 'SKILL.md');
+    if (!existsSync(skillMd)) continue;
+
+    // Safety: only remove if it's a pinned skill
+    const content = readFileSync(skillMd, 'utf-8');
+    if (!content.includes(PIN_MARKER)) {
+      console.log(`  SKIP: ${skillDir} (not a pinned skill)`);
+      continue;
+    }
+
+    rmSync(skillDir, { recursive: true, force: true });
+    console.log(`  - ${skillDir}`);
+    removed++;
+  }
+
+  if (removed > 0) {
+    console.log(`\nUnpinned '${command}' from ${removed} location(s).`);
+    console.log(`Use Monodesign's '${command}' workflow directly to access it.`);
+  } else {
+    console.log(`No pinned '${command}' shortcut found.`);
+  }
+
+  return removed > 0;
+}
+
+// --- CLI ---
+const [,, action, command] = process.argv;
+
+if (!action || !command) {
+  console.log('Usage: node pin.mjs <pin|unpin> <command>');
+  console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`);
+  process.exit(1);
+}
+
+if (action !== 'pin' && action !== 'unpin') {
+  console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`);
+  process.exit(1);
+}
+
+if (!VALID_COMMANDS.includes(command)) {
+  console.error(`Unknown command: ${command}`);
+  console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`);
+  process.exit(1);
+}
+
+const root = findProjectRoot();
+
+if (action === 'pin') {
+  pin(command, root);
+} else {
+  unpin(command, root);
+}

package/src/antipatterns.ts

@@ -0,0 +1,164 @@
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { extname } from 'node:path';
+
+export type AntipatternCategory = 'slop' | 'quality' | 'performance' | 'accessibility';
+
+export interface AntipatternFinding {
+  id: string;
+  category: AntipatternCategory;
+  name: string;
+  severity: 'error' | 'warning' | 'info';
+  message: string;
+  file?: string;
+  line?: number;
+}
+
+export interface DetectionResult {
+  findings: AntipatternFinding[];
+  fileCount: number;
+  durationMs: number;
+}
+
+// Shape of the bundled engine (cli/engine/detect-antipatterns.mjs).
+interface DetectorEngine {
+  detectText: (content: string, filePath: string, options?: Record<string, unknown>) => RawFinding[];
+  detectHtml: (filePath: string, options?: Record<string, unknown>) => Promise<RawFinding[]>;
+  detectUrl: (url: string, options?: Record<string, unknown>) => Promise<RawFinding[]>;
+  walkDir: (dir: string) => string[];
+  ANTIPATTERNS: Array<{ id: string; category?: string; severity?: string }>;
+}
+
+interface RawFinding {
+  antipattern?: string;
+  id?: string;
+  name?: string;
+  description?: string;
+  severity?: string;
+  file?: string;
+  line?: number;
+  snippet?: string;
+}
+
+// Typed as plain string so tsc emits a true dynamic import instead of trying
+// to type-resolve the untyped .mjs engine module.
+const ENGINE_SPECIFIER: string = '../cli/engine/detect-antipatterns.mjs';
+
+let enginePromise: Promise<DetectorEngine | null> | undefined;
+
+async function loadEngine(): Promise<DetectorEngine | null> {
+  enginePromise ??= import(ENGINE_SPECIFIER).then(
+    (mod) => mod as unknown as DetectorEngine,
+    () => null,
+  );
+  return enginePromise;
+}
+
+/** True when the bundled detection engine can be loaded. */
+export async function detectorAvailable(): Promise<boolean> {
+  return (await loadEngine()) !== null;
+}
+
+const HTML_EXTENSIONS = new Set(['.html', '.htm']);
+
+function mapSeverity(severity: string | undefined): AntipatternFinding['severity'] {
+  if (severity === 'error') return 'error';
+  if (severity === 'advisory' || severity === 'info') return 'info';
+  return 'warning';
+}
+
+function toFinding(raw: RawFinding, categoryById: Map<string, string>): AntipatternFinding {
+  const id = String(raw.antipattern ?? raw.id ?? '');
+  return {
+    id,
+    category: (categoryById.get(id) ?? 'quality') as AntipatternCategory,
+    name: String(raw.name ?? id),
+    severity: mapSeverity(raw.severity),
+    message: String(raw.description ?? raw.snippet ?? ''),
+    file: raw.file ? String(raw.file) : undefined,
+    line: raw.line ? Number(raw.line) : undefined,
+  };
+}
+
+async function detectFile(engine: DetectorEngine, filePath: string): Promise<RawFinding[]> {
+  if (HTML_EXTENSIONS.has(extname(filePath).toLowerCase())) {
+    return engine.detectHtml(filePath);
+  }
+  return engine.detectText(readFileSync(filePath, 'utf-8'), filePath);
+}
+
+/**
+ * Run antipattern detection on a path (file, directory, or URL) using the
+ * bundled detection engine (cli/engine/detect-antipatterns.mjs). URL targets
+ * require the optional puppeteer dependency.
+ */
+export async function detectAntipatterns(target: string): Promise<DetectionResult> {
+  const engine = await loadEngine();
+  if (!engine) {
+    throw new Error(
+      'The monodesign detection engine could not be loaded. ' +
+        'Reinstall @monoes/monodesign (its cli/engine/ directory is missing or its dependencies are not installed).',
+    );
+  }
+
+  const start = Date.now();
+  const categoryById = new Map(
+    engine.ANTIPATTERNS.map((ap) => [ap.id, ap.category ?? 'quality']),
+  );
+
+  let raw: RawFinding[] = [];
+  let fileCount = 0;
+
+  if (/^https?:\/\//i.test(target)) {
+    raw = await engine.detectUrl(target);
+    fileCount = 1;
+  } else if (existsSync(target) && statSync(target).isDirectory()) {
+    const files = engine.walkDir(target);
+    fileCount = files.length;
+    for (const file of files) {
+      raw.push(...(await detectFile(engine, file)));
+    }
+  } else if (existsSync(target)) {
+    raw = await detectFile(engine, target);
+    fileCount = 1;
+  } else {
+    throw new Error(`Target not found: ${target}`);
+  }
+
+  return {
+    findings: raw.map((f) => toFinding(f, categoryById)),
+    fileCount,
+    durationMs: Date.now() - start,
+  };
+}
+
+/**
+ * Format findings as a human-readable string for display in agent output.
+ */
+export function formatFindings(result: DetectionResult): string {
+  if (result.findings.length === 0) {
+    return `No antipatterns detected in ${result.fileCount} file(s). (${result.durationMs}ms)`;
+  }
+
+  const byCategory = result.findings.reduce<Record<string, AntipatternFinding[]>>((acc, f) => {
+    (acc[f.category] ??= []).push(f);
+    return acc;
+  }, {});
+
+  const lines: string[] = [
+    `${result.findings.length} finding(s) in ${result.fileCount} file(s) — ${result.durationMs}ms`,
+    '',
+  ];
+
+  for (const [cat, items] of Object.entries(byCategory)) {
+    lines.push(`[${cat.toUpperCase()}]`);
+    for (const f of items) {
+      const loc = f.file ? `  ${f.file}${f.line ? `:${f.line}` : ''}` : '';
+      lines.push(`  ${f.severity === 'error' ? '✗' : '⚠'} ${f.name}`);
+      lines.push(`    ${f.message}`);
+      if (loc) lines.push(loc);
+    }
+    lines.push('');
+  }
+
+  return lines.join('\n');
+}

package/src/index.ts

@@ -0,0 +1,13 @@
+/**
+ * monodesign — frontend design intelligence for AI agents
+ *
+ * Provides:
+ *   - Design tokens (OKLCH color system, spacing, motion, shadows)
+ *   - Antipattern detection (bundled engine at cli/engine/)
+ *   - Design rule constants
+ *   - Skill invocation helpers
+ */
+
+export * from './tokens.js';
+export * from './antipatterns.js';
+export * from './rules.js';

package/src/rules.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared design rules — the invariants every monodesign generation must satisfy.
+ * These mirror the "Absolute bans" and "Shared design laws" in the skill.
+ */
+
+export const ABSOLUTE_BANS = [
+  {
+    id: 'side-stripe',
+    rule: 'No side-stripe borders',
+    description:
+      'border-left or border-right > 1px as a colored accent on cards/list items/callouts is never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.',
+  },
+  {
+    id: 'gradient-text',
+    rule: 'No gradient text',
+    description:
+      'background-clip:text with a gradient is decorative and never meaningful. Use a single solid color; emphasis via weight or size.',
+  },
+  {
+    id: 'glassmorphism-default',
+    rule: 'No glassmorphism as default',
+    description:
+      'Blurs and glass cards used decoratively. Rare and purposeful, or nothing.',
+  },
+  {
+    id: 'hero-metric-template',
+    rule: 'No hero-metric template',
+    description:
+      'Big number + small label + supporting stats + gradient accent is a SaaS cliché. Find a distinctive composition instead.',
+  },
+  {
+    id: 'identical-card-grid',
+    rule: 'No identical card grids',
+    description:
+      'Same-sized cards with icon + heading + text, repeated endlessly, signals a lack of hierarchy. Vary size, weight, or content structure.',
+  },
+  {
+    id: 'modal-first',
+    rule: 'Modal is not the first thought',
+    description:
+      'Modals are usually laziness. Exhaust inline / progressive disclosure alternatives first.',
+  },
+] as const;
+
+export const COLOR_STRATEGIES = ['restrained', 'committed', 'full-palette', 'drenched'] as const;
+export type ColorStrategy = (typeof COLOR_STRATEGIES)[number];
+
+export const SHADOW_MAX_ALPHA = 0.15;
+
+/** Validates a shadow string does not exceed the max alpha. */
+export function shadowAlphaComplies(shadow: string): boolean {
+  const matches = shadow.match(/rgba?\([^)]+\)/g) ?? [];
+  for (const m of matches) {
+    const parts = m.replace(/rgba?\(/, '').replace(')', '').split(',').map(Number);
+    const alpha = parts.length === 4 ? parts[3] : 1;
+    if (alpha > SHADOW_MAX_ALPHA) return false;
+  }
+  return true;
+}
+
+export type Register = 'brand' | 'product';
+
+/** Infer register from surface description heuristic. */
+export function inferRegister(surface: string): Register {
+  const lower = surface.toLowerCase();
+  const brandKeywords = ['landing', 'marketing', 'campaign', 'homepage', 'portfolio', 'blog'];
+  const productKeywords = ['dashboard', 'admin', 'app', 'settings', 'onboard', 'console'];
+
+  if (brandKeywords.some((k) => lower.includes(k))) return 'brand';
+  if (productKeywords.some((k) => lower.includes(k))) return 'product';
+  return 'product'; // safe default
+}

package/src/tokens.css

@@ -0,0 +1,116 @@
+/* monodesign — design token system
+ * OKLCH color space, 8px grid, expo easing
+ * Apache 2.0 — pattern adapted from impeccable (Apache-2.0), rebranded for monomind
+ */
+
+:root {
+  /* ─── Typography ─────────────────────────────── */
+  --font-display: 'Cormorant Garamond', Georgia, serif;
+  --font-body: 'Instrument Sans', system-ui, sans-serif;
+  --font-mono: 'Space Grotesk', monospace;
+  --font-size-xs: 0.75rem;   /* 12px */
+  --font-size-sm: 0.875rem;  /* 14px */
+  --font-size-base: 1rem;    /* 16px */
+  --font-size-lg: 1.125rem;  /* 18px */
+  --font-size-xl: 1.25rem;   /* 20px */
+  --font-size-2xl: 1.5rem;   /* 24px */
+  --font-size-3xl: 1.875rem; /* 30px */
+  --font-size-4xl: 2.25rem;  /* 36px */
+  --font-size-5xl: 3rem;     /* 48px */
+  --font-size-6xl: 3.75rem;  /* 60px */
+  --font-size-7xl: 4.5rem;   /* 72px */
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.375;
+  --line-height-base: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* ─── Spacing (8px base grid) ────────────────── */
+  --space-1:  4px;
+  --space-2:  8px;   /* xs */
+  --space-3:  12px;
+  --space-4:  16px;  /* sm */
+  --space-5:  20px;
+  --space-6:  24px;  /* md */
+  --space-7:  28px;
+  --space-8:  32px;  /* lg */
+  --space-10: 40px;
+  --space-12: 48px;  /* xl */
+  --space-16: 64px;
+  --space-20: 80px;  /* 2xl */
+  --space-24: 96px;
+  --space-30: 120px; /* 3xl */
+
+  /* ─── Motion ─────────────────────────────────── */
+  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out — primary */
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);     /* sharper variant */
+  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
+  --duration-instant: 0s;
+  --duration-fast:    0.15s; /* color / opacity */
+  --duration-base:    0.3s;  /* default transforms */
+  --duration-slow:    0.6s;  /* orchestrated entrances */
+  --duration-slower:  0.8s;
+  --duration-slowest: 1.2s;
+
+  /* ─── Colors (OKLCH) ─────────────────────────── */
+  /* Neutrals */
+  --color-ink:      oklch(10% 0 0);             /* primary text */
+  --color-charcoal: oklch(25% 0 0);             /* secondary text */
+  --color-ash:      oklch(55% 0 0);             /* tertiary / meta */
+  --color-mist:     oklch(92% 0 0);             /* hairline borders */
+  --color-cream:    oklch(96% 0.005 350);        /* warm page background */
+  --color-paper:    oklch(98% 0 0);             /* card / elevated surfaces */
+  --color-white:    oklch(99.5% 0 0);           /* near-white (never pure) */
+
+  /* Accent — Editorial Magenta (use ≤10% of screen in restrained palette) */
+  --color-accent:       oklch(60% 0.25 350);
+  --color-accent-hover: oklch(52% 0.25 350);
+  --color-accent-dim:   oklch(60% 0.25 350 / 0.15);
+  --color-accent-soft:  oklch(60% 0.25 350 / 0.25);
+  --color-accent-text:  oklch(45% 0.22 350);   /* darker for body-on-white */
+
+  /* Tonal ramp — Editorial Magenta */
+  --color-accent-1:  oklch(22% 0.15 350);
+  --color-accent-2:  oklch(33% 0.20 350);
+  --color-accent-3:  oklch(42% 0.23 350);
+  --color-accent-4:  oklch(52% 0.25 350);
+  --color-accent-5:  oklch(60% 0.25 350); /* base */
+  --color-accent-6:  oklch(68% 0.22 350);
+  --color-accent-7:  oklch(76% 0.18 350);
+  --color-accent-8:  oklch(84% 0.12 350);
+  --color-accent-9:  oklch(94% 0.05 350);
+
+  /* Command category tints (product register) */
+  --cat-build-bg:     #fdf2f8;  --cat-build-border:    #ec4899;
+  --cat-evaluate-bg:  #fdf4ff;  --cat-evaluate-border: #d946ef;
+  --cat-refine-bg:    #eff6ff;  --cat-refine-border:   #3b82f6;
+  --cat-enhance-bg:   #fffbeb;  --cat-enhance-border:  #f59e0b;
+  --cat-fix-bg:       #f0fdf4;  --cat-fix-border:      #22c55e;
+  --cat-iterate-bg:   #f5f5f4;  --cat-iterate-border:  #78716c;
+
+  /* ─── Shadows ─────────────────────────────────── */
+  /* Max 0.15 alpha. No heavy drop shadows. */
+  --shadow-none:   none;
+  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md:     0 4px 24px -4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-lg:     0 20px 40px rgba(0, 0, 0, 0.08);
+  --shadow-accent: 0 20px 60px oklch(60% 0.25 350 / 0.15);
+
+  /* ─── Border radius ──────────────────────────── */
+  --radius-none: 0;
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
+  --radius-full: 9999px;
+
+  /* ─── Z-index ─────────────────────────────────── */
+  --z-below:   -1;
+  --z-base:     0;
+  --z-raised:   1;
+  --z-overlay: 10;
+  --z-modal:   20;
+  --z-toast:   30;
+  --z-top:     40;
+}

package/src/tokens.ts

@@ -0,0 +1,99 @@
+/** Design tokens as typed JS constants — mirrors tokens.css */
+
+export const fontFamily = {
+  display: "'Cormorant Garamond', Georgia, serif",
+  body: "'Instrument Sans', system-ui, sans-serif",
+  mono: "'Space Grotesk', monospace",
+} as const;
+
+export const fontSize = {
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+  '6xl': '3.75rem',
+  '7xl': '4.5rem',
+} as const;
+
+export const spacing = {
+  1: '4px',
+  2: '8px',
+  3: '12px',
+  4: '16px',
+  5: '20px',
+  6: '24px',
+  7: '28px',
+  8: '32px',
+  10: '40px',
+  12: '48px',
+  16: '64px',
+  20: '80px',
+  24: '96px',
+  30: '120px',
+} as const;
+
+export const easing = {
+  out: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  outQuint: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  in: 'cubic-bezier(0.4, 0, 1, 1)',
+} as const;
+
+export const duration = {
+  instant: '0s',
+  fast: '0.15s',
+  base: '0.3s',
+  slow: '0.6s',
+  slower: '0.8s',
+  slowest: '1.2s',
+} as const;
+
+/** OKLCH color palette */
+export const color = {
+  ink: 'oklch(10% 0 0)',
+  charcoal: 'oklch(25% 0 0)',
+  ash: 'oklch(55% 0 0)',
+  mist: 'oklch(92% 0 0)',
+  cream: 'oklch(96% 0.005 350)',
+  paper: 'oklch(98% 0 0)',
+  white: 'oklch(99.5% 0 0)',
+  accent: 'oklch(60% 0.25 350)',
+  accentHover: 'oklch(52% 0.25 350)',
+  accentDim: 'oklch(60% 0.25 350 / 0.15)',
+  accentSoft: 'oklch(60% 0.25 350 / 0.25)',
+  accentText: 'oklch(45% 0.22 350)',
+} as const;
+
+export const accentScale = {
+  1: 'oklch(22% 0.15 350)',
+  2: 'oklch(33% 0.20 350)',
+  3: 'oklch(42% 0.23 350)',
+  4: 'oklch(52% 0.25 350)',
+  5: 'oklch(60% 0.25 350)',
+  6: 'oklch(68% 0.22 350)',
+  7: 'oklch(76% 0.18 350)',
+  8: 'oklch(84% 0.12 350)',
+  9: 'oklch(94% 0.05 350)',
+} as const;
+
+export const shadow = {
+  none: 'none',
+  sm: '0 1px 3px rgba(0, 0, 0, 0.06)',
+  md: '0 4px 24px -4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06)',
+  lg: '0 20px 40px rgba(0, 0, 0, 0.08)',
+  accent: '0 20px 60px oklch(60% 0.25 350 / 0.15)',
+} as const;
+
+export const radius = {
+  none: '0',
+  sm: '4px',
+  md: '8px',
+  lg: '12px',
+  xl: '16px',
+  full: '9999px',
+} as const;