@citron-systems/citron-ds 1.0.0

package/dist/scss/_inkblot-variables.scss

@@ -0,0 +1,200 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$inkblot-breakpoint-sm: 640px; // Small devices
+$inkblot-breakpoint-md: 768px; // Tablets
+$inkblot-breakpoint-lg: 1024px; // Laptops
+$inkblot-breakpoint-xl: 1280px; // Desktops
+$inkblot-breakpoint-2xl: 1536px; // Large screens
+$inkblot-color-neutral-white: #ffffff; // Pure white, floating surfaces
+$inkblot-color-neutral-gray-50: #fafaf7; // Warm off-white, body background
+$inkblot-color-neutral-gray-100: #f5f4f0; // Warm surface, secondary bg
+$inkblot-color-neutral-gray-200: #eae9e3; // Subtle warm border, dividers
+$inkblot-color-neutral-gray-300: #d4d3cb; // Medium warm border
+$inkblot-color-neutral-gray-400: #93928a; // Placeholder text, muted
+$inkblot-color-neutral-gray-500: #6b6a63; // Secondary text
+$inkblot-color-neutral-gray-600: #4d4c47; // Emphasized secondary
+$inkblot-color-neutral-gray-700: #3a3935; // Strong text
+$inkblot-color-neutral-gray-800: #2d2c28; // Deep warm dark
+$inkblot-color-neutral-gray-900: #1d1c19; // Primary text — deep slate, never pure black
+$inkblot-color-neutral-gray-950: #0f0e0c; // Deepest warm black
+$inkblot-color-accent-citron-50: #fdfbf3; // Barely there citron wash
+$inkblot-color-accent-citron-100: #faf4df; // Soft cream tint
+$inkblot-color-accent-citron-200: #f3e6b8; // Warm wheat
+$inkblot-color-accent-citron-300: #e8d38a; // Light honey
+$inkblot-color-accent-citron-400: #d9bc58; // Citrus glow
+$inkblot-color-accent-citron-500: #c4a030; // Citron primary — the brand tone
+$inkblot-color-accent-citron-600: #a38427; // Deep citron, hover state
+$inkblot-color-accent-citron-700: #7f671f; // Rich amber
+$inkblot-color-accent-citron-800: #5c4a18; // Dark citron
+$inkblot-color-accent-citron-900: #3d3111; // Deepest citron
+$inkblot-color-semantic-success-light: #3d9e50; // Warm success green
+$inkblot-color-semantic-success-main: #358c46; // Primary success
+$inkblot-color-semantic-success-dark: #2a7538; // Success hover
+$inkblot-color-semantic-warning-light: #e0a020; // Warm amber warning
+$inkblot-color-semantic-warning-main: #c48c1a; // Primary warning — distinct from citron by saturation
+$inkblot-color-semantic-warning-dark: #a67515; // Warning hover
+$inkblot-color-semantic-error-light: #d14940; // Warm red
+$inkblot-color-semantic-error-main: #be3e35; // Primary error
+$inkblot-color-semantic-error-dark: #a3352d; // Error hover
+$inkblot-color-semantic-info-light: #6ba3c2; // Muted warm blue
+$inkblot-color-semantic-info-main: #5790ad; // Primary info — desaturated, warm
+$inkblot-color-semantic-info-dark: #497a94; // Info hover
+$inkblot-duration-instant: 0ms; // No animation
+$inkblot-duration-fast: 120ms; // Micro-interactions, hovers — fast enough to feel physical
+$inkblot-duration-normal: 200ms; // Standard transitions
+$inkblot-duration-slow: 320ms; // Complex transitions, enter/exit
+$inkblot-duration-slower: 500ms; // Page-level transitions, long reveals
+$inkblot-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); // Standard ease — natural deceleration
+$inkblot-easing-in: cubic-bezier(0.32, 0, 0.67, 0); // Ease in — for exits, things leaving
+$inkblot-easing-out: cubic-bezier(0.33, 1, 0.68, 1); // Ease out — for entrances, things arriving
+$inkblot-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1); // Ease in-out — for position changes, transforms
+$inkblot-easing-expressive: cubic-bezier(0.22, 1, 0.36, 1); // Expressive ease-out — smooth, confident arrival. Replaces bounce.
+$inkblot-grid-columns-mobile: 4rem; // 4-column grid for < 640px
+$inkblot-grid-columns-tablet: 8rem; // 8-column grid for 640–1023px
+$inkblot-grid-columns-desktop: 12rem; // 12-column grid for 1024–1535px
+$inkblot-grid-columns-wide: 16rem; // 16-column grid for 1536px+
+$inkblot-grid-columns-max: 24rem; // 24-column grid for complex dashboards
+$inkblot-grid-gutter-sm: 0.5rem; // 8px - compact mobile gutter
+$inkblot-grid-gutter-md: 1rem; // 16px - standard gutter
+$inkblot-grid-gutter-lg: 1.5rem; // 24px - spacious desktop gutter
+$inkblot-grid-gutter-xl: 2rem; // 32px - wide layout gutter
+$inkblot-grid-margin-mobile: 1rem; // 16px page margin on mobile
+$inkblot-grid-margin-tablet: 2rem; // 32px page margin on tablet
+$inkblot-grid-margin-desktop: 4rem; // 64px page margin on desktop
+$inkblot-grid-margin-wide: auto; // Auto-center on wide screens
+$inkblot-grid-max-width-content: 768px; // Max width for readable content
+$inkblot-grid-max-width-container: 1200px; // Max width for standard layouts
+$inkblot-grid-max-width-wide: 1440px; // Max width for wide layouts
+$inkblot-grid-max-width-full: 1920px; // Max width for full-bleed
+$inkblot-radius-none: 0; // No rounding
+$inkblot-radius-sm: 6px; // Subtle rounding, chips
+$inkblot-radius-md: 10px; // Inputs, small cards
+$inkblot-radius-lg: 14px; // Buttons, interactive elements
+$inkblot-radius-xl: 18px; // Cards, modals
+$inkblot-radius-2xl: 24px; // Large surfaces, hero cards
+$inkblot-radius-full: 9999px; // Pills, avatars, toggles
+$inkblot-border-width-none: 0; // No border
+$inkblot-border-width-thin: 1px; // Subtle dividers, the default
+$inkblot-border-width-medium: 2px; // Focus rings
+$inkblot-border-width-thick: 3px; // Strong emphasis, rarely used
+$inkblot-shadow-none: none; // No shadow
+$inkblot-shadow-xs: 0 1px 2px 0 rgba(29, 28, 25, 0.04); // Barely there lift
+$inkblot-shadow-sm: 0 2px 8px -1px rgba(29, 28, 25, 0.06), 0 1px 3px -1px rgba(29, 28, 25, 0.04); // Cards — soft, warm, diffused
+$inkblot-shadow-md: 0 4px 16px -2px rgba(29, 28, 25, 0.08), 0 2px 6px -2px rgba(29, 28, 25, 0.04); // Elevated cards, dropdowns
+$inkblot-shadow-lg: 0 8px 24px -4px rgba(29, 28, 25, 0.10), 0 4px 10px -4px rgba(29, 28, 25, 0.04); // Modals, popovers
+$inkblot-shadow-xl: 0 16px 40px -8px rgba(29, 28, 25, 0.12), 0 8px 16px -8px rgba(29, 28, 25, 0.04); // Maximum elevation — ambient, not harsh
+$inkblot-opacity-disabled: 0.4; // Disabled elements
+$inkblot-opacity-overlay: 0.45; // Modal backdrops — not too heavy
+$inkblot-opacity-subtle: 0.6; // Secondary content
+$inkblot-opacity-default: 1; // Full opacity
+$inkblot-spacing-0: 0; // No spacing
+$inkblot-spacing-1: 0.25rem; // 4px
+$inkblot-spacing-2: 0.5rem; // 8px
+$inkblot-spacing-3: 0.75rem; // 12px
+$inkblot-spacing-4: 1rem; // 16px
+$inkblot-spacing-5: 1.25rem; // 20px
+$inkblot-spacing-6: 1.5rem; // 24px
+$inkblot-spacing-8: 2rem; // 32px
+$inkblot-spacing-10: 2.5rem; // 40px
+$inkblot-spacing-12: 3rem; // 48px
+$inkblot-spacing-16: 4rem; // 64px
+$inkblot-spacing-20: 5rem; // 80px
+$inkblot-spacing-24: 6rem; // 96px
+$inkblot-spacing-32: 8rem; // 128px
+$inkblot-size-icon-xs: 1rem; // 16px icon
+$inkblot-size-icon-sm: 1.25rem; // 20px icon
+$inkblot-size-icon-md: 1.5rem; // 24px icon
+$inkblot-size-icon-lg: 2rem; // 32px icon
+$inkblot-size-icon-xl: 2.5rem; // 40px icon
+$inkblot-size-touch-target-min: 44px; // Minimum touch target (WCAG)
+$inkblot-size-touch-target-comfortable: 48px; // Comfortable touch target
+$inkblot-typography-font-family-sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; // Primary UI font — humanist, modern, highly legible
+$inkblot-typography-font-family-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace; // Code and data
+$inkblot-typography-font-family-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; // Headlines — same family, optical size variant
+$inkblot-typography-font-size-xs: 0.75rem; // 12px — captions, meta
+$inkblot-typography-font-size-sm: 0.8125rem; // 13px — secondary text
+$inkblot-typography-font-size-base: 0.9375rem; // 15px — body text, slightly refined from 16
+$inkblot-typography-font-size-md: 1.0625rem; // 17px — emphasized body
+$inkblot-typography-font-size-lg: 1.25rem; // 20px — card titles, subheadings
+$inkblot-typography-font-size-xl: 1.5rem; // 24px — section titles
+$inkblot-typography-font-size-2xl: 1.75rem; // 28px — page titles
+$inkblot-typography-font-size-3xl: 2.125rem; // 34px — hero — composed, not shouting
+$inkblot-typography-font-size-4xl: 2.75rem; // 44px — display, rarely used
+$inkblot-typography-font-size-5xl: 3.25rem; // 52px — maximum display
+$inkblot-typography-font-weight-regular: 400; // Body text
+$inkblot-typography-font-weight-medium: 500; // Emphasis, labels, card titles
+$inkblot-typography-font-weight-semibold: 600; // Headings, buttons
+$inkblot-typography-font-weight-bold: 700; // Strong emphasis, sparingly
+$inkblot-typography-line-height-tight: 1.2; // Headlines
+$inkblot-typography-line-height-snug: 1.375; // Subheadings
+$inkblot-typography-line-height-normal: 1.5; // Body text
+$inkblot-typography-line-height-relaxed: 1.65; // Long-form, generous breathing room
+$inkblot-typography-line-height-loose: 1.8; // Very spacious
+$inkblot-typography-letter-spacing-tighter: -0.04em; // Large headlines
+$inkblot-typography-letter-spacing-tight: -0.02em; // Headings
+$inkblot-typography-letter-spacing-normal: 0; // Body
+$inkblot-typography-letter-spacing-wide: 0.02em; // Labels
+$inkblot-typography-letter-spacing-wider: 0.06em; // Uppercase meta
+$inkblot-z-index-hide: -1; // Hidden below base layer
+$inkblot-z-index-base: 0; // Default document flow
+$inkblot-z-index-raised: 1; // Slightly above base (cards on hover)
+$inkblot-z-index-dropdown: 10; // Dropdowns, select menus
+$inkblot-z-index-sticky: 20; // Sticky headers, nav bars
+$inkblot-z-index-overlay: 30; // Backdrop overlays
+$inkblot-z-index-modal: 40; // Modals, dialogs, sheets
+$inkblot-z-index-popover: 50; // Popovers, tooltips
+$inkblot-z-index-toast: 60; // Toast notifications
+$inkblot-z-index-max: 9999; // Emergency override (avoid)
+$inkblot-dark-color-background-primary: #12110e; // Deep warm black, not pure black
+$inkblot-dark-color-background-secondary: #1d1c18; // Elevated warm surface
+$inkblot-dark-color-background-tertiary: #2a2924; // Grouped content, inset
+$inkblot-dark-color-background-inverse: #fafaf7; // Inverted to warm off-white
+$inkblot-dark-color-text-primary: #f5f4f0; // Warm off-white text
+$inkblot-dark-color-text-secondary: #93928a; // Warm muted text
+$inkblot-dark-color-text-tertiary: #6b6a63; // Placeholder, hints
+$inkblot-dark-color-text-inverse: #1d1c19; // Dark text on light
+$inkblot-dark-color-text-link: #d9bc58; // Citron 400 — bright enough for dark bg
+$inkblot-dark-color-text-link-hover: #e8d38a; // Citron 300 — lighter on hover
+$inkblot-dark-color-border-default: #38372f; // Warm subtle border
+$inkblot-dark-color-border-strong: #4d4c44; // Emphasized warm border
+$inkblot-dark-color-border-focus: #d9bc58; // Focus ring — bright citron
+$inkblot-dark-color-interactive-primary: #d9bc58; // Citron 400 — lighter for dark mode contrast
+$inkblot-dark-color-interactive-primary-hover: #e8d38a; // Citron 300 — warm glow on hover
+$inkblot-dark-color-interactive-primary-active: #c4a030; // Citron 500 — anchor on press
+$inkblot-dark-color-interactive-secondary: #2a2924; // Warm dark secondary
+$inkblot-dark-color-interactive-secondary-hover: #38372f; // Warm dark hover
+$inkblot-dark-color-status-success: #4cb864; // Bright warm green on dark
+$inkblot-dark-color-status-warning: #e0a020; // Warm amber on dark
+$inkblot-dark-color-status-error: #e05a52; // Warm red on dark
+$inkblot-dark-color-status-info: #7ab8d6; // Soft warm blue on dark
+$inkblot-semantic-color-background-primary: $inkblot-color-neutral-gray-50; // Body background — warm off-white with barely perceptible beige
+$inkblot-semantic-color-background-secondary: $inkblot-color-neutral-white; // Elevated surfaces — clean white floating above base
+$inkblot-semantic-color-background-tertiary: $inkblot-color-neutral-gray-100; // Grouped content, inset areas
+$inkblot-semantic-color-background-inverse: $inkblot-color-neutral-gray-900; // Inverted surfaces
+$inkblot-semantic-color-text-primary: $inkblot-color-neutral-gray-900; // Primary text — deep warm slate, never pure black
+$inkblot-semantic-color-text-secondary: $inkblot-color-neutral-gray-500; // Secondary text
+$inkblot-semantic-color-text-tertiary: $inkblot-color-neutral-gray-400; // Placeholder, hints, captions
+$inkblot-semantic-color-text-inverse: $inkblot-color-neutral-white; // Text on dark surfaces
+$inkblot-semantic-color-text-link: $inkblot-color-accent-citron-600; // Links — deep citron for readability
+$inkblot-semantic-color-text-link-hover: $inkblot-color-accent-citron-700; // Link hover
+$inkblot-semantic-color-border-default: $inkblot-color-neutral-gray-200; // Subtle warm dividers
+$inkblot-semantic-color-border-strong: $inkblot-color-neutral-gray-300; // Emphasized borders
+$inkblot-semantic-color-border-focus: $inkblot-color-accent-citron-500; // Focus ring — citron accent
+$inkblot-semantic-color-interactive-primary: $inkblot-color-accent-citron-500; // Primary CTA — confident citron
+$inkblot-semantic-color-interactive-primary-hover: $inkblot-color-accent-citron-600; // Primary hover — deeper, subtle shift
+$inkblot-semantic-color-interactive-primary-active: $inkblot-color-accent-citron-700; // Primary pressed
+$inkblot-semantic-color-interactive-secondary: $inkblot-color-neutral-gray-100; // Secondary surfaces with subtle depth
+$inkblot-semantic-color-interactive-secondary-hover: $inkblot-color-neutral-gray-200; // Secondary hover
+$inkblot-semantic-color-status-success: $inkblot-color-semantic-success-main; // Success state
+$inkblot-semantic-color-status-warning: $inkblot-color-semantic-warning-main; // Warning state
+$inkblot-semantic-color-status-error: $inkblot-color-semantic-error-main; // Error state
+$inkblot-semantic-color-status-info: $inkblot-color-semantic-info-main; // Info state
+$inkblot-semantic-typography-heading-1: $inkblot-typography-font-weight-semibold $inkblot-typography-font-size-3xl/$inkblot-typography-line-height-tight $inkblot-typography-font-family-display; // Page title — composed, not dramatic
+$inkblot-semantic-typography-heading-2: $inkblot-typography-font-weight-semibold $inkblot-typography-font-size-2xl/$inkblot-typography-line-height-tight $inkblot-typography-font-family-display; // Section title
+$inkblot-semantic-typography-heading-3: $inkblot-typography-font-weight-medium $inkblot-typography-font-size-xl/$inkblot-typography-line-height-snug $inkblot-typography-font-family-sans; // Subsection title
+$inkblot-semantic-typography-heading-4: $inkblot-typography-font-weight-medium $inkblot-typography-font-size-lg/$inkblot-typography-line-height-snug $inkblot-typography-font-family-sans; // Card title
+$inkblot-semantic-typography-body-default: $inkblot-typography-font-weight-regular $inkblot-typography-font-size-base/$inkblot-typography-line-height-normal $inkblot-typography-font-family-sans; // Body text
+$inkblot-semantic-typography-body-small: $inkblot-typography-font-weight-regular $inkblot-typography-font-size-sm/$inkblot-typography-line-height-normal $inkblot-typography-font-family-sans; // Small body, captions
+$inkblot-semantic-typography-body-large: $inkblot-typography-font-weight-regular $inkblot-typography-font-size-md/$inkblot-typography-line-height-relaxed $inkblot-typography-font-family-sans; // Emphasized body
+$inkblot-semantic-typography-label-default: $inkblot-typography-font-weight-medium $inkblot-typography-font-size-xs/$inkblot-typography-line-height-normal $inkblot-typography-font-family-sans; // Form labels, badges

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@citron-systems/citron-ds",
+  "version": "1.0.0",
+  "description": "Inkblot Studio design token system — Apple-inspired, accessible, AI-ready. Citron design language.",
+  "type": "module",
+  "main": "dist/js/inkblot-tokens.js",
+  "exports": {
+    ".": "./dist/js/inkblot-tokens.js",
+    "./css": "./dist/css/inkblot-variables.css",
+    "./scss": "./dist/scss/_inkblot-variables.scss",
+    "./tokens": "./dist/ai/inkblot-tokens-resolved.json",
+    "./ai-reference": "./dist/ai/inkblot-ai-reference.json"
+  },
+  "files": [
+    "dist",
+    "tokens",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "style-dictionary build --config style-dictionary.config.js && node -e \"require('fs').copyFileSync('system/inkblot-ai-reference.json', 'dist/ai/inkblot-ai-reference.json')\"",
+    "build:tokens": "style-dictionary build --config style-dictionary.config.js",
+    "dev": "concurrently \"npm run build:watch\" \"vite\"",
+    "build:watch": "chokidar \"tokens/**/*.json\" -c \"npm run build\"",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "design-tokens",
+    "design-system",
+    "inkblot-studio",
+    "citron",
+    "style-dictionary",
+    "css-variables",
+    "scss",
+    "wcag",
+    "accessibility",
+    "ai-ready"
+  ],
+  "author": "Inkblot Studio",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GHDryanovski19/inkblot-studio-design-tokens.git"
+  },
+  "bugs": {
+    "url": "https://github.com/GHDryanovski19/inkblot-studio-design-tokens/issues"
+  },
+  "homepage": "https://github.com/GHDryanovski19/inkblot-studio-design-tokens#readme",
+  "engines": {
+    "node": ">=18"
+  },
+  "unpkg": "dist/css/inkblot-variables.css",
+  "jsdelivr": "dist/css/inkblot-variables.css",
+  "devDependencies": {
+    "chokidar-cli": "^3.0.0",
+    "concurrently": "^8.2.2",
+    "style-dictionary": "^4.0.0",
+    "vite": "^5.4.0",
+    "vite-plugin-live-reload": "^3.0.1"
+  }
+}

package/tokens/primitive/breakpoint.tokens.json

@@ -0,0 +1,14 @@
+{
+  "$description": "Inkblot Studio breakpoints. Mobile-first responsive design.",
+  "inkblot": {
+    "breakpoint": {
+      "$type": "dimension",
+      "$description": "Viewport breakpoints for responsive layouts",
+      "sm": { "$value": "640px", "$description": "Small devices" },
+      "md": { "$value": "768px", "$description": "Tablets" },
+      "lg": { "$value": "1024px", "$description": "Laptops" },
+      "xl": { "$value": "1280px", "$description": "Desktops" },
+      "2xl": { "$value": "1536px", "$description": "Large screens" }
+    }
+  }
+}

package/tokens/primitive/color.tokens.json

@@ -0,0 +1,71 @@
+{
+  "$description": "Citron primitive color palette. Warm, restrained, premium. Citrus interpreted through restraint and taste — never literal, never loud.",
+  "inkblot": {
+    "$description": "Inkblot Studio — Citron product line",
+    "color": {
+      "$type": "color",
+      "$description": "Base color primitives — use semantic tokens in components, never raw primitives",
+      "neutral": {
+        "$type": "color",
+        "$description": "Warm neutrals with barely perceptible beige undertone. No blue-tinted greys.",
+        "white": {
+          "$value": "#ffffff",
+          "$description": "Pure white, floating surfaces"
+        },
+        "gray": {
+          "50":  { "$value": "#fafaf7", "$description": "Warm off-white, body background" },
+          "100": { "$value": "#f5f4f0", "$description": "Warm surface, secondary bg" },
+          "200": { "$value": "#eae9e3", "$description": "Subtle warm border, dividers" },
+          "300": { "$value": "#d4d3cb", "$description": "Medium warm border" },
+          "400": { "$value": "#93928a", "$description": "Placeholder text, muted" },
+          "500": { "$value": "#6b6a63", "$description": "Secondary text" },
+          "600": { "$value": "#4d4c47", "$description": "Emphasized secondary" },
+          "700": { "$value": "#3a3935", "$description": "Strong text" },
+          "800": { "$value": "#2d2c28", "$description": "Deep warm dark" },
+          "900": { "$value": "#1d1c19", "$description": "Primary text — deep slate, never pure black" },
+          "950": { "$value": "#0f0e0c", "$description": "Deepest warm black" }
+        }
+      },
+      "accent": {
+        "$type": "color",
+        "$description": "Citron brand accent — refined citrus-amber, used sparingly for emphasis. Warm light through citrus peel.",
+        "citron": {
+          "50":  { "$value": "#fdfbf3", "$description": "Barely there citron wash" },
+          "100": { "$value": "#faf4df", "$description": "Soft cream tint" },
+          "200": { "$value": "#f3e6b8", "$description": "Warm wheat" },
+          "300": { "$value": "#e8d38a", "$description": "Light honey" },
+          "400": { "$value": "#d9bc58", "$description": "Citrus glow" },
+          "500": { "$value": "#c4a030", "$description": "Citron primary — the brand tone" },
+          "600": { "$value": "#a38427", "$description": "Deep citron, hover state" },
+          "700": { "$value": "#7f671f", "$description": "Rich amber" },
+          "800": { "$value": "#5c4a18", "$description": "Dark citron" },
+          "900": { "$value": "#3d3111", "$description": "Deepest citron" }
+        }
+      },
+      "semantic": {
+        "$type": "color",
+        "$description": "Status colors — warm-shifted for cohesion, fully accessible",
+        "success": {
+          "light": { "$value": "#3d9e50", "$description": "Warm success green" },
+          "main":  { "$value": "#358c46", "$description": "Primary success" },
+          "dark":  { "$value": "#2a7538", "$description": "Success hover" }
+        },
+        "warning": {
+          "light": { "$value": "#e0a020", "$description": "Warm amber warning" },
+          "main":  { "$value": "#c48c1a", "$description": "Primary warning — distinct from citron by saturation" },
+          "dark":  { "$value": "#a67515", "$description": "Warning hover" }
+        },
+        "error": {
+          "light": { "$value": "#d14940", "$description": "Warm red" },
+          "main":  { "$value": "#be3e35", "$description": "Primary error" },
+          "dark":  { "$value": "#a3352d", "$description": "Error hover" }
+        },
+        "info": {
+          "light": { "$value": "#6ba3c2", "$description": "Muted warm blue" },
+          "main":  { "$value": "#5790ad", "$description": "Primary info — desaturated, warm" },
+          "dark":  { "$value": "#497a94", "$description": "Info hover" }
+        }
+      }
+    }
+  }
+}

package/tokens/primitive/duration.tokens.json

@@ -0,0 +1,38 @@
+{
+  "$description": "Citron motion. Fast, smooth, physical. No bounce, no overshoot. Transitions feel like light responding to touch.",
+  "inkblot": {
+    "duration": {
+      "$type": "duration",
+      "$description": "Animation durations — snappy, never playful",
+      "instant": { "$value": "0ms",   "$description": "No animation" },
+      "fast":    { "$value": "120ms", "$description": "Micro-interactions, hovers — fast enough to feel physical" },
+      "normal":  { "$value": "200ms", "$description": "Standard transitions" },
+      "slow":    { "$value": "320ms", "$description": "Complex transitions, enter/exit" },
+      "slower":  { "$value": "500ms", "$description": "Page-level transitions, long reveals" }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "$description": "Easing curves — smooth, physical, never bouncy",
+      "default": {
+        "$value": [0.25, 0.1, 0.25, 1],
+        "$description": "Standard ease — natural deceleration"
+      },
+      "in": {
+        "$value": [0.32, 0, 0.67, 0],
+        "$description": "Ease in — for exits, things leaving"
+      },
+      "out": {
+        "$value": [0.33, 1, 0.68, 1],
+        "$description": "Ease out — for entrances, things arriving"
+      },
+      "inOut": {
+        "$value": [0.65, 0, 0.35, 1],
+        "$description": "Ease in-out — for position changes, transforms"
+      },
+      "expressive": {
+        "$value": [0.22, 1, 0.36, 1],
+        "$description": "Expressive ease-out — smooth, confident arrival. Replaces bounce."
+      }
+    }
+  }
+}

package/tokens/primitive/grid.tokens.json

@@ -0,0 +1,34 @@
+{
+  "$description": "Inkblot Studio grid and layout tokens. Modular column system scaling 4–24 columns.",
+  "inkblot": {
+    "grid": {
+      "$type": "dimension",
+      "$description": "Grid system tokens for responsive, adaptive layouts",
+      "columns": {
+        "mobile": { "$value": "4", "$description": "4-column grid for < 640px" },
+        "tablet": { "$value": "8", "$description": "8-column grid for 640–1023px" },
+        "desktop": { "$value": "12", "$description": "12-column grid for 1024–1535px" },
+        "wide": { "$value": "16", "$description": "16-column grid for 1536px+" },
+        "max": { "$value": "24", "$description": "24-column grid for complex dashboards" }
+      },
+      "gutter": {
+        "sm": { "$value": "0.5rem", "$description": "8px - compact mobile gutter" },
+        "md": { "$value": "1rem", "$description": "16px - standard gutter" },
+        "lg": { "$value": "1.5rem", "$description": "24px - spacious desktop gutter" },
+        "xl": { "$value": "2rem", "$description": "32px - wide layout gutter" }
+      },
+      "margin": {
+        "mobile": { "$value": "1rem", "$description": "16px page margin on mobile" },
+        "tablet": { "$value": "2rem", "$description": "32px page margin on tablet" },
+        "desktop": { "$value": "4rem", "$description": "64px page margin on desktop" },
+        "wide": { "$value": "auto", "$description": "Auto-center on wide screens" }
+      },
+      "maxWidth": {
+        "content": { "$value": "768px", "$description": "Max width for readable content" },
+        "container": { "$value": "1200px", "$description": "Max width for standard layouts" },
+        "wide": { "$value": "1440px", "$description": "Max width for wide layouts" },
+        "full": { "$value": "1920px", "$description": "Max width for full-bleed" }
+      }
+    }
+  }
+}

package/tokens/primitive/radius.tokens.json

@@ -0,0 +1,26 @@
+{
+  "$description": "Citron border radius. Soft, premium — 14-16px for interactive elements, generously rounded surfaces.",
+  "inkblot": {
+    "radius": {
+      "$type": "dimension",
+      "$description": "Border radius scale — smooth, never sharp",
+      "none": { "$value": "0",      "$description": "No rounding" },
+      "sm":   { "$value": "6px",    "$description": "Subtle rounding, chips" },
+      "md":   { "$value": "10px",   "$description": "Inputs, small cards" },
+      "lg":   { "$value": "14px",   "$description": "Buttons, interactive elements" },
+      "xl":   { "$value": "18px",   "$description": "Cards, modals" },
+      "2xl":  { "$value": "24px",   "$description": "Large surfaces, hero cards" },
+      "full": { "$value": "9999px", "$description": "Pills, avatars, toggles" }
+    },
+    "border": {
+      "$type": "dimension",
+      "$description": "Border widths — minimal, no heavy borders",
+      "width": {
+        "none":   { "$value": "0",   "$description": "No border" },
+        "thin":   { "$value": "1px", "$description": "Subtle dividers, the default" },
+        "medium": { "$value": "2px", "$description": "Focus rings" },
+        "thick":  { "$value": "3px", "$description": "Strong emphasis, rarely used" }
+      }
+    }
+  }
+}

package/tokens/primitive/shadow.tokens.json

@@ -0,0 +1,41 @@
+{
+  "$description": "Citron elevation. Warm, diffused shadows — like studio lighting on matte paper. No harsh depth.",
+  "inkblot": {
+    "shadow": {
+      "$type": "shadow",
+      "$description": "Box shadows — warm-tinted, diffused. Cards should feel like floating matte paper.",
+      "none": {
+        "$value": "none",
+        "$description": "No shadow"
+      },
+      "xs": {
+        "$value": "0 1px 2px 0 rgba(29, 28, 25, 0.04)",
+        "$description": "Barely there lift"
+      },
+      "sm": {
+        "$value": "0 2px 8px -1px rgba(29, 28, 25, 0.06), 0 1px 3px -1px rgba(29, 28, 25, 0.04)",
+        "$description": "Cards — soft, warm, diffused"
+      },
+      "md": {
+        "$value": "0 4px 16px -2px rgba(29, 28, 25, 0.08), 0 2px 6px -2px rgba(29, 28, 25, 0.04)",
+        "$description": "Elevated cards, dropdowns"
+      },
+      "lg": {
+        "$value": "0 8px 24px -4px rgba(29, 28, 25, 0.10), 0 4px 10px -4px rgba(29, 28, 25, 0.04)",
+        "$description": "Modals, popovers"
+      },
+      "xl": {
+        "$value": "0 16px 40px -8px rgba(29, 28, 25, 0.12), 0 8px 16px -8px rgba(29, 28, 25, 0.04)",
+        "$description": "Maximum elevation — ambient, not harsh"
+      }
+    },
+    "opacity": {
+      "$type": "number",
+      "$description": "Opacity scale",
+      "disabled": { "$value": 0.4,  "$description": "Disabled elements" },
+      "overlay":  { "$value": 0.45, "$description": "Modal backdrops — not too heavy" },
+      "subtle":   { "$value": 0.6,  "$description": "Secondary content" },
+      "default":  { "$value": 1,    "$description": "Full opacity" }
+    }
+  }
+}

package/tokens/primitive/spacing.tokens.json

@@ -0,0 +1,38 @@
+{
+  "$description": "Inkblot Studio spacing scale. 4pt base grid for pixel-perfect alignment.",
+  "inkblot": {
+    "spacing": {
+      "$type": "dimension",
+      "$description": "Spacing scale - 4pt base unit",
+      "0": { "$value": "0", "$description": "No spacing" },
+      "1": { "$value": "0.25rem", "$description": "4px" },
+      "2": { "$value": "0.5rem", "$description": "8px" },
+      "3": { "$value": "0.75rem", "$description": "12px" },
+      "4": { "$value": "1rem", "$description": "16px" },
+      "5": { "$value": "1.25rem", "$description": "20px" },
+      "6": { "$value": "1.5rem", "$description": "24px" },
+      "8": { "$value": "2rem", "$description": "32px" },
+      "10": { "$value": "2.5rem", "$description": "40px" },
+      "12": { "$value": "3rem", "$description": "48px" },
+      "16": { "$value": "4rem", "$description": "64px" },
+      "20": { "$value": "5rem", "$description": "80px" },
+      "24": { "$value": "6rem", "$description": "96px" },
+      "32": { "$value": "8rem", "$description": "128px" }
+    },
+    "size": {
+      "$type": "dimension",
+      "$description": "Component sizing - icons, touch targets",
+      "icon": {
+        "xs": { "$value": "1rem", "$description": "16px icon" },
+        "sm": { "$value": "1.25rem", "$description": "20px icon" },
+        "md": { "$value": "1.5rem", "$description": "24px icon" },
+        "lg": { "$value": "2rem", "$description": "32px icon" },
+        "xl": { "$value": "2.5rem", "$description": "40px icon" }
+      },
+      "touchTarget": {
+        "min": { "$value": "44px", "$description": "Minimum touch target (WCAG)" },
+        "comfortable": { "$value": "48px", "$description": "Comfortable touch target" }
+      }
+    }
+  }
+}

package/tokens/primitive/typography.tokens.json

@@ -0,0 +1,60 @@
+{
+  "$description": "Citron typography. Modern humanist sans-serif. Clear hierarchy through spacing and weight, not size extremes.",
+  "inkblot": {
+    "typography": {
+      "$type": "fontFamily",
+      "$description": "Font families — humanist sans-serif for warmth and readability",
+      "fontFamily": {
+        "sans": {
+          "$value": "'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          "$description": "Primary UI font — humanist, modern, highly legible"
+        },
+        "mono": {
+          "$value": "'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace",
+          "$description": "Code and data"
+        },
+        "display": {
+          "$value": "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+          "$description": "Headlines — same family, optical size variant"
+        }
+      },
+      "fontSize": {
+        "$type": "dimension",
+        "$description": "Type scale — restrained, intentional. No oversized dramatic headings.",
+        "xs":   { "$value": "0.75rem",   "$description": "12px — captions, meta" },
+        "sm":   { "$value": "0.8125rem", "$description": "13px — secondary text" },
+        "base": { "$value": "0.9375rem", "$description": "15px — body text, slightly refined from 16" },
+        "md":   { "$value": "1.0625rem", "$description": "17px — emphasized body" },
+        "lg":   { "$value": "1.25rem",   "$description": "20px — card titles, subheadings" },
+        "xl":   { "$value": "1.5rem",    "$description": "24px — section titles" },
+        "2xl":  { "$value": "1.75rem",   "$description": "28px — page titles" },
+        "3xl":  { "$value": "2.125rem",  "$description": "34px — hero — composed, not shouting" },
+        "4xl":  { "$value": "2.75rem",   "$description": "44px — display, rarely used" },
+        "5xl":  { "$value": "3.25rem",   "$description": "52px — maximum display" }
+      },
+      "fontWeight": {
+        "$type": "fontWeight",
+        "regular":  { "$value": "400", "$description": "Body text" },
+        "medium":   { "$value": "500", "$description": "Emphasis, labels, card titles" },
+        "semibold": { "$value": "600", "$description": "Headings, buttons" },
+        "bold":     { "$value": "700", "$description": "Strong emphasis, sparingly" }
+      },
+      "lineHeight": {
+        "$type": "number",
+        "tight":   { "$value": 1.2,   "$description": "Headlines" },
+        "snug":    { "$value": 1.375, "$description": "Subheadings" },
+        "normal":  { "$value": 1.5,   "$description": "Body text" },
+        "relaxed": { "$value": 1.65,  "$description": "Long-form, generous breathing room" },
+        "loose":   { "$value": 1.8,   "$description": "Very spacious" }
+      },
+      "letterSpacing": {
+        "$type": "dimension",
+        "tighter": { "$value": "-0.04em",  "$description": "Large headlines" },
+        "tight":   { "$value": "-0.02em",  "$description": "Headings" },
+        "normal":  { "$value": "0",        "$description": "Body" },
+        "wide":    { "$value": "0.02em",   "$description": "Labels" },
+        "wider":   { "$value": "0.06em",   "$description": "Uppercase meta" }
+      }
+    }
+  }
+}

package/tokens/primitive/zindex.tokens.json

@@ -0,0 +1,19 @@
+{
+  "$description": "Inkblot Studio z-index hierarchy. Predictable layering for all UI surfaces.",
+  "inkblot": {
+    "zIndex": {
+      "$type": "number",
+      "$description": "Z-index layering scale. Never use arbitrary z-index values.",
+      "hide": { "$value": -1, "$description": "Hidden below base layer" },
+      "base": { "$value": 0, "$description": "Default document flow" },
+      "raised": { "$value": 1, "$description": "Slightly above base (cards on hover)" },
+      "dropdown": { "$value": 10, "$description": "Dropdowns, select menus" },
+      "sticky": { "$value": 20, "$description": "Sticky headers, nav bars" },
+      "overlay": { "$value": 30, "$description": "Backdrop overlays" },
+      "modal": { "$value": 40, "$description": "Modals, dialogs, sheets" },
+      "popover": { "$value": 50, "$description": "Popovers, tooltips" },
+      "toast": { "$value": 60, "$description": "Toast notifications" },
+      "max": { "$value": 9999, "$description": "Emergency override (avoid)" }
+    }
+  }
+}