@dataimago/tokens 0.1.0-alpha.1

package/dist/tokens.scss

@@ -0,0 +1,202 @@
+:root {
+  --color-palette-ink-50: #f5f5f4;
+  --color-palette-ink-100: #e7e5e4;
+  --color-palette-ink-200: #d6d3d1;
+  --color-palette-ink-300: #a8a29e;
+  --color-palette-ink-400: #78716c;
+  --color-palette-ink-500: #57534e;
+  --color-palette-ink-600: #44403c;
+  --color-palette-ink-700: #292524;
+  --color-palette-ink-800: #1c1917;
+  --color-palette-ink-900: #0c0a09;
+  --color-palette-cream-50: #fefdfb;
+  --color-palette-cream-100: #fdf9f2;
+  --color-palette-cream-200: #faf2e3;
+  --color-palette-cream-300: #f5e8cf;
+  --color-palette-cream-400: #edd9b3;
+  --color-palette-cream-500: #e0c088;
+  --color-palette-copper-50: #fdf4ee;
+  --color-palette-copper-100: #fbe5d1;
+  --color-palette-copper-200: #f6c79c;
+  --color-palette-copper-300: #f0a467;
+  --color-palette-copper-400: #ea8441;
+  --color-palette-copper-500: #d46820;
+  --color-palette-copper-600: #b55017;
+  --color-palette-copper-700: #913d15;
+  --color-palette-copper-800: #753318;
+  --color-palette-copper-900: #612b16;
+  --color-palette-accent-50: #fdf2f2;
+  --color-palette-accent-500: #b54a27;
+  --color-palette-accent-600: #9a3e20;
+  --color-palette-accent-700: #7d321a;
+  --color-palette-presentation-blue-50: #f0f8fc;
+  --color-palette-presentation-blue-500: #3498DB;
+  --color-palette-presentation-blue-600: #2980B9;
+  --color-palette-presentation-blue-700: #1f618d;
+  --color-functional-success: #27AE60;
+  --color-functional-warning: #F39C12;
+  --color-functional-error: #E74C3C;
+  --color-functional-info: #3498DB;
+  --font-family-sans: Fira Sans, system-ui, sans-serif;
+  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
+  --font-family-display: Josefin Sans, system-ui, sans-serif;
+  --font-family-brand: Futura, system-ui, sans-serif;
+  --font-family-math: Fira Math, Fira Sans Math, system-ui, sans-serif;
+  --font-size-micro: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-readable: 1.125rem;
+  --font-size-emphasis: 1.25rem;
+  --font-size-heading-small: 1.5rem;
+  --font-size-heading-medium: 1.875rem;
+  --font-size-heading-large: 2.25rem;
+  --font-size-heading-xl: 3rem;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heading-h1: var(--font-weight-bold);
+  --font-weight-heading-h2: var(--font-weight-medium);
+  --font-weight-heading-h3: var(--font-weight-normal);
+  --font-weight-heading-h4: var(--font-weight-light);
+  --font-weight-heading-h5: var(--font-weight-light);
+  --font-weight-heading-h6: var(--font-weight-light);
+  --font-weight-heading-subtitle: var(--font-weight-semibold);
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.625;
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+:root, [data-bs-theme="light"] {
+  --color-surface-page: #fdf9f2;
+  --color-surface-page-scrolled: #fdf9f2;
+  --color-surface-elevated: #fefdfb;
+  --color-surface-sunken: #faf2e3;
+  --color-surface-navbar: #fdf9f2;
+  --color-surface-navbar-scrolled: #fdf9f2;
+  --color-surface-code: #faf2e3;
+  --color-border-subtle: rgba(12, 10, 9, 0.08);
+  --color-border-moderate: rgba(12, 10, 9, 0.15);
+  --color-border-strong: rgba(12, 10, 9, 0.25);
+  --color-border-card: rgba(12, 10, 9, 0.15);
+  --color-border-code: #d6d3d1;
+  --color-content-primary: #0c0a09;
+  --color-content-secondary: #57534e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #fdf9f2;
+  --color-interactive-primary: #d46820;
+  --color-interactive-hover: #b55017;
+  --color-interactive-accent: #b54a27;
+  --color-interactive-focus: #d46820;
+  --color-presentation-accent: #3498DB;
+  --color-presentation-accent-hover: #2980B9;
+  --contrast-high: rgb(20, 20, 16);
+  --contrast-readable: rgb(20, 20, 16);
+  --contrast-medium: #7c7c7c;
+  --contrast-subtle: #7c7c7c;
+  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
+  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --border-subtle: rgba(20, 20, 16, 0.1);
+  --border-moderate: rgba(20, 20, 16, 0.15);
+  --border-focus: #3498DB;
+  --navigation-hover-background: rgba(20, 20, 16, 0.05);
+  --navigation-active-background: rgba(20, 20, 16, 0.1);
+}
+
+[data-bs-theme="dark"] {
+  --color-surface-page: #0c0a09;
+  --color-surface-page-scrolled: #0c0a09;
+  --color-surface-elevated: #1c1917;
+  --color-surface-sunken: #0c0a09;
+  --color-surface-navbar: #0c0a09;
+  --color-surface-navbar-scrolled: #0c0a09;
+  --color-surface-code: #1c1917;
+  --color-border-subtle: rgba(253, 249, 242, 0.08);
+  --color-border-moderate: rgba(253, 249, 242, 0.15);
+  --color-border-strong: rgba(253, 249, 242, 0.25);
+  --color-border-card: rgba(253, 249, 242, 0.15);
+  --color-border-code: #292524;
+  --color-content-primary: #fdf9f2;
+  --color-content-secondary: #a8a29e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #0c0a09;
+  --color-interactive-primary: #f0a467;
+  --color-interactive-hover: #ea8441;
+  --color-interactive-accent: #b54a27;
+  --color-interactive-focus: #f0a467;
+  --color-presentation-accent: #3498DB;
+  --color-presentation-accent-hover: #2980B9;
+  --contrast-high: rgb(237, 237, 235);
+  --contrast-readable: rgb(237, 237, 235);
+  --contrast-medium: #83838f;
+  --contrast-subtle: #83838f;
+  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --border-subtle: rgba(237, 237, 235, 0.1);
+  --border-moderate: rgba(237, 237, 235, 0.15);
+  --border-focus: #4FC3F7;
+  --navigation-hover-background: rgba(237, 237, 235, 0.05);
+  --navigation-active-background: rgba(237, 237, 235, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-surface-page: #0c0a09;
+    --color-surface-page-scrolled: #0c0a09;
+    --color-surface-elevated: #1c1917;
+    --color-surface-sunken: #0c0a09;
+    --color-surface-navbar: #0c0a09;
+    --color-surface-navbar-scrolled: #0c0a09;
+    --color-surface-code: #1c1917;
+    --color-border-subtle: rgba(253, 249, 242, 0.08);
+    --color-border-moderate: rgba(253, 249, 242, 0.15);
+    --color-border-strong: rgba(253, 249, 242, 0.25);
+    --color-border-card: rgba(253, 249, 242, 0.15);
+    --color-border-code: #292524;
+    --color-content-primary: #fdf9f2;
+    --color-content-secondary: #a8a29e;
+    --color-content-muted: #78716c;
+    --color-content-inverse: #0c0a09;
+    --color-interactive-primary: #f0a467;
+    --color-interactive-hover: #ea8441;
+    --color-interactive-accent: #b54a27;
+    --color-interactive-focus: #f0a467;
+    --color-presentation-accent: #3498DB;
+    --color-presentation-accent-hover: #2980B9;
+    --contrast-high: rgb(237, 237, 235);
+    --contrast-readable: rgb(237, 237, 235);
+    --contrast-medium: #83838f;
+    --contrast-subtle: #83838f;
+    --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+    --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+    --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --border-subtle: rgba(237, 237, 235, 0.1);
+    --border-moderate: rgba(237, 237, 235, 0.15);
+    --border-focus: #4FC3F7;
+    --navigation-hover-background: rgba(237, 237, 235, 0.05);
+    --navigation-active-background: rgba(237, 237, 235, 0.1);
+  }
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@dataimago/tokens",
+  "version": "0.1.0-alpha.1",
+  "description": "dataimago design tokens — canonical JSON sources plus generated TS/CSS artifacts",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dataimago/dataimago-design.git",
+    "directory": "packages/tokens"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./colors": "./src/colors.json",
+    "./theme-colors": "./src/theme-colors.json",
+    "./typography": "./src/typography.json",
+    "./spacing": "./src/spacing.json",
+    "./effects": "./src/effects.json",
+    "./frequent": "./src/frequent.json",
+    "./components": "./src/components.json",
+    "./css": "./dist/tokens.css",
+    "./scss": "./dist/tokens.scss"
+  },
+  "files": [
+    "src",
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "design-tokens",
+    "dataimago",
+    "design-system"
+  ],
+  "scripts": {
+    "build": "node build.mjs"
+  }
+}

package/src/README.md

@@ -0,0 +1,175 @@
+# dataimago Design Tokens - Developer Guide
+
+## 🎯 Source of Truth Architecture
+
+This directory contains the **authoritative source** for all design decisions across the dataimago ecosystem. These JSON-based tokens serve as the foundation for:
+
+- **CSS Custom Properties**: Generated via idempotent build process
+- **Theme Support**: Automatic light/dark mode generation  
+- **Consumer Integration**: Distributed to all consumer repositories via git submodules
+- **Design Consistency**: Single definition → multiple output formats
+
+## 🔄 Idempotent Token Processing
+
+The token build system follows strict deterministic principles:
+
+- **✅ Stable Output**: Same tokens → identical CSS every time
+- **✅ No Timestamps**: Generated CSS excludes dynamic timestamps
+- **✅ Version Controlled**: Only source tokens are committed, generated files are build artifacts
+- **✅ Consumer Ready**: Generated assets integrate seamlessly into consumer repositories
+
+## Overview
+These tokens are processed into CSS custom properties that work across light and dark themes via our idempotent build system.
+
+## Token Structure
+
+### 🎨 **theme-colors.json** - Theme-Aware Colors
+Your carefully tuned light/dark color scheme:
+
+```json
+{
+  "color": {
+    "surface": {
+      "page": {
+        "light": "rgb(237, 237, 235)",  // Your warm light gray
+        "dark": "rgb(20, 20, 16)"       // Your warm dark background
+      }
+    },
+    "content": {
+      "primary": {
+        "light": "rgb(20, 20, 16)",             // Near Black text on light
+        "dark": "rgb(237, 237, 235)"    // Near white on dark
+      },
+      "secondary": {
+        "light": "#7c7c7c",             // Your tuned light gray
+        "dark": "#83838f"               // Your tuned dark gray
+      }
+    }
+  }
+}
+```
+
+### 🏃 **frequent.json** - High-Change Values
+Most commonly adjusted in DevTools:
+
+```json
+{
+  "spacing": {
+    "component": {
+      "padding": "1rem",    // Card/button internal spacing
+      "margin": "1.5rem",   // Between-component spacing
+      "gap": "0.75rem"      // Flex/grid gaps
+    }
+  },
+  "contrast": {
+    "readable": "...",      // Comfortable reading contrast
+    "medium": "...",        // Secondary information
+    "subtle": "..."         // De-emphasized text
+  }
+}
+```
+
+### 🎯 **effects.json** - Theme-Aware Effects
+Shadows and borders that adapt to themes:
+
+```json
+{
+  "shadow": {
+    "subtle": {
+      "light": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "dark": "0 1px 2px 0 rgb(255 255 255 / 0.03)"
+    }
+  },
+  "border": {
+    "subtle": {
+      "light": "rgba(0, 0, 0, 0.1)",
+      "dark": "rgba(255, 255, 255, 0.1)"
+    }
+  }
+}
+```
+
+### 🧩 **components.json** - Component References
+Components reference semantic tokens:
+
+```json
+{
+  "card": {
+    "background": "surface.elevated",
+    "padding": "spacing.component.padding",
+    "shadow": "shadow.moderate"
+  }
+}
+```
+
+## DevTools → Token Workflow
+
+### Common Adjustments:
+
+| **DevTools Change** | **Edit This Token** | **CSS Variable Generated** |
+|---------------------|--------------------|-----------------------------|
+| Card padding too tight | `frequent.json` → `spacing.component.padding` | `--spacing-component-padding` |
+| Text too light in dark | `theme-colors.json` → `content.secondary.dark` | `--color-content-secondary` |
+| Button needs more emphasis | `theme-colors.json` → `interactive.primary` | `--color-interactive-primary` |
+| Borders invisible | `effects.json` → `border.subtle.dark` | `--color-border-subtle` |
+
+### Quick Edit Workflow:
+
+```bash
+# 1. Edit token JSON file
+edit ui/src/tokens/frequent.json
+
+# 2. Quick rebuild
+cd ui && npm run watch  # Auto-rebuilds on save
+
+# 3. Changes appear instantly in browser
+```
+
+## Generated CSS Structure
+
+The build system creates theme-aware CSS custom properties:
+
+```css
+/* Theme-agnostic values */
+:root {
+  --color-brand-dataimago-primary: #3498DB;
+  --spacing-component-padding: 1rem;
+}
+
+/* Light theme */
+:root, [data-bs-theme="light"] {
+  --color-surface-page: rgb(237, 237, 235);
+  --color-content-primary: #000000;
+}
+
+/* Dark theme */
+[data-bs-theme="dark"], @media (prefers-color-scheme: dark) {
+  --color-surface-page: rgb(20, 20, 16);
+  --color-content-primary: rgb(237, 237, 235);
+}
+```
+
+## Token Naming Convention
+
+**Pattern**: `category-purpose-variant`
+
+- `--color-surface-page` = Color for surface/page level
+- `--color-content-primary` = Color for content/primary emphasis  
+- `--spacing-component-padding` = Spacing for component/padding use
+- `--shadow-moderate` = Shadow for moderate elevation
+
+## Theme Philosophy
+
+- **Semantic naming** = Describes purpose, not appearance
+- **Your colors preserved** = Light/dark values from your tuned SCSS files
+- **DevTools friendly** = Easy to find the token you need to change
+- **Automatic theming** = Components work in both themes without extra code
+
+## Integration with Existing System
+
+- **Quarto themes** continue working (website-light.scss, website-dark.scss)
+- **New tokens** complement existing system
+- **Backward compatible** = Old CSS still works during transition
+- **Build system** automatically distributes to all channels
+
+Your carefully tuned color relationships are now systematized and ready for efficient DevTools-driven development! 🎯

package/src/colors.json

@@ -0,0 +1,68 @@
+{
+  "color": {
+    "palette": {
+      "ink": {
+        "50":  { "value": "#f5f5f4", "description": "Ink scale — warmest near-white; use for large surfaces when cream feels too yellow" },
+        "100": { "value": "#e7e5e4", "description": "Ink scale — subtle neutral surface tint" },
+        "200": { "value": "#d6d3d1", "description": "Ink scale — borders, dividers on light surfaces" },
+        "300": { "value": "#a8a29e", "description": "Ink scale — muted text on dark surfaces" },
+        "400": { "value": "#78716c", "description": "Ink scale — secondary text on dark surfaces" },
+        "500": { "value": "#57534e", "description": "Ink scale — secondary text on light surfaces" },
+        "600": { "value": "#44403c", "description": "Ink scale — primary text on mid surfaces" },
+        "700": { "value": "#292524", "description": "Ink scale — primary text, high contrast" },
+        "800": { "value": "#1c1917", "description": "Ink scale — surfaces in dark mode" },
+        "900": { "value": "#0c0a09", "description": "Ink scale — near-black; primary dark surface and text color" }
+      },
+      "cream": {
+        "50":  { "value": "#fefdfb", "description": "Cream scale — lightest warm surface" },
+        "100": { "value": "#fdf9f2", "description": "Cream scale — canonical page background (light mode)" },
+        "200": { "value": "#faf2e3", "description": "Cream scale — slightly richer surface tint" },
+        "300": { "value": "#f5e8cf", "description": "Cream scale — pull-quote background, subtle panels" },
+        "400": { "value": "#edd9b3", "description": "Cream scale — muted warm accent" },
+        "500": { "value": "#e0c088", "description": "Cream scale — strong warm accent; wheat" }
+      },
+      "copper": {
+        "50":  { "value": "#fdf4ee", "description": "Copper scale — warm tint wash" },
+        "100": { "value": "#fbe5d1", "description": "Copper scale — soft copper backdrop" },
+        "200": { "value": "#f6c79c", "description": "Copper scale — muted copper accent" },
+        "300": { "value": "#f0a467", "description": "Copper scale — interactive primary on dark mode" },
+        "400": { "value": "#ea8441", "description": "Copper scale — hover on dark mode" },
+        "500": { "value": "#d46820", "description": "Copper scale — canonical interactive primary (light mode)" },
+        "600": { "value": "#b55017", "description": "Copper scale — hover on light mode" },
+        "700": { "value": "#913d15", "description": "Copper scale — active/pressed state" },
+        "800": { "value": "#753318", "description": "Copper scale — on dark surfaces" },
+        "900": { "value": "#612b16", "description": "Copper scale — deep foundation" }
+      },
+      "accent": {
+        "50":  { "value": "#fdf2f2", "description": "Accent scale — faint wash for emancipation-coded panels" },
+        "500": { "value": "#b54a27", "description": "Accent scale — canonical moral/emancipation accent" },
+        "600": { "value": "#9a3e20", "description": "Accent scale — hover on accent" },
+        "700": { "value": "#7d321a", "description": "Accent scale — pressed state" }
+      },
+      "presentation-blue": {
+        "50":  { "value": "#f0f8fc", "description": "Presentation-blue scale — pale wash for reveal.js callout backgrounds" },
+        "500": { "value": "#3498DB", "description": "Presentation-blue scale — Flat-UI peter-river; reserved presentation accent (distinct from functional.info)" },
+        "600": { "value": "#2980B9", "description": "Presentation-blue scale — Flat-UI belize-hole; hover/emphasized on presentation accent" },
+        "700": { "value": "#1f618d", "description": "Presentation-blue scale — pressed/deep emphasis on presentation accent" }
+      }
+    },
+    "functional": {
+      "success": {
+        "value": "#27AE60",
+        "description": "Success states and positive actions"
+      },
+      "warning": {
+        "value": "#F39C12",
+        "description": "Warning states and caution"
+      },
+      "error": {
+        "value": "#E74C3C",
+        "description": "Error states and critical issues"
+      },
+      "info": {
+        "value": "#3498DB",
+        "description": "Informational content"
+      }
+    }
+  }
+}

package/src/components.json

@@ -0,0 +1,44 @@
+{
+  "card": {
+    "background": "surface.elevated",
+    "padding": "spacing.component.padding", 
+    "radius": "radius.component",
+    "shadow": "shadow.moderate",
+    "border": "border.subtle",
+    "description": "Card component tokens - references semantic tokens"
+  },
+  "button": {
+    "padding-x": "spacing.component.padding",
+    "padding-y": "spacing.micro.normal",
+    "radius": "radius.component",
+    "font-weight": "typography.weight.medium",
+    "primary": {
+      "background": "interactive.primary",
+      "text": "content.inverse",
+      "hover": "interactive.hover"
+    },
+    "secondary": {
+      "background": "surface.elevated", 
+      "text": "content.primary",
+      "hover": "surface.page"
+    }
+  },
+  "navbar": {
+    "background": "surface.navbar",
+    "background-scrolled": "surface.navbar-scrolled",
+    "text": "content.secondary",
+    "text-hover": "interactive.accent",
+    "transition": "transition.smooth"
+  },
+  "navigation": {
+    "item-spacing": "spacing.micro.loose",
+    "hover-background": {
+      "light": "rgba(20, 20, 16, 0.05)",
+      "dark": "rgba(237, 237, 235, 0.05)"
+    },
+    "active-background": {
+      "light": "rgba(20, 20, 16, 0.1)",
+      "dark": "rgba(237, 237, 235, 0.1)"
+    }
+  }
+}

package/src/effects.json

@@ -0,0 +1,43 @@
+{
+  "shadow": {
+    "subtle": {
+      "light": "0 1px 2px 0 rgb(20 20 16 / 0.05)",
+      "dark": "0 1px 2px 0 rgb(237 237 235 / 0.03)",
+      "description": "Subtle elevation - barely perceptible"
+    },
+    "moderate": {
+      "light": "0 4px 6px -1px rgb(20 20 16 / 0.1)",
+      "dark": "0 4px 6px -1px rgb(237 237 235 / 0.05)",
+      "description": "Moderate elevation - cards, dropdowns"
+    },
+    "prominent": {
+      "light": "0 10px 15px -3px rgb(20 20 16 / 0.1)",
+      "dark": "0 10px 15px -3px rgb(237 237 235 / 0.4)",
+      "description": "Strong elevation - modals, floating elements"
+    }
+  },
+  "border": {
+    "subtle": {
+      "light": "rgba(20, 20, 16, 0.1)",
+      "dark": "rgba(237, 237, 235, 0.1)",
+      "description": "Subtle borders - element separation"
+    },
+    "moderate": {
+      "light": "rgba(20, 20, 16, 0.15)",
+      "dark": "rgba(237, 237, 235, 0.15)",
+      "description": "Moderate borders - defined boundaries"
+    },
+    "focus": {
+      "light": "#3498DB",
+      "dark": "#4FC3F7",
+      "description": "Focus indicators - accessibility"
+    }
+  },
+  "transition": {
+    "quick": "0.15s ease",
+    "standard": "0.25s ease-in-out",
+    "smooth": "0.35s ease",
+    "logo": "0.3s",
+    "description": "Animation durations - consistent timing"
+  }
+}

package/src/frequent.json

@@ -0,0 +1,51 @@
+{
+  "spacing": {
+    "component": {
+      "padding": "1rem",
+      "margin": "1.5rem",
+      "gap": "0.75rem",
+      "description": "Most frequently adjusted spacing - component internals"
+    },
+    "layout": {
+      "section": "3rem",
+      "container": "2rem",
+      "comfortable": "1rem",
+      "description": "Layout-level spacing - between major elements"
+    },
+    "micro": {
+      "tight": "0.25rem",
+      "normal": "0.5rem", 
+      "loose": "1rem",
+      "description": "Fine-tuning spacing - when things feel cramped or loose"
+    }
+  },
+  "radius": {
+    "component": "0.5rem",
+    "subtle": "0.25rem",
+    "prominent": "0.75rem",
+    "full": "9999px",
+    "description": "Border radius values - component rounding"
+  },
+  "contrast": {
+    "high": {
+      "light": "rgb(20, 20, 16)",
+      "dark": "rgb(237, 237, 235)",
+      "description": "Maximum contrast text - accessibility focus"
+    },
+    "readable": {
+      "light": "rgb(20, 20, 16)",
+      "dark": "rgb(237, 237, 235)",
+      "description": "Comfortable reading contrast - primary text"
+    },
+    "medium": {
+      "light": "#7c7c7c",
+      "dark": "#83838f", 
+      "description": "Medium emphasis - secondary information"
+    },
+    "subtle": {
+      "light": "#7c7c7c",
+      "dark": "#83838f",
+      "description": "De-emphasized text - captions, meta info"
+    }
+  }
+}