@dataimago/tokens 0.1.0-alpha.1 → 0.1.0-alpha.12

package/dist/tokens.w3c.dtcg.json

@@ -0,0 +1,689 @@
+{
+  "color": {
+    "surface": {
+      "page": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Main page background — warm-grey (light) / ink-900 (dark)"
+      },
+      "page-scrolled": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Page background when navbar shrinks — matches page"
+      },
+      "elevated": {
+        "$value": "#f7f7f6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#1c1917"
+          }
+        },
+        "$description": "Cards, modals, dropdowns — one step above page (stone-50 on stone-100 / ink-800 on stone-900-aligned dark)"
+      },
+      "sunken": {
+        "$value": "#faf2e3",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#0c0a09"
+          }
+        },
+        "$description": "Input fields, code blocks — below page level"
+      },
+      "navbar": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Navbar background — matches page in both themes"
+      },
+      "navbar-scrolled": {
+        "$value": "#ededeb",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#141410"
+          }
+        },
+        "$description": "Navbar when scrolled/shrunk — matches page-scrolled"
+      },
+      "code": {
+        "$value": "#faf2e3",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#1c1917"
+          }
+        },
+        "$description": "Code block and inline code background"
+      }
+    },
+    "border": {
+      "subtle": {
+        "$value": "rgba(12, 10, 9, 0.08)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.08)"
+          }
+        },
+        "$description": "Subtle borders — element separation"
+      },
+      "moderate": {
+        "$value": "rgba(12, 10, 9, 0.15)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.15)"
+          }
+        },
+        "$description": "Moderate borders — defined boundaries"
+      },
+      "strong": {
+        "$value": "rgba(12, 10, 9, 0.25)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.25)"
+          }
+        },
+        "$description": "Strong borders — prominent separation"
+      },
+      "card": {
+        "$value": "rgba(12, 10, 9, 0.15)",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "rgba(253, 249, 242, 0.15)"
+          }
+        },
+        "$description": "Card border color with transparency for subtle definition"
+      },
+      "code": {
+        "$value": "#d6d3d1",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#292524"
+          }
+        },
+        "$description": "Code block border"
+      }
+    },
+    "content": {
+      "primary": {
+        "$value": "#14140f",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#fdf9f2"
+          }
+        },
+        "$description": "Primary text — stone-900 on stone-100 (light, matches presentation-theme.scss exactly) / paper-100 on dark surface"
+      },
+      "secondary": {
+        "$value": "#6a6a6a",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#a8a29e"
+          }
+        },
+        "$description": "Secondary text — WCAG-AA on all light surfaces (≥4.6:1, darkened from stone-500 #7c7c7c which was 3.6:1) / ink-300 on dark"
+      },
+      "muted": {
+        "$value": "#706964",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#89827d"
+          }
+        },
+        "$description": "Muted text — captions, meta info. WCAG-AA on all surfaces in both modes (light ≥4.6:1, dark ≥4.6:1; darkened/lightened from #78716c which failed AA on page)"
+      },
+      "inverse": {
+        "$value": "#fdf9f2",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#0c0a09"
+          }
+        },
+        "$description": "Inverse text — for contrasting backgrounds"
+      }
+    },
+    "interactive": {
+      "primary": {
+        "$value": "#434739",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#98a384"
+          }
+        },
+        "$description": "Primary interactive — forest-700 on light (7.75:1 on stone-100, white text 9.0:1 — passes WCAG AAA) / forest-300 on dark"
+      },
+      "hover": {
+        "$value": "#363a2e",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#7e8a6b"
+          }
+        },
+        "$description": "Hover state — forest-800 on light (slightly darker than canonical) / forest-400 on dark"
+      },
+      "accent": {
+        "$value": "#1f618d",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "Accent — sky-blue moral-weight color (iteration-2). Light: accent-500 (5.68:1 on stone-100, AA with headroom; 6.66:1 white-on-color for backplates). Dark: accent-300 (5.41:1 on stone-900, AA with headroom — closes the iteration-1 dark-mode AA-large-only contrast gap). FIRST instance of mode-aware role mapping in the system: light and dark point to different palette stops rather than the same hex. The scale-name `accent` is preserved across iteration-1 → iteration-2 (consumer-side text-accent-500 keeps working). See wiki/decisions/iteration-2-blue-accent.md for the dialectical reframe of the iteration-1 emancipation-copper framing (sky/horizon/Enlightenment-blueprint/Reformation-Protestant traditions vs. Western-traffic-coding STOP-red)."
+      },
+      "focus": {
+        "$value": "#434739",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#98a384"
+          }
+        },
+        "$description": "Focus indicators — mirrors interactive.primary"
+      }
+    },
+    "presentation": {
+      "accent": {
+        "$value": "#3498DB",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#3498DB"
+          }
+        },
+        "$description": "Presentation accent — Flat-UI peter-river; reserved for reveal.js 2030s-feel highlights. Not for body prose or interactive primary use. Pairs well with copper on dark slides."
+      },
+      "accent-hover": {
+        "$value": "#2980B9",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#2980B9"
+          }
+        },
+        "$description": "Presentation accent hover/emphasized variant — Flat-UI belize-hole"
+      }
+    },
+    "vertical-accent": {
+      "$comment": {
+        "$value": "Per-vertical brand accents — each Level-2 property's identity color, distinct from the house interactive.accent (the L1 sky-blue hub color). Mode-aware (light/dark stops) like interactive.accent. Used for app icons, navbar-logo emphasis, and per-vertical theming. Contrast vs surface.page verified WCAG: light values are the on-light marks, dark values the on-dark marks. dataimago (L1 hub) intentionally has no vertical accent — it uses interactive.accent + ink."
+      },
+      "dissertation": {
+        "$value": "#B87333",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#CE8E5C"
+          }
+        },
+        "$description": "dissertation-ai — copper (manuscript / annotation / the human hand in the margin). Re-authored at higher P3 chroma (~+28% light / +27% dark) for a vivid wide-gamut pop; sRGB fallback unchanged so contrast is preserved. Light: 3.23:1 on stone-100 (AA-large; large-mark use). Dark: #CE8E5C 6.72:1 on ink-900 (AA)."
+      },
+      "rpkg": {
+        "$value": "#3B82F6",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#60A5FA"
+          }
+        },
+        "$description": "rpkg-ai — engineering blue. Light: 3.14:1 on stone-100 (AA-large; large-mark use). Dark: #60A5FA 7.26:1 on ink-900 (AA)."
+      },
+      "SGPc": {
+        "$value": "#5A6310",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#B2BF22"
+          }
+        },
+        "$description": "SGPc-ai — growth yellow-green (decided 2026-06-26). The brand value is the bright #B2BF22, but it fails contrast on light surfaces (1.73:1), so LIGHT mode uses the darkened companion #5A6310 (5.55:1 on stone-100 — full AA) and DARK mode uses the bright #B2BF22 (9.12:1 on ink-900). See wiki/decisions/sgpc-accent.md."
+      }
+    },
+    "brand-mark": {
+      "$comment": {
+        "$value": "Brand-MARK colors (the dataimago monogram / wordmark logo treatment) — distinct from the interactive.accent role. The signature monogram red is a wide-gamut PILOT (see wiki/decisions/p3-oklch-color.md). It is mode-aware for AA-normal headroom: a single red cannot clear 4.5:1 on BOTH the light page (#ededeb) and ink-900 — light needs a deep red, dark needs a bright one. LIGHT uses the deepened #cc0000 (faithful P3, contrast-first); DARK keeps the vivid display-P3 primary red (#ff0000 fallback → color(display-p3 1 0 0)), where #ff0000 already passes AA-normal. Vivid override authored in tools/color-converter.mjs (dark-only for the red), emitted as a `#hex → color(display-p3 …)` cascade in the -p3 build."
+      },
+      "red": {
+        "$value": "#cc0000",
+        "$type": "color",
+        "$extensions": {
+          "com.dataimago.theme": {
+            "dark": "#ff0000"
+          }
+        },
+        "$description": "Signature monogram red — mode-aware for AA-normal. LIGHT: deepened #cc0000 (5.0:1 on stone-100 #ededeb / 5.5:1 on elevated — full AA-normal, safe at small sizes / as text). DARK: vivid #ff0000 fallback + display-P3 primary red (4.6:1 on ink-900 — AA-normal). Logo-mark color only — NOT the interactive accent (which is iteration-2 blue). Large navbar lift-wash marks keep the vivid display-P3 red (AA-large, large-mark use); this token is the AA-normal value for arbitrary/small mark reuse."
+      }
+    }
+  },
+  "shadow": {
+    "sm": {
+      "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+    },
+    "md": {
+      "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    "lg": {
+      "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1)"
+    },
+    "xl": {
+      "$value": "0 20px 25px -5px rgb(0 0 0 / 0.1)"
+    }
+  },
+  "border": {
+    "subtle": {
+      "$value": "rgba(20, 20, 16, 0.1)",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "rgba(237, 237, 235, 0.1)"
+        }
+      },
+      "$description": "Subtle borders - element separation"
+    },
+    "moderate": {
+      "$value": "rgba(20, 20, 16, 0.15)",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "rgba(237, 237, 235, 0.15)"
+        }
+      },
+      "$description": "Moderate borders - defined boundaries"
+    },
+    "focus": {
+      "$value": "#3498DB",
+      "$type": "color",
+      "$extensions": {
+        "com.dataimago.theme": {
+          "dark": "#4FC3F7"
+        }
+      },
+      "$description": "Focus indicators - accessibility"
+    }
+  },
+  "transition": {
+    "quick": {
+      "$value": "0.15s ease",
+      "$type": "duration",
+      "$description": "Snap-fast micro-interactions — hover lifts, focus rings, immediate-feedback affordances"
+    },
+    "standard": {
+      "$value": "0.25s ease-in-out",
+      "$type": "duration",
+      "$description": "Default for most state changes — toggles, button states, card hovers"
+    },
+    "smooth": {
+      "$value": "0.35s ease",
+      "$type": "duration",
+      "$description": "Theme transitions, navbar collapse/expand, layout shifts that should feel deliberate"
+    },
+    "logo": {
+      "$value": "0.3s",
+      "$type": "duration",
+      "$description": "Reserved for the dataimago wordmark / brand-mark transitions; do not borrow for general UI"
+    }
+  },
+  "font": {
+    "family": {
+      "sans": {
+        "$value": "Noto Sans, Fira Sans, system-ui, sans-serif",
+        "$description": "Primary sans-serif font - body text"
+      },
+      "mono": {
+        "$value": "JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace",
+        "$description": "Monospace font - code blocks and technical content"
+      },
+      "display": {
+        "$value": "var(--font-family-display-editorial)",
+        "$description": "Alias of display-editorial, and the load-bearing indirection .di-prose rebinds to swap a whole surface to the documentation family — do NOT rewrite heading rules to reference display-editorial directly or .di-prose stops working. Reference display-editorial/display-documentation explicitly only where the surface must NOT control the family (brand chrome, navbars). Its 0.3.0 removal was deferred 2026-08-10 under wiki/decisions/compatibility-contract.md (additive-only); removal now requires its own cleanup ADR. See wiki/decisions/display-family-split.md."
+      },
+      "display-editorial": {
+        "$value": "Josefin Sans, system-ui, sans-serif",
+        "$description": "Editorial display family — Josefin Sans, the brand voice. Used on surfaces where the heading does rhetorical/branding work: hero/landing, marketing, story showcases, slide titles. Default for unmarked headings. Pair with weight 500 (h1) per wiki/decisions/h1-weight-medium.md."
+      },
+      "display-documentation": {
+        "$value": "Noto Sans, system-ui, sans-serif",
+        "$description": "Documentation display family — Noto Sans, the wayfinding voice. Used on surfaces where the heading does structural work: API docs, foundation Section h2s, KNOWLEDGE.md/CLAUDE.md headings, long-form research subheadings. Activated by wrapping content in .di-prose; pair with weight 600 (semibold). See wiki/decisions/display-family-split.md."
+      },
+      "brand": {
+        "$value": "Futura, system-ui, sans-serif",
+        "$description": "Brand font - dataimago navbar and branding elements"
+      },
+      "math": {
+        "$value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
+        "$description": "Mathematical notation font — Noto Sans Math for broad Unicode math coverage; harmonises with the Noto Sans body stack"
+      }
+    },
+    "size": {
+      "micro": {
+        "$value": "0.75rem",
+        "$type": "dimension",
+        "$description": "Micro text - captions, metadata"
+      },
+      "small": {
+        "$value": "0.875rem",
+        "$type": "dimension",
+        "$description": "Small text - secondary information"
+      },
+      "base": {
+        "$value": "1rem",
+        "$type": "dimension",
+        "$description": "Base text size - body content"
+      },
+      "readable": {
+        "$value": "1.125rem",
+        "$type": "dimension",
+        "$description": "Comfortable reading size - main content"
+      },
+      "emphasis": {
+        "$value": "1.25rem",
+        "$type": "dimension",
+        "$description": "Emphasized text - call-outs"
+      },
+      "heading-small": {
+        "$value": "1.5rem",
+        "$type": "dimension",
+        "$description": "Small headings - H4, H5"
+      },
+      "heading-medium": {
+        "$value": "1.875rem",
+        "$type": "dimension",
+        "$description": "Medium headings - H3"
+      },
+      "heading-large": {
+        "$value": "2.25rem",
+        "$type": "dimension",
+        "$description": "Large headings - H2"
+      },
+      "heading-xl": {
+        "$value": "3rem",
+        "$type": "dimension",
+        "$description": "Extra large headings - H1"
+      }
+    },
+    "weight": {
+      "extralight": {
+        "$value": "200",
+        "$type": "number",
+        "$description": "Extra-light weight — reserved for display-scale refinements (subtitles, oversized numerals)"
+      },
+      "light": {
+        "$value": "300",
+        "$type": "number",
+        "$description": "Light weight — minor headings (h4–h6), large serif-like display at small sizes"
+      },
+      "normal": {
+        "$value": "400",
+        "$type": "number",
+        "$description": "Normal text weight — body content"
+      },
+      "medium": {
+        "$value": "500",
+        "$type": "number",
+        "$description": "Medium weight — emphasis within text, h2"
+      },
+      "semibold": {
+        "$value": "600",
+        "$type": "number",
+        "$description": "Semi-bold — subtitles, important text"
+      },
+      "bold": {
+        "$value": "700",
+        "$type": "number",
+        "$description": "Bold — h1, strong emphasis"
+      },
+      "heading": {
+        "_invariant": {
+          "$value": "Heading-weight cluster — 400 floor for all Josefin Sans headings (see wiki/decisions/josefin-weight-floor.md). Sub-400 weights (200, 300) are bound to the opt-in .di-numeric-display utility class, never the default for prose-tier headings. Per wiki/decisions/h1-weight-medium.md the prose-correct band for editorial headings is 400–500."
+        },
+        "h1": {
+          "$value": "var(--font-weight-medium)",
+          "$description": "Heading h1 weight — medium (500). Top-level editorial voice; preserves Josefin Sans's geometric character at hero scale (was bold/700 before iteration-1; see wiki/decisions/h1-weight-medium.md)."
+        },
+        "h2": {
+          "$value": "var(--font-weight-medium)",
+          "$description": "Heading h2 weight — medium (500). Second tier; sub-sections."
+        },
+        "h3": {
+          "$value": "var(--font-weight-normal)",
+          "$description": "Heading h3 weight — normal (400). Differentiated from body by size, not weight."
+        },
+        "h4": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h4 weight — light (300). Minor heading; quiet hierarchy marker."
+        },
+        "h5": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h5 weight — light (300). Minor heading."
+        },
+        "h6": {
+          "$value": "var(--font-weight-light)",
+          "$description": "Heading h6 weight — light (300). Minor heading."
+        },
+        "subtitle": {
+          "$value": "var(--font-weight-semibold)",
+          "$description": "Subtitle weight — semibold (600). Heavier than h3 on purpose: reads as emphasis, not continuation."
+        }
+      }
+    },
+    "style": {
+      "normal": {
+        "$value": "normal",
+        "$description": "Normal font style - upright text"
+      },
+      "italic": {
+        "$value": "italic",
+        "$description": "Italic style - sloped text with true italic glyphs"
+      },
+      "oblique": {
+        "$value": "oblique",
+        "$description": "Oblique style - sloped text without true italic design"
+      }
+    },
+    "lineHeight": {
+      "tight": {
+        "$value": "1.25",
+        "$type": "number",
+        "$description": "Tight line height - headings"
+      },
+      "normal": {
+        "$value": "1.5",
+        "$type": "number",
+        "$description": "Normal line height - body text"
+      },
+      "relaxed": {
+        "$value": "1.625",
+        "$type": "number",
+        "$description": "Relaxed line height - long-form content"
+      }
+    },
+    "feature-settings": {
+      "_invariant": {
+        "$value": "OpenType feature settings cluster — display rules apply lining figures (lnum) so numerals render uniform-baseline at heading scale; body rules retain old-style figures where they belong (in-line numerical mentions in prose). See wiki/decisions/display-lining-figures.md."
+      },
+      "display": {
+        "$value": "\"lnum\"",
+        "$description": "Lining figures (lnum) for display headings — uniform baseline, uniform height; corrects Josefin Sans's old-style default figures that read as casual at editorial/title scale. Consumed by every CSS rule whose font-family resolves to --font-family-display, --font-family-display-editorial, or --font-family-display-documentation."
+      },
+      "body": {
+        "$value": "\"normal\"",
+        "$description": "Default figure style for body text — preserves Josefin's old-style figures where they harmonize with lowercase letterforms in continuous prose."
+      }
+    }
+  },
+  "spacing": {
+    "xs": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "2rem",
+      "$type": "dimension"
+    },
+    "2xl": {
+      "$value": "3rem",
+      "$type": "dimension"
+    },
+    "3xl": {
+      "$value": "4rem",
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "sm": {
+      "$value": "0.25rem",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "0.5rem",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "0.75rem",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "1rem",
+      "$type": "dimension"
+    },
+    "full": {
+      "$value": "9999px",
+      "$type": "dimension"
+    }
+  },
+  "$extensions": {
+    "com.dataimago.components": {
+      "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)"
+        }
+      }
+    },
+    "com.dataimago.frequent": {
+      "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"
+        }
+      }
+    }
+  }
+}