Initial commit: NetsKey ERP (copper & cream redesign)

2026-10-02 23:48:11 -07:00
commit 3dc6eef18d
86 changed files with 9176 additions and 0 deletions
@@ -0,0 +1,93 @@
+import type { Config } from "tailwindcss";
+
+// "Vessel" — multi-branch water & eggs ERP.
+//
+// DESIGN SYSTEM v2 — "Copper & Cream".
+// Re-skinned to the reference art direction: a warm off-white/cream canvas
+// (sand.*) paired with a deep charcoal (depth.900/950), and a single
+// signature copper->warm-brown gradient as the primary action accent
+// (flow.*). High-contrast, soft, premium "fintech" feel: generous rounded
+// corners (12-20px), pill buttons, subtle glassmorphism on dark panels.
+//
+// Token NAMES are intentionally unchanged (depth/flow/cash/confirm/alert/
+// sand) so every existing component's className strings keep working —
+// only the underlying hex values were restyled.
+const config: Config = {
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        // Warm charcoal neutral ramp — doubles as light-admin-page text/
+        // borders (100-500) and as the dark login/terminal backgrounds
+        // (700-950, anchored on the #0C0C0C charcoal from the reference).
+        depth: {
+          100: "#F0ECE7",
+          200: "#E2DAD1",
+          300: "#CFC4B8",
+          400: "#A89A8B",
+          500: "#837567",
+          600: "#5C5248",
+          700: "#3A332D",
+          800: "#1A1715",
+          900: "#0F0E0D",
+          950: "#0C0C0C",
+        },
+        // Primary interactive accent — copper -> warm brown.
+        flow: {
+          400: "#E7A684",
+          500: "#D47854", // primary interactive accent (copper)
+          600: "#BE6646",
+          700: "#A3644F", // warm brown (gradient end)
+          violet: "#B86B4E", // (kept name) paired with flow.500 for gradients/glows
+          violetDeep: "#8A4A38",
+        },
+        cash: { 400: "#FCD34D", 500: "#F59E0B", 600: "#B45309", 700: "#92400E" },
+        confirm: { 400: "#34D399", 500: "#10B981", 600: "#047857" },
+        alert: { 400: "#FB7185", 500: "#F43F5E", 600: "#BE123C", 700: "#9F1239" },
+        // Cream canvas family from the reference image.
+        sand: { 50: "#F5F2EF", 100: "#EFEAE4", 200: "#E4DCD3" },
+      },
+      fontFamily: {
+        display: ["var(--font-display)", "sans-serif"],
+        body: ["var(--font-body)", "sans-serif"],
+        mono: ["var(--font-mono)", "monospace"],
+      },
+      borderRadius: {
+        xl2: "1.25rem",
+        "3xl": "1.75rem",
+      },
+      boxShadow: {
+        soft: "0 4px 20px -4px rgba(12,12,12,0.12)",
+        glow: "0 0 40px -8px rgba(212,120,84,0.40), 0 0 24px -8px rgba(163,100,79,0.28)",
+      },
+      keyframes: {
+        ripple: {
+          "0%": { transform: "scale(0.8)", opacity: "0.6" },
+          "100%": { transform: "scale(2.4)", opacity: "0" },
+        },
+        "fade-up": {
+          "0%": { opacity: "0", transform: "translateY(8px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        drift: {
+          "0%, 100%": { transform: "translate(0, 0) scale(1)" },
+          "33%": { transform: "translate(3%, -4%) scale(1.05)" },
+          "66%": { transform: "translate(-2%, 3%) scale(0.97)" },
+        },
+        "spin-slow": {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+      },
+      animation: {
+        ripple: "ripple 1.6s ease-out infinite",
+        "fade-up": "fade-up 0.35s ease-out",
+        drift: "drift 14s ease-in-out infinite",
+        "drift-slow": "drift 22s ease-in-out infinite reverse",
+        "spin-slow": "spin-slow 20s linear infinite",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;