feat: initial @jason/ui-kit — tokens, preset, components, motion, blocks, Impeccable

2026-07-16 00:36:53 -05:00
commit b75012525d
36 changed files with 1324 additions and 0 deletions
@@ -0,0 +1,46 @@
+/**
+ * Design tokens — the single source of truth for the brand.
+ * These mirror the CSS variables in styles/globals.css and feed the Tailwind preset.
+ * Change the brand once, here, and every app that consumes the preset updates.
+ */
+export const tokens = {
+  color: {
+    // Neutrals are tinted (warm), never pure black/gray — an Impeccable anti-slop rule.
+    bg: "#232022",
+    surface: "#2b282a",
+    surface2: "#333031",
+    border: "#3a3638",
+    text: "#F5F1EC",
+    muted: "#A99F97",
+    // Brand — warm gold on warm dark.
+    brand: "#DCBB4F",
+    brandBright: "#F5CD15",
+    brandDark: "#998643",
+    // Semantic
+    success: "#3F9E6A",
+    warning: "#DCBB4F",
+    danger: "#C0562F",
+    info: "#5B8DB8",
+  },
+  radius: { sm: "6px", md: "10px", lg: "14px", xl: "20px" },
+  font: {
+    display: '"Montserrat", system-ui, sans-serif',
+    sans: '"Open Sans", system-ui, sans-serif',
+    mono: '"JetBrains Mono", ui-monospace, monospace',
+  },
+  // Layered, tinted shadows — depth instead of a flat plane.
+  shadow: {
+    sm: "0 1px 2px 0 rgb(20 16 18 / 0.20)",
+    md: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
+    lg: "0 12px 32px -8px rgb(20 16 18 / 0.40), 0 4px 8px -4px rgb(20 16 18 / 0.24)",
+    glow: "0 0 0 1px rgb(220 187 79 / 0.20), 0 8px 28px -6px rgb(220 187 79 / 0.28)",
+  },
+  // Motion — smooth, never bouncy/elastic (Impeccable anti-slop rule).
+  ease: {
+    out: "cubic-bezier(0.22, 1, 0.36, 1)",
+    inOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+  },
+  duration: { fast: "120ms", base: "180ms", slow: "320ms" },
+} as const;
+
+export type Tokens = typeof tokens;