@consuma/design 0.1.0

package/README.md

@@ -0,0 +1,133 @@
+# @consuma/design
+
+The Consuma design system — **just the parts that need to be shared**.
+
+- Color & semantic tokens (CSS variables + JS exports)
+- Tailwind preset wired to those variables
+- Data-viz palettes (sentiment / sequential / categorical)
+- Brand components: `Logo`, `SentimentPill`
+
+Everything else (buttons, inputs, dialogs, etc.) belongs in your app via the
+[shadcn/ui CLI](https://ui.shadcn.com/docs/cli) — Consuma's CSS variables drive
+the look automatically, and your app owns the components.
+
+> Zero build step. The package ships its TypeScript source and is consumed
+> directly by Vite/Next/etc — change something and it shows up immediately.
+
+---
+
+## Install
+
+```bash
+npm install @consuma/design
+```
+
+## Wire it up (3 steps, ~30 sec)
+
+**1. Import the styles once, in your entry file**
+
+```ts
+// main.tsx, layout.tsx, _app.tsx, ...
+import "@consuma/design/styles.css";
+// (optional) extra dataviz CSS variables for chart libs
+import "@consuma/design/dataviz.css";
+```
+
+**2. Use the Tailwind preset**
+
+```ts
+// tailwind.config.ts
+import preset from "@consuma/design/tailwind-preset";
+
+export default {
+  presets: [preset],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@consuma/design/src/**/*.{ts,tsx}",
+  ],
+};
+```
+
+**3. Add shadcn components into your app**
+
+```bash
+npx shadcn@latest init   # accept defaults
+npx shadcn@latest add button card input dialog
+```
+
+They'll automatically pick up Consuma colors because shadcn reads the same
+CSS variables (`--background`, `--primary`, `--muted`, etc.) that
+`@consuma/design/styles.css` sets.
+
+## What's exported
+
+```ts
+import {
+  cn,           // clsx + tailwind-merge helper
+  tokens,       // typed JS access to all colors/space/radius/shadow
+  dataviz,      // chart palettes (sentiment, plum sequential, categorical)
+  pickEvenly,   // util for trimming sequential scales
+  Logo,
+  SentimentPill,
+} from "@consuma/design";
+```
+
+CSS variables you can use in custom CSS / inline styles:
+
+```
+--plum-50 … --plum-950
+--neutral-0 … --neutral-900
+--background  --foreground  --card  --primary  --secondary
+--muted       --accent      --border --ring
+--success     --warning     --info   --destructive
+--sentiment-positive --sentiment-negative --sentiment-neutral --sentiment-mixed
+--cv-div-1 … --cv-div-7    (sentiment diverging)
+--cv-seq-1 … --cv-seq-7    (plum sequential)
+--cv-cat-1 … --cv-cat-12   (categorical)
+```
+
+## Tailwind classes you get for free
+
+`bg-plum-600`, `text-primary`, `bg-card`, `border-border`, `text-success`, …
+plus all of shadcn's semantic names.
+
+## Updating tokens (the workflow)
+
+`src/tokens.ts` is the single source of truth.
+
+```bash
+# 1. Edit the value
+#    e.g. src/tokens.ts:  plum: { 600: "#5B3AAE" → "#6A45BE" }
+
+# 2. Regenerate styles.css
+npm run gen
+#    ✓ Wrote src/styles.css
+
+# 3. Done. Every consuming app picks it up on next reload.
+```
+
+What lives where:
+
+| File | Edit when… |
+|---|---|
+| `src/tokens.ts` | You want to change a **scale** value (e.g. plum-600 hue) |
+| `scripts/gen-styles.ts` (SEMANTIC block) | You want to **remap** semantic slots (e.g. `--primary: var(--plum-700)`) or change dark mode |
+| `src/tailwind-preset.js` | You want to expose a **new Tailwind utility** (e.g. `bg-citrus-500`) |
+| `src/dataviz.ts` | You want to add/edit a **chart palette** |
+
+Never edit `src/styles.css` directly — it's regenerated.
+
+## How the inheritance works (in 4 layers)
+
+1. **`tokens.ts`** — raw scale values (HEX) in TypeScript
+2. **`styles.css`** — CSS variables (`--plum-600: 91 58 174`) + semantic mapping (`--primary: var(--plum-600)`)
+3. **`tailwind-preset.js`** — exposes Tailwind utilities (`bg-primary`, `bg-plum-600`) that read those CSS vars
+4. **shadcn components in your app** — already use `bg-primary text-primary-foreground` etc.
+
+Drop in `styles.css` and the whole chain lights up. No component patches.
+
+## Adding a brand component to the package
+
+Only promote a component here when it's used in **2+ apps** with the same
+Consuma styling. Examples that earn their keep: `Logo`, `SentimentPill`,
+`MetricCard`, `ConfidenceCard`. App-specific layout doesn't.

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@consuma/design",
+  "version": "0.1.0",
+  "description": "Consuma design tokens — CSS variables, Tailwind preset, dataviz palettes, brand components.",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./dataviz.css": "./src/dataviz.css",
+    "./tailwind-preset": "./src/tailwind-preset.js",
+    "./tokens": "./src/tokens.ts",
+    "./dataviz": "./src/dataviz.ts"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "gen": "tsx scripts/gen-styles.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "tailwindcss": ">=3.4"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "tsx": "^4.20.6",
+    "typescript": "^5.6.3"
+  }
+}

package/src/assets.d.ts

@@ -0,0 +1,5 @@
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+

package/src/components/logo.tsx

@@ -0,0 +1,34 @@
+// Consuma logo as a React component.
+// The bitmap source is shipped with the package; SVG version coming when the
+// brand team hands off the vector master.
+import * as React from "react";
+import { cn } from "../lib/cn";
+import logoUrl from "../assets/consuma-logo.png";
+
+export interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "lockup" | "mark";
+  /** Pixel height; width auto. Default 32. */
+  height?: number;
+}
+
+export function Logo({ variant = "lockup", height = 32, className, ...rest }: LogoProps) {
+  return (
+    <div className={cn("inline-flex items-center", className)} {...rest}>
+      <img
+        src={logoUrl}
+        alt="Consuma"
+        height={height}
+        style={{
+          height,
+          width: "auto",
+          objectFit: variant === "mark" ? "none" : "contain",
+          objectPosition: variant === "mark" ? "left center" : undefined,
+          // For 'mark' we crop to roughly the icon's left ~28% of the lockup.
+          clipPath:
+            variant === "mark" ? `inset(0 72% 0 0)` : undefined,
+        }}
+        draggable={false}
+      />
+    </div>
+  );
+}

package/src/components/sentiment-pill.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { ArrowDown, ArrowUp, Minus } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export type Sentiment = "positive" | "negative" | "neutral" | "mixed";
+
+export interface SentimentPillProps extends React.HTMLAttributes<HTMLDivElement> {
+  sentiment: Sentiment;
+  /** Score to display alongside the pill (e.g. -0.42, +0.68). */
+  score?: number;
+  showIcon?: boolean;
+}
+
+const TONE: Record<Sentiment, string> = {
+  positive: "bg-success-soft text-success-strong",
+  negative: "bg-danger-soft text-danger-strong",
+  neutral: "bg-neutral-200 text-neutral-700",
+  mixed: "bg-warning-soft text-warning-strong",
+};
+
+const Icon: React.FC<{ s: Sentiment }> = ({ s }) => {
+  if (s === "positive") return <ArrowUp className="h-3 w-3" />;
+  if (s === "negative") return <ArrowDown className="h-3 w-3" />;
+  return <Minus className="h-3 w-3" />;
+};
+
+export const SentimentPill = ({
+  sentiment,
+  score,
+  showIcon = true,
+  className,
+  ...rest
+}: SentimentPillProps) => {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold",
+        TONE[sentiment],
+        className
+      )}
+      {...rest}
+    >
+      {showIcon && <Icon s={sentiment} />}
+      <span className="capitalize">{sentiment}</span>
+      {score !== undefined && (
+        <span className="font-mono tabular-nums opacity-75">
+          {score > 0 ? "+" : ""}
+          {score.toFixed(2)}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/dataviz.css

@@ -0,0 +1,76 @@
+/**
+ * Consuma data-viz tokens.
+ *
+ * Five scales, all tuned for charts (perceptually-uniform-ish, brand-aware):
+ *   1. Sentiment diverging  — 7 steps, very-negative → neutral → very-positive
+ *   2. Plum sequential      — 7 steps, light → dark, single-hue
+ *   3. Categorical-12       — distinct hues, AA-contrast on neutral-50
+ *   4. Categorical CB-safe  — 8 colors, Okabe-Ito (colorblind-safe alternate)
+ *   5. Sentiment bins       — 5 discrete bins for survey/Likert rendering
+ *
+ * Use as CSS vars (--cv-…) OR import from `consuma-ui/tokens`.
+ */
+
+:root {
+  /* 1 ── Sentiment diverging (7-step) ───────────────────
+     Use for heatmaps of sentiment over time/topic.
+     Generated from ColorBrewer RdYlGn, brand-tuned. */
+  --cv-div-1: #B91C1C;   /* very negative */
+  --cv-div-2: #EF4444;
+  --cv-div-3: #FCA5A5;
+  --cv-div-4: #E5E7EB;   /* neutral midpoint */
+  --cv-div-5: #86EFAC;
+  --cv-div-6: #16A34A;
+  --cv-div-7: #14532D;   /* very positive */
+
+  /* 2 ── Plum sequential (7-step) ───────────────────────
+     Use for magnitude/density (mention volume, frequency).
+     Perceptually graded, not just brand tints. */
+  --cv-seq-1: #F5F1FB;
+  --cv-seq-2: #DDD0F0;
+  --cv-seq-3: #B49AE0;
+  --cv-seq-4: #8C6AD1;
+  --cv-seq-5: #6A45BE;
+  --cv-seq-6: #4A2D90;
+  --cv-seq-7: #2E1A4D;
+
+  /* 3 ── Categorical 12 ─────────────────────────────────
+     For topic clusters, source breakdowns, etc.
+     All AA-contrast (≥4.5:1) on --neutral-50 background. */
+  --cv-cat-1:  #5B3AAE;  /* plum-600    — brand */
+  --cv-cat-2:  #0F766E;  /* teal-700 */
+  --cv-cat-3:  #C2410C;  /* orange-700 */
+  --cv-cat-4:  #1E40AF;  /* blue-800 */
+  --cv-cat-5:  #9D174D;  /* pink-800 */
+  --cv-cat-6:  #047857;  /* emerald-700 */
+  --cv-cat-7:  #B45309;  /* amber-700 */
+  --cv-cat-8:  #6D28D9;  /* violet-700 */
+  --cv-cat-9:  #155E75;  /* cyan-800 */
+  --cv-cat-10: #BE123C;  /* rose-700 */
+  --cv-cat-11: #4D7C0F;  /* lime-700 */
+  --cv-cat-12: #5B5B5B;  /* gray fallback */
+
+  /* 4 ── Categorical colorblind-safe (Okabe-Ito) ────────
+     Use when audience inclusion matters (presentations, public dashboards). */
+  --cv-cb-1: #E69F00;
+  --cv-cb-2: #56B4E9;
+  --cv-cb-3: #009E73;
+  --cv-cb-4: #F0E442;
+  --cv-cb-5: #0072B2;
+  --cv-cb-6: #D55E00;
+  --cv-cb-7: #CC79A7;
+  --cv-cb-8: #000000;
+
+  /* 5 ── Sentiment bins (5-step discrete) ───────────────
+     For Likert / NPS-style discrete renders. */
+  --cv-bin-very-neg: #DC2626;
+  --cv-bin-neg:      #FCA5A5;
+  --cv-bin-neutral:  #D1D5DB;
+  --cv-bin-pos:      #86EFAC;
+  --cv-bin-very-pos: #16A34A;
+}
+
+/* Optional Tailwind utilities (if you want bg-cv-cat-1 etc.):
+   Add to tailwind config:
+     theme.extend.colors['cv-cat-1'] = 'var(--cv-cat-1)'
+   …or just use them in inline styles / chart libraries. */

package/src/dataviz.ts

@@ -0,0 +1,52 @@
+/**
+ * Data-viz tokens — JS-accessible (for Recharts, d3, canvas, anywhere
+ * you need an array of strings instead of CSS vars).
+ *
+ * Mirror of `dataviz.css`. If you change one, change the other.
+ */
+
+export const dataviz = {
+  /** 7-step sentiment diverging scale: very-neg → neutral → very-pos. */
+  sentimentDiverging: [
+    "#B91C1C", "#EF4444", "#FCA5A5",
+    "#E5E7EB",
+    "#86EFAC", "#16A34A", "#14532D",
+  ],
+
+  /** 7-step plum sequential — for magnitude/density. */
+  plumSequential: [
+    "#F5F1FB", "#DDD0F0", "#B49AE0",
+    "#8C6AD1", "#6A45BE", "#4A2D90", "#2E1A4D",
+  ],
+
+  /** 12 distinct hues — AA-contrast on neutral-50.
+   *  First color is plum-600 (brand), so single-series charts stay on-brand. */
+  categorical: [
+    "#5B3AAE", "#0F766E", "#C2410C", "#1E40AF",
+    "#9D174D", "#047857", "#B45309", "#6D28D9",
+    "#155E75", "#BE123C", "#4D7C0F", "#5B5B5B",
+  ],
+
+  /** Okabe-Ito — colorblind-safe alternate categorical. */
+  categoricalCBSafe: [
+    "#E69F00", "#56B4E9", "#009E73", "#F0E442",
+    "#0072B2", "#D55E00", "#CC79A7", "#000000",
+  ],
+
+  /** 5 discrete sentiment bins for Likert/NPS renders. */
+  sentimentBins: {
+    veryNegative: "#DC2626",
+    negative:     "#FCA5A5",
+    neutral:      "#D1D5DB",
+    positive:     "#86EFAC",
+    veryPositive: "#16A34A",
+  },
+} as const;
+
+/** Pick N evenly-spaced colors from an array (for trimmed sequential scales). */
+export function pickEvenly<T>(arr: readonly T[], n: number): T[] {
+  if (n >= arr.length) return [...arr];
+  if (n <= 1) return [arr[Math.floor(arr.length / 2)]];
+  const step = (arr.length - 1) / (n - 1);
+  return Array.from({ length: n }, (_, i) => arr[Math.round(i * step)]);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from "./lib/cn";
+export * from "./tokens";
+export * from "./dataviz";
+
+export * from "./components/logo";
+export * from "./components/sentiment-pill";

package/src/lib/cn.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge Tailwind class strings, resolving conflicts. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles.css

@@ -0,0 +1,145 @@
+/**
+ * Consuma UI — global stylesheet.
+ * Import once at app root: `import "@consuma/design/styles.css";`
+ *
+ * AUTO-GENERATED from src/tokens.ts by scripts/gen-styles.ts.
+ * Do not edit by hand — run `npm run gen` after changing tokens.
+ */
+
+@layer base {
+  :root {
+    /* Typography */
+    --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
+    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
+
+    /* Brand (plum) */
+    --plum-50: 245 241 251;
+    --plum-100: 233 224 245;
+    --plum-200: 210 192 235;
+    --plum-300: 180 154 224;
+    --plum-400: 149 118 204;
+    --plum-500: 122 87 187;
+    --plum-600: 91 58 174;
+    --plum-700: 74 45 144;
+    --plum-800: 61 36 112;
+    --plum-900: 46 26 77;
+    --plum-950: 27 15 48;
+
+    /* Neutrals (warm slate) */
+    --neutral-0: 255 255 255;
+    --neutral-50: 250 250 249;
+    --neutral-100: 244 243 241;
+    --neutral-200: 232 230 226;
+    --neutral-300: 212 209 203;
+    --neutral-400: 168 163 154;
+    --neutral-500: 120 115 106;
+    --neutral-600: 90 86 80;
+    --neutral-700: 63 60 55;
+    --neutral-800: 39 37 31;
+    --neutral-900: 22 20 15;
+
+    /* Sentiment (data viz) */
+    --sentiment-positive: 46 158 110;
+    --sentiment-neutral: 168 163 154;
+    --sentiment-negative: 217 83 79;
+    --sentiment-mixed: 199 122 10;
+
+    /* Status atoms */
+    --success: 31 138 91;
+    --warning: 199 122 10;
+    --info: 42 111 219;
+    --destructive: 192 57 43;
+    --destructive-foreground: 255 255 255;
+
+    /* Status tints */
+    --brand-soft: 245 241 251;
+    --brand-strong: 74 45 144;
+    --brand-accent: 149 118 204;
+    --brand-rail: 180 154 224;
+    --success-soft: 231 247 238;
+    --success-strong: 31 122 82;
+    --success-accent: 46 158 110;
+    --warning-soft: 254 243 199;
+    --warning-strong: 180 83 9;
+    --warning-accent: 245 158 11;
+    --danger-soft: 251 233 232;
+    --danger-strong: 166 51 47;
+    --danger-accent: 217 83 79;
+    --info-soft: 224 242 254;
+    --info-strong: 3 105 161;
+    --info-accent: 14 165 233;
+
+    /* SEMANTIC LAYER — edit this section in scripts/gen-styles.ts to remap.
+       Uses space-separated RGB so Tailwind `bg-foo/50` opacity works. */
+    --background: var(--neutral-50);
+    --foreground: var(--neutral-900);
+
+    --card: var(--neutral-0);
+    --card-foreground: var(--neutral-900);
+
+    --popover: var(--neutral-0);
+    --popover-foreground: var(--neutral-900);
+
+    --primary: var(--plum-600);
+    --primary-foreground: var(--neutral-0);
+
+    --secondary: var(--neutral-100);
+    --secondary-foreground: var(--neutral-900);
+
+    --muted: var(--neutral-100);
+    --muted-foreground: var(--neutral-600);
+
+    --accent: var(--plum-50);
+    --accent-foreground: var(--plum-700);
+
+    --border: var(--neutral-200);
+    --input: var(--neutral-200);
+    --ring: var(--plum-500);
+
+    --radius: 0.625rem;
+  }
+
+  .dark {
+
+    --background: var(--neutral-900);
+    --foreground: var(--neutral-50);
+
+    --card: var(--neutral-800);
+    --card-foreground: var(--neutral-50);
+
+    --popover: var(--neutral-800);
+    --popover-foreground: var(--neutral-50);
+
+    --primary: var(--plum-400);
+    --primary-foreground: var(--plum-950);
+
+    --secondary: var(--neutral-800);
+    --secondary-foreground: var(--neutral-50);
+
+    --muted: var(--neutral-800);
+    --muted-foreground: var(--neutral-400);
+
+    --accent: var(--plum-900);
+    --accent-foreground: var(--plum-200);
+
+    --destructive: 220 100 95;
+    --destructive-foreground: 255 255 255;
+
+    --border: var(--neutral-700);
+    --input: var(--neutral-700);
+    --ring: var(--plum-400);
+  }
+
+  * {
+    border-color: rgb(var(--border));
+  }
+
+  body {
+    background-color: rgb(var(--background));
+    color: rgb(var(--foreground));
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01", "cv11";
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}

package/src/tailwind-preset.js

@@ -0,0 +1,148 @@
+/**
+ * Consuma Tailwind preset.
+ * Use in your app:
+ *
+ *   // tailwind.config.{js,ts}
+ *   import consumaPreset from "@consuma/design/tailwind-preset";
+ *   export default {
+ *     presets: [consumaPreset],
+ *     content: [
+ *       "./app/**\/*.{ts,tsx}",
+ *       "./node_modules/@consuma/design/src/**\/*.{ts,tsx}",
+ *     ],
+ *   };
+ */
+
+const rgb = (v) => `rgb(var(${v}) / <alpha-value>)`;
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      colors: {
+        // shadcn semantic
+        border: rgb("--border"),
+        input: rgb("--input"),
+        ring: rgb("--ring"),
+        background: rgb("--background"),
+        foreground: rgb("--foreground"),
+        primary: {
+          DEFAULT: rgb("--primary"),
+          foreground: rgb("--primary-foreground"),
+        },
+        secondary: {
+          DEFAULT: rgb("--secondary"),
+          foreground: rgb("--secondary-foreground"),
+        },
+        destructive: {
+          DEFAULT: rgb("--destructive"),
+          foreground: rgb("--destructive-foreground"),
+        },
+        muted: {
+          DEFAULT: rgb("--muted"),
+          foreground: rgb("--muted-foreground"),
+        },
+        accent: {
+          DEFAULT: rgb("--accent"),
+          foreground: rgb("--accent-foreground"),
+        },
+        popover: {
+          DEFAULT: rgb("--popover"),
+          foreground: rgb("--popover-foreground"),
+        },
+        card: {
+          DEFAULT: rgb("--card"),
+          foreground: rgb("--card-foreground"),
+        },
+        // Status atoms + tints. Use:
+        //   bg-success           — bold mid-tone
+        //   bg-success-soft      — light tinted background (badges)
+        //   text-success-strong  — dark text on tint (badges)
+        //   bg-success-accent    — saturated mid for filled pills
+        success: {
+          DEFAULT: rgb("--success"),
+          soft: rgb("--success-soft"),
+          strong: rgb("--success-strong"),
+          accent: rgb("--success-accent"),
+        },
+        warning: {
+          DEFAULT: rgb("--warning"),
+          soft: rgb("--warning-soft"),
+          strong: rgb("--warning-strong"),
+          accent: rgb("--warning-accent"),
+        },
+        info: {
+          DEFAULT: rgb("--info"),
+          soft: rgb("--info-soft"),
+          strong: rgb("--info-strong"),
+          accent: rgb("--info-accent"),
+        },
+        danger: {
+          DEFAULT: rgb("--destructive"),
+          soft: rgb("--danger-soft"),
+          strong: rgb("--danger-strong"),
+          accent: rgb("--danger-accent"),
+        },
+        // Sentiment scale (data viz)
+        sentiment: {
+          positive: rgb("--sentiment-positive"),
+          neutral: rgb("--sentiment-neutral"),
+          negative: rgb("--sentiment-negative"),
+          mixed: rgb("--sentiment-mixed"),
+        },
+        // Override Tailwind defaults with Consuma's warm neutral scale
+        neutral: {
+          0: rgb("--neutral-0"),
+          50: rgb("--neutral-50"),
+          100: rgb("--neutral-100"),
+          200: rgb("--neutral-200"),
+          300: rgb("--neutral-300"),
+          400: rgb("--neutral-400"),
+          500: rgb("--neutral-500"),
+          600: rgb("--neutral-600"),
+          700: rgb("--neutral-700"),
+          800: rgb("--neutral-800"),
+          900: rgb("--neutral-900"),
+        },
+        // Brand scales (use directly: bg-plum-600, text-plum-300, etc.)
+        plum: {
+          50: rgb("--plum-50"),
+          100: rgb("--plum-100"),
+          200: rgb("--plum-200"),
+          300: rgb("--plum-300"),
+          400: rgb("--plum-400"),
+          500: rgb("--plum-500"),
+          600: rgb("--plum-600"),
+          700: rgb("--plum-700"),
+          800: rgb("--plum-800"),
+          900: rgb("--plum-900"),
+          950: rgb("--plum-950"),
+        },
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        mono: ["var(--font-mono)"],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+};

package/src/tokens.ts

@@ -0,0 +1,176 @@
+/**
+ * Consuma design tokens — the single source of truth.
+ * JS/TS access (charts, canvas, emails, anywhere not Tailwind).
+ * CSS variables in styles.css are auto-generated from these values.
+ */
+
+export const tokens = {
+  color: {
+    // Brand — plum scale
+    plum: {
+      50: "#F5F1FB",
+      100: "#E9E0F5",
+      200: "#D2C0EB",
+      300: "#B49AE0",
+      400: "#9576CC",
+      500: "#7A57BB",
+      600: "#5B3AAE", // primary
+      700: "#4A2D90",
+      800: "#3D2470",
+      900: "#2E1A4D",
+      950: "#1B0F30",
+    },
+    // Neutrals — warm slate
+    neutral: {
+      0: "#FFFFFF",
+      50: "#FAFAF9",
+      100: "#F4F3F1",
+      200: "#E8E6E2",
+      300: "#D4D1CB",
+      400: "#A8A39A",
+      500: "#78736A",
+      600: "#5A5650",
+      700: "#3F3C37",
+      800: "#27251F",
+      900: "#16140F",
+    },
+    // Status atoms (single hex)
+    success: "#1F8A5B",
+    warning: "#C77A0A",
+    danger: "#C0392B",
+    info: "#2A6FDB",
+    // Sentiment (data viz)
+    sentiment: {
+      positive: "#2E9E6E",
+      neutral: "#A8A39A",
+      negative: "#D9534F",
+      mixed: "#C77A0A",
+    },
+    // Categorical (data viz, 8-step)
+    chart: [
+      "#5B3AAE",
+      "#2A6FDB",
+      "#1F8A5B",
+      "#C77A0A",
+      "#C0392B",
+      "#7A57BB",
+      "#0E7490",
+      "#9D174D",
+    ],
+    // Tinted bg/fg pairs — used in transactional emails, badges, rails.
+    // Designed to render inline (Gmail-safe). Hand-tuned to match
+    // the dashboard's iterated palette so every surface stays consistent.
+    tint: {
+      brand: { bg: "#F5F1FB", fg: "#4A2D90", accent: "#9576CC", rail: "#B49AE0" },
+      success: { bg: "#E7F7EE", fg: "#1F7A52", accent: "#2E9E6E" },
+      warning: { bg: "#FEF3C7", fg: "#B45309", accent: "#F59E0B" },
+      danger: { bg: "#FBE9E8", fg: "#A6332F", accent: "#D9534F" },
+      info: { bg: "#E0F2FE", fg: "#0369A1", accent: "#0EA5E9" },
+    },
+  },
+
+  font: {
+    family: {
+      sans: '"Manrope", ui-sans-serif, system-ui, sans-serif',
+      mono: '"JetBrains Mono", ui-monospace, "SF Mono", monospace',
+      display: '"Geist", ui-sans-serif, system-ui, sans-serif',
+    },
+    // Sizes (numbers = px). Used inline in JS-rendered surfaces (emails).
+    size: {
+      xs: 10,
+      sm: 11,
+      md: 12,
+      base: 13,
+      lg: 14,
+      xl: 15,
+      "2xl": 17,
+      "3xl": 18,
+      "4xl": 20,
+      "5xl": 22,
+      "6xl": 26,
+      "7xl": 28,
+      "8xl": 32,
+    },
+    weight: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+    },
+    tracking: {
+      tighter: "-0.025em",
+      tight: "-0.02em",
+      snug: "-0.01em",
+      normal: "0",
+      wide: "0.08em",
+      wider: "0.1em",
+      widest: "0.14em",
+    },
+    leading: {
+      tight: 1.2,
+      snug: 1.25,
+      base: 1.35,
+      relaxed: 1.5,
+      loose: 1.6,
+    },
+  },
+
+  // Radius
+  radius: {
+    none: "0",
+    sm: "0.375rem",
+    md: "0.625rem",
+    lg: "0.875rem",
+    xl: "1.125rem",
+    "2xl": "1.5rem",
+    full: "9999px",
+  },
+
+  // 4-pt spacing scale
+  space: {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+  },
+
+  shadow: {
+    xs: "0 1px 2px 0 rgb(46 26 77 / 0.04)",
+    sm: "0 1px 3px 0 rgb(46 26 77 / 0.06), 0 1px 2px -1px rgb(46 26 77 / 0.06)",
+    md: "0 4px 6px -1px rgb(46 26 77 / 0.08), 0 2px 4px -2px rgb(46 26 77 / 0.06)",
+    lg: "0 10px 15px -3px rgb(46 26 77 / 0.10), 0 4px 6px -4px rgb(46 26 77 / 0.08)",
+    xl: "0 20px 25px -5px rgb(46 26 77 / 0.12), 0 8px 10px -6px rgb(46 26 77 / 0.08)",
+    focus: "0 0 0 3px rgb(91 58 174 / 0.35)",
+    cardEmail: "0 1px 2px rgba(15,13,30,0.04)",
+  },
+
+  motion: {
+    duration: { fast: "120ms", base: "200ms", slow: "320ms" },
+    ease: {
+      out: "cubic-bezier(0.22, 1, 0.36, 1)",
+      inOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+      spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    },
+  },
+
+  // Brand gradients — referenced by emails / hero surfaces.
+  gradient: {
+    plumBar:
+      "linear-gradient(90deg,#4A2D90 0%,#9576CC 50%,#B49AE0 100%)",
+    plumDuo: "linear-gradient(135deg,#9576CC,#4A2D90)",
+    plumHeroSoft:
+      "radial-gradient(ellipse at 50% -20%,#E9DFF6 0%,#FFFFFF 55%)",
+  },
+} as const;
+
+export type Tokens = typeof tokens;