@vadimcomanescu/nadicode-design-system 2.0.0

package/scripts/ds-update.mjs

@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+
+import { execSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+const PACKAGE_NAME = "@vadimcomanescu/nadicode-design-system";
+
+function run(command) {
+  execSync(command, { cwd: process.cwd(), stdio: "inherit" });
+}
+
+function readPackageJson() {
+  const packageJsonPath = join(process.cwd(), "package.json");
+  if (!existsSync(packageJsonPath)) {
+    throw new Error("package.json must exist before ds:update can run.");
+  }
+
+  return JSON.parse(readFileSync(packageJsonPath, "utf8"));
+}
+
+function readSeedDependency() {
+  const packageJson = readPackageJson();
+  const dependency = packageJson.dependencies?.[PACKAGE_NAME];
+  if (dependency) {
+    return { spec: dependency, isDevDependency: false };
+  }
+
+  const devDependency = packageJson.devDependencies?.[PACKAGE_NAME];
+  if (devDependency) {
+    return { spec: devDependency, isDevDependency: true };
+  }
+
+  throw new Error("package.json must declare @vadimcomanescu/nadicode-design-system before ds:update can run.");
+}
+
+const { spec, isDevDependency } = readSeedDependency();
+const installTarget = `${PACKAGE_NAME}@${spec}`;
+const packageManagerCommand = existsSync(join(process.cwd(), "pnpm-lock.yaml"))
+  ? `pnpm add ${isDevDependency ? "-D " : ""}${JSON.stringify(installTarget)}`
+  : existsSync(join(process.cwd(), "yarn.lock"))
+    ? `yarn add ${isDevDependency ? "--dev " : ""}${JSON.stringify(installTarget)}`
+    : existsSync(join(process.cwd(), "bun.lock"))
+      ? `bun add ${isDevDependency ? "-d " : ""}${JSON.stringify(installTarget)}`
+      : `npm install ${isDevDependency ? "-D " : ""}${JSON.stringify(installTarget)}`;
+
+run(packageManagerCommand);
+run(`node ${JSON.stringify(join(process.cwd(), "node_modules", "@vadimcomanescu/nadicode-design-system", "scripts", "sync-seed-skill.mjs"))} ${JSON.stringify(process.cwd())}`);
+
+console.log("Done. Run npm run ds:check to verify.");

package/scripts/sync-seed-skill.mjs

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+const targetArg = process.argv[2];
+
+if (!targetArg) {
+  console.error("Usage: node scripts/sync-seed-skill.mjs <consumer-root>");
+  process.exit(1);
+}
+
+const repoRoot = resolve(import.meta.dirname, "..");
+const sourceDir = join(repoRoot, ".agents", "skills", "seed");
+const targetRoot = resolve(targetArg);
+const targetDir = join(targetRoot, ".agents", "skills", "seed");
+const syncedPaths = [
+  "SKILL.md",
+  "contract.md",
+  "intent-map.md",
+  "recipes",
+  "references",
+];
+
+if (!existsSync(sourceDir)) {
+  console.error(`Seed skill source is missing: ${sourceDir}`);
+  process.exit(1);
+}
+
+function sanitizeConsumerMarkdown(content) {
+  return content
+    .split("\n")
+    .filter((line) => !/^- `src\/components\//.test(line.trim()))
+    .join("\n");
+}
+
+function copyEntry(sourcePath, targetPath) {
+  if (!existsSync(sourcePath)) {
+    console.error(`Seed skill sync source is missing: ${sourcePath}`);
+    process.exit(1);
+  }
+
+  const sourceStat = statSync(sourcePath);
+  if (sourceStat.isDirectory()) {
+    mkdirSync(targetPath, { recursive: true });
+    for (const childName of readdirSync(sourcePath)) {
+      copyEntry(join(sourcePath, childName), join(targetPath, childName));
+    }
+    return;
+  }
+
+  mkdirSync(join(targetPath, ".."), { recursive: true });
+  const content = readFileSync(sourcePath, "utf8");
+  writeFileSync(targetPath, sanitizeConsumerMarkdown(content));
+}
+
+rmSync(targetDir, { recursive: true, force: true });
+mkdirSync(join(targetRoot, ".agents", "skills"), { recursive: true });
+
+for (const relativePath of syncedPaths) {
+  copyEntry(join(sourceDir, relativePath), join(targetDir, relativePath));
+}
+
+console.log(`Seed skill synced to ${targetDir} (${syncedPaths.length} curated path(s))`);

package/src/lib/tokens.config.js

@@ -0,0 +1,561 @@
+// Arctic Glow — 12-step Radix-style color scales
+// Steps 1-2: app bg · 3-5: component bg · 6-8: borders · 9-10: solid · 11-12: text
+export const colorScales = {
+  dark: {
+    gray: {
+      1:  '#101114',
+      2:  '#16191D',
+      3:  '#202328',
+      4:  '#292D33',
+      5:  '#33373E',
+      6:  '#45494F',
+      7:  '#5B5E61',
+      8:  '#6E7782',
+      9:  '#89919B',
+      10: '#C4C6CC',
+      11: '#E0E1E5',
+      12: '#F4F4F6',
+    },
+    grayAlpha: {
+      1:  'rgba(200, 220, 240, 0.02)',
+      2:  'rgba(200, 220, 240, 0.04)',
+      3:  'rgba(200, 220, 240, 0.06)',
+      4:  'rgba(200, 220, 240, 0.09)',
+      5:  'rgba(200, 220, 240, 0.12)',
+      6:  'rgba(200, 220, 240, 0.16)',
+      7:  'rgba(200, 220, 240, 0.22)',
+      8:  'rgba(200, 220, 240, 0.32)',
+      9:  'rgba(200, 220, 240, 0.45)',
+      10: 'rgba(200, 220, 240, 0.66)',
+      11: 'rgba(200, 220, 240, 0.82)',
+      12: 'rgba(200, 220, 240, 0.97)',
+    },
+    gold: {
+      1:  '#0E0C08',
+      2:  '#141009',
+      3:  '#211A0C',
+      4:  '#2B2210',
+      5:  '#352A14',
+      6:  '#47371A',
+      7:  '#5E4820',
+      8:  '#7F6128',
+      9:  '#E8A020',
+      10: '#D4911A',
+      11: '#F5C96A',
+      12: '#FAE8C0',
+    },
+    red: {
+      1:  '#191113',
+      2:  '#201316',
+      3:  '#3B1219',
+      4:  '#50141D',
+      5:  '#661823',
+      6:  '#7E1F2D',
+      7:  '#9E2B3A',
+      8:  '#C73A4B',
+      9:  '#E5484D',
+      10: '#EB5E5E',
+      11: '#F39090',
+      12: '#FAD1D4',
+    },
+    green: {
+      1:  '#0D1512',
+      2:  '#111C17',
+      3:  '#13291F',
+      4:  '#163727',
+      5:  '#1A4530',
+      6:  '#1F563A',
+      7:  '#266E48',
+      8:  '#2F8E5A',
+      9:  '#3DD68C',
+      10: '#5CE4A0',
+      11: '#8CEDB8',
+      12: '#C8F5DD',
+    },
+    amber: {
+      1:  '#16120B',
+      2:  '#1D1710',
+      3:  '#2C2011',
+      4:  '#3D2B10',
+      5:  '#4F370F',
+      6:  '#63440E',
+      7:  '#7E5711',
+      8:  '#A87318',
+      9:  '#F5C742',
+      10: '#FFDB5C',
+      11: '#FFE588',
+      12: '#FFF3CC',
+    },
+    blue: {
+      1:  '#0F1520',
+      2:  '#131B2E',
+      3:  '#15243B',
+      4:  '#192E4C',
+      5:  '#1D3A5E',
+      6:  '#224973',
+      7:  '#2A5E92',
+      8:  '#347AB8',
+      9:  '#3E96F4',
+      10: '#5EAAF7',
+      11: '#8EC3FA',
+      12: '#CEE1FC',
+    },
+    violet: {
+      1:  '#14111F',
+      2:  '#1B1528',
+      3:  '#241C38',
+      4:  '#2E224A',
+      5:  '#38295E',
+      6:  '#443375',
+      7:  '#553F94',
+      8:  '#6B54B5',
+      9:  '#8B5CF6',
+      10: '#9E77F8',
+      11: '#BAA0FA',
+      12: '#E2D5FD',
+    },
+  },
+  light: {
+    gray: {
+      1:  '#F7F7F8',
+      2:  '#ECEDEE',
+      3:  '#DEE1E3',
+      4:  '#CDD2D5',
+      5:  '#B7BDC2',
+      6:  '#9AA5AC',
+      7:  '#7B8993',
+      8:  '#5F6D77',
+      9:  '#4A565E',
+      10: '#384147',
+      11: '#262D31',
+      12: '#181D20',
+    },
+    grayAlpha: {
+      1:  'rgba(0, 30, 60, 0.02)',
+      2:  'rgba(0, 30, 60, 0.04)',
+      3:  'rgba(0, 30, 60, 0.07)',
+      4:  'rgba(0, 30, 60, 0.11)',
+      5:  'rgba(0, 30, 60, 0.15)',
+      6:  'rgba(0, 30, 60, 0.20)',
+      7:  'rgba(0, 30, 60, 0.29)',
+      8:  'rgba(0, 30, 60, 0.41)',
+      9:  'rgba(0, 30, 60, 0.58)',
+      10: 'rgba(0, 30, 60, 0.66)',
+      11: 'rgba(0, 30, 60, 0.76)',
+      12: 'rgba(0, 30, 60, 0.90)',
+    },
+    gold: {
+      1:  '#FDFAF3',
+      2:  '#FBF4E0',
+      3:  '#F5E8C0',
+      4:  '#EEDDA0',
+      5:  '#E5CE7A',
+      6:  '#D4B050',
+      7:  '#C09028',
+      8:  '#B87E18',
+      9:  '#B07D18',
+      10: '#9C6E12',
+      11: '#7A5210',
+      12: '#3D2805',
+    },
+    red: {
+      1:  '#FFF5F5',
+      2:  '#FFE8E8',
+      3:  '#FECDD4',
+      4:  '#FDAFB7',
+      5:  '#FA8F9A',
+      6:  '#F16C78',
+      7:  '#E34D5B',
+      8:  '#CE3644',
+      9:  '#CE2C3B',
+      10: '#B82535',
+      11: '#9C1E2E',
+      12: '#5C111A',
+    },
+    green: {
+      1:  '#F2FDF6',
+      2:  '#E3FAEC',
+      3:  '#C2F2D6',
+      4:  '#9DE8BC',
+      5:  '#76D9A0',
+      6:  '#4EC785',
+      7:  '#30B26B',
+      8:  '#1D9B55',
+      9:  '#1B9450',
+      10: '#147C42',
+      11: '#0F6636',
+      12: '#08401F',
+    },
+    amber: {
+      1:  '#FEFCF0',
+      2:  '#FDF8E0',
+      3:  '#FCEFC0',
+      4:  '#FAE39A',
+      5:  '#F5D46E',
+      6:  '#E8C044',
+      7:  '#D4A825',
+      8:  '#B88E15',
+      9:  '#D09E10',
+      10: '#B08510',
+      11: '#866510',
+      12: '#4A380A',
+    },
+    blue: {
+      1:  '#F3F8FE',
+      2:  '#E6F0FD',
+      3:  '#C8DFFB',
+      4:  '#A6CBF7',
+      5:  '#80B4F3',
+      6:  '#5999EC',
+      7:  '#377FE2',
+      8:  '#2068D0',
+      9:  '#2E78E5',
+      10: '#2362C7',
+      11: '#1B4FA5',
+      12: '#0F3060',
+    },
+    violet: {
+      1:  '#F9F6FE',
+      2:  '#F1EBFD',
+      3:  '#E3D4FC',
+      4:  '#D2B9FA',
+      5:  '#BF9CF7',
+      6:  '#A87CF2',
+      7:  '#9060EA',
+      8:  '#7A4ADD',
+      9:  '#7C3AED',
+      10: '#6A2ED2',
+      11: '#5624B3',
+      12: '#351468',
+    },
+  },
+};
+
+// Bloom — 12-step warm color scales (light-only)
+// Steps 1-2: app bg · 3-5: component bg · 6-8: borders · 9-10: solid · 11-12: text
+export const bloomScales = {
+  sand: {
+    1:  '#FEFDFB', 2:  '#FBF9F6', 3:  '#F5F1EC', 4:  '#EDE8E1',
+    5:  '#E4DED5', 6:  '#D9D1C7', 7:  '#C4B9AC', 8:  '#A89B8C',
+    9:  '#887968', 10: '#72624F', 11: '#574938', 12: '#2D2318',
+  },
+  coral: {
+    1:  '#FFFBFA', 2:  '#FFF1EE', 3:  '#FFE0D9', 4:  '#FFCBBF',
+    5:  '#FFB3A2', 6:  '#F99882', 7:  '#ED7B60', 8:  '#DC6347',
+    9:  '#E8573A', 10: '#D04A2F', 11: '#A83A25', 12: '#5C1E12',
+  },
+  lavender: {
+    1:  '#FBF8FF', 2:  '#F5EFFE', 3:  '#EAE0FD', 4:  '#DCCEFB',
+    5:  '#CCB8F9', 6:  '#B99DF5', 7:  '#A47DEF', 8:  '#9060EA',
+    9:  '#8B5CF6', 10: '#7642E0', 11: '#6338C4', 12: '#3B1F75',
+  },
+  mint: {
+    1:  '#F2FDF9', 2:  '#E0FAF0', 3:  '#C2F2DF', 4:  '#9DE8CA',
+    5:  '#76D9B2', 6:  '#4EC79A', 7:  '#30B27E', 8:  '#1D9B63',
+    9:  '#3DD6A0', 10: '#2FBA88', 11: '#1A8A64', 12: '#0A4F39',
+  },
+  peach: {
+    1:  '#FFFCF5', 2:  '#FFF8E8', 3:  '#FFEFC8', 4:  '#FFE3A0',
+    5:  '#FFD574', 6:  '#F5C34A', 7:  '#E0AD2E', 8:  '#C49518',
+    9:  '#F5A623', 10: '#D98E14', 11: '#A56C0F', 12: '#5C3C08',
+  },
+  rose: {
+    1:  '#FFF8F9', 2:  '#FFEEF1', 3:  '#FFDCE2', 4:  '#FFC5CE',
+    5:  '#FFABB8', 6:  '#F98E9E', 7:  '#ED6F82', 8:  '#DC5568',
+    9:  '#E8566D', 10: '#D0445A', 11: '#A83347', 12: '#5C1A28',
+  },
+  sky: {
+    1:  '#F5FAFF', 2:  '#EAF3FE', 3:  '#D2E6FD', 4:  '#B5D6FB',
+    5:  '#94C3F8', 6:  '#70AEF4', 7:  '#5099EE', 8:  '#3585E5',
+    9:  '#5AB4F5', 10: '#3E9AE5', 11: '#2874C0', 12: '#144170',
+  },
+};
+
+// Semantic color tokens mapped from scales
+export const colorTokens = {
+  dark: {
+    background: '#101114',       // gray.1
+    surface: {
+      DEFAULT: '#16191D',        // gray.2
+      hover: '#202328',          // gray.3
+      active: '#292D33',         // gray.4
+      raised: '#33373E',         // gray.5
+    },
+    border: {
+      DEFAULT: '#45494F',        // gray.6
+      hover: '#5B5E61',          // gray.7
+      subtle: 'rgba(200, 220, 240, 0.06)',  // grayAlpha.3
+      'subtle-hover': 'rgba(200, 220, 240, 0.12)', // grayAlpha.5
+    },
+    primary: {
+      DEFAULT: '#F4F4F6',        // gray.12
+      foreground: '#101114',     // gray.1
+    },
+    secondary: {
+      DEFAULT: '#292D33',        // gray.4
+      foreground: '#F4F4F6',     // gray.12
+    },
+    accent: {
+      DEFAULT: '#E8A020',        // gold.9
+      foreground: '#101114',     // gray.1
+    },
+    destructive: {
+      DEFAULT: '#E8444A',        // warmer crimson
+      foreground: '#FFFFFF',
+    },
+    success: {
+      DEFAULT: '#34D474',        // emerald
+      foreground: '#0D1512',     // green.1
+    },
+    warning: {
+      DEFAULT: '#F28C38',        // true orange
+      foreground: '#16120B',     // dark text
+    },
+    info: {
+      DEFAULT: '#4A9EF8',        // periwinkle-blue
+      foreground: '#0F1520',     // blue.1
+    },
+    muted: {
+      DEFAULT: '#292D33',        // gray.4
+      foreground: '#E0E1E5',     // gray.11
+    },
+    slider: {
+      fill: 'rgba(255, 255, 255, 0.10)',
+      handle: '#FFFFFF',
+    },
+    overlay: '#000000',
+    text: {
+      primary: '#F4F4F6',        // gray.12
+      secondary: '#E0E1E5',      // gray.11
+      tertiary: '#C4C6CC',       // gray.10
+    },
+    focusRing: '#E8A020',        // gold.9
+    link: '#F5C96A',             // gold.11
+    input: '#292D33',            // gray.4
+    disabled: '#5B5E61',         // gray.7
+    disabledForeground: '#C4C6CC', // gray.10
+  },
+  light: {
+    background: '#F7F7F8',       // gray.1
+    surface: {
+      DEFAULT: '#ECEDEE',        // gray.2
+      hover: '#DEE1E3',          // gray.3
+      active: '#CDD2D5',         // gray.4
+      raised: '#ECEDEE',         // gray.2
+    },
+    border: {
+      DEFAULT: '#9AA5AC',        // gray.6
+      hover: '#7B8993',          // gray.7
+      subtle: 'rgba(0, 30, 60, 0.07)',    // grayAlpha.3
+      'subtle-hover': 'rgba(0, 30, 60, 0.15)', // grayAlpha.5
+    },
+    primary: {
+      DEFAULT: '#181D20',        // gray.12
+      foreground: '#F7F7F8',     // gray.1
+    },
+    secondary: {
+      DEFAULT: '#DEE1E3',        // gray.3
+      foreground: '#181D20',     // gray.12
+    },
+    accent: {
+      DEFAULT: '#8A5E08',        // dark gold
+      foreground: '#FFFFFF',
+    },
+    destructive: {
+      DEFAULT: '#C62832',        // warmer crimson
+      foreground: '#FFFFFF',
+    },
+    success: {
+      DEFAULT: '#1A8F4E',        // emerald
+      foreground: '#FFFFFF',
+    },
+    warning: {
+      DEFAULT: '#A84A08',        // true orange
+      foreground: '#FFFFFF',
+    },
+    info: {
+      DEFAULT: '#2970DC',        // periwinkle-blue
+      foreground: '#FFFFFF',
+    },
+    muted: {
+      DEFAULT: '#DEE1E3',        // gray.3
+      foreground: '#262D31',     // gray.11
+    },
+    slider: {
+      fill: 'rgba(0, 0, 0, 0.25)',
+      handle: '#FFFFFF',
+    },
+    overlay: '#000000',
+    text: {
+      primary: '#181D20',        // gray.12
+      secondary: '#262D31',      // gray.11
+      tertiary: '#384147',       // gray.10
+    },
+    focusRing: '#8A5E08',        // dark gold
+    link: '#7A5210',             // gold.11
+    input: '#DEE1E3',            // gray.3
+    disabled: '#9AA5AC',         // gray.6
+    disabledForeground: '#5F6D77', // gray.8
+  },
+  bloom: {
+    background: '#FEFDFB',         // sand.1 (warm white)
+    surface: {
+      DEFAULT: '#F5F1EC',          // sand.3 (cream)
+      hover: '#EDE8E1',            // sand.4
+      active: '#E4DED5',           // sand.5
+      raised: '#F5F1EC',           // sand.3
+    },
+    border: {
+      DEFAULT: '#D9D1C7',          // sand.6
+      hover: '#C4B9AC',            // sand.7
+      subtle: 'rgba(45, 35, 24, 0.07)',
+      'subtle-hover': 'rgba(45, 35, 24, 0.15)',
+    },
+    primary: {
+      DEFAULT: '#2D2318',          // sand.12 (warm ink)
+      foreground: '#FEFDFB',       // sand.1
+    },
+    secondary: {
+      DEFAULT: '#F5F1EC',          // sand.3
+      foreground: '#2D2318',       // sand.12
+    },
+    accent: {
+      DEFAULT: '#C3412A',          // coral.9 darkened for WCAG AA (5.03:1)
+      foreground: '#FFFFFF',
+    },
+    destructive: {
+      DEFAULT: '#C33C52',          // rose.9 darkened for WCAG AA (5.05:1)
+      foreground: '#FFFFFF',
+    },
+    success: {
+      DEFAULT: '#3DD6A0',          // mint.9
+      foreground: '#0A4F39',       // mint.12
+    },
+    warning: {
+      DEFAULT: '#F5A623',          // peach.9
+      foreground: '#5C3C08',       // peach.12
+    },
+    info: {
+      DEFAULT: '#5AB4F5',          // sky.9
+      foreground: '#144170',       // sky.12
+    },
+    muted: {
+      DEFAULT: '#F5F1EC',          // sand.3
+      foreground: '#574938',       // sand.11
+    },
+    slider: {
+      fill: 'rgba(45, 35, 24, 0.20)',
+      handle: '#FEFDFB',            // sand.1
+    },
+    overlay: '#2D2318',            // warm ink (not pure black)
+    text: {
+      primary: '#2D2318',          // sand.12 (warm ink)
+      secondary: '#574938',        // sand.11
+      tertiary: '#736453',         // sand.9 darkened for WCAG AA (5.62:1)
+    },
+    focusRing: '#8B5CF6',          // lavender.9
+    link: '#6338C4',               // lavender.11
+    input: '#F5F1EC',              // sand.3
+    disabled: '#D9D1C7',           // sand.6
+    disabledForeground: '#A89B8C', // sand.8
+  },
+};
+
+// Style-dependent non-color tokens
+export const styleTokens = {
+  arctic: {
+    radius: { sm: '4px', md: '8px', lg: '16px' },
+    shadows: {
+      'glow': '0 0 20px -5px rgba(255, 255, 255, 0.1)',
+      'glow-accent': '0 0 20px -5px rgba(232, 160, 32, 0.15)',
+    },
+    glass: {
+      saturate: 1.15,
+      brightness: 1.03,
+      panel:    { blur: '20px', bgOpacity: 0.30, borderOpacity: 0.10 },
+      floating: { blur: '28px', bgOpacity: 0.40, borderOpacity: 0.20 },
+      overlay:  { blur: '12px', bgOpacity: 0.30, borderOpacity: 0.10 },
+    },
+  },
+  bloom: {
+    radius: { sm: '8px', md: '14px', lg: '24px' },
+    shadows: {
+      'glow': '0 0 20px -5px rgba(195, 65, 42, 0.12)',
+      'glow-accent': '0 0 20px -5px rgba(139, 92, 246, 0.15)',
+      'soft': '0 2px 12px -2px rgba(45, 35, 24, 0.08)',
+      'lifted': '0 8px 30px -8px rgba(45, 35, 24, 0.12)',
+    },
+    glass: {
+      saturate: 1.08,
+      brightness: 1.01,
+      panel:    { blur: '20px', bgOpacity: 0.70, borderOpacity: 0.30 },
+      floating: { blur: '28px', bgOpacity: 0.60, borderOpacity: 0.20 },
+      overlay:  { blur: '12px', bgOpacity: 0.60, borderOpacity: 0.30 },
+    },
+  },
+};
+
+// Non-color tokens (theme-independent)
+export const tokens = {
+  // Keep colors for backward compatibility (using dark as default)
+  colors: colorTokens.dark,
+  typography: {
+    fontFamily: {
+      sans: ['var(--font-satoshi)', 'sans-serif'],
+    },
+    sizes: {
+      xs: '12px',
+      sm: '14px',
+      base: '16px',
+      lg: '20px',
+      xl: '24px',
+      '2xl': '32px',
+      '3xl': '48px',
+      '4xl': '64px',
+    }
+  },
+  radius: {
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    full: '9999px',
+  },
+  spacing: {
+    base: 4,
+    '4.5': '1.125rem',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
+    '3xl': '64px',
+  },
+  lineHeight: {
+    none: '1',
+    tight: '1.25',
+    snug: '1.375',
+    normal: '1.5',
+    relaxed: '1.625',
+    loose: '2',
+  },
+  letterSpacing: {
+    tighter: '-0.05em',
+    tight: '-0.025em',
+    normal: '0em',
+    wide: '0.025em',
+    wider: '0.05em',
+    widest: '0.1em',
+  },
+  borderWidth: {
+    none: '0px',
+    hairline: '0.5px',
+    thin: '1px',
+    base: '2px',
+    thick: '4px',
+  },
+  shadows: {
+    'glow': '0 0 20px -5px rgba(255, 255, 255, 0.1)',
+    'glow-accent': '0 0 20px -5px rgba(232, 160, 32, 0.15)',
+  }
+};