nano_metrics/design_system/tokens/tokens.json

{
  "$schema": "design-tokens-v1",
  "name": "mon design system — gruvbox seventies",
  "version": "1.0.0",
  "description": "Design system Gruvbox seventies. Orange brûlé, fond brun délavé en sombre / gris clair usé en clair. Deux thèmes dark/light parfaitement à parité.",
  "themes": {
    "dark": {
      "bg": {
        "0": { "value": "#221c17", "description": "Niveau le plus profond, rare" },
        "1": { "value": "#2a231d", "description": "Fond application principal" },
        "2": { "value": "#322a23", "description": "Panneaux (sidebar, headerbar)" },
        "3": { "value": "#3c332a", "description": "Cartes, tuiles" },
        "4": { "value": "#4a4035", "description": "Hover, état actif" },
        "5": { "value": "#5a4f43", "description": "Press, sélection forte" }
      },
      "ink": {
        "1": { "value": "#f2e5c7", "description": "Texte principal (cream)" },
        "2": { "value": "#d5c4a1", "description": "Texte secondaire" },
        "3": { "value": "#a89984", "description": "Labels, hints" },
        "4": { "value": "#7c6f64", "description": "Désactivé" }
      },
      "accent": {
        "primary": { "value": "#fe8019", "description": "Orange Gruvbox seventies" },
        "soft":    { "value": "#d65d0e", "description": "Orange foncé (hover, bordures)" },
        "glow":    { "value": "rgba(254, 128, 25, 0.35)" },
        "tint":    { "value": "rgba(254, 128, 25, 0.12)" }
      },
      "status": {
        "ok":     { "value": "#4dbb26" },
        "warn":   { "value": "#fabd2f" },
        "err":    { "value": "#fb4934" },
        "info":   { "value": "#83a598" }
      },
      "extra": {
        "blue":   { "value": "#3db0d1" },
        "purple": { "value": "#c882c8" }
      },
      "border": {
        "1": { "value": "rgba(168, 153, 132, 0.18)" },
        "2": { "value": "rgba(168, 153, 132, 0.32)" },
        "3": { "value": "rgba(168, 153, 132, 0.55)" }
      }
    },
    "light": {
      "bg": {
        "0": { "value": "#b8b2a3", "description": "Niveau le plus profond" },
        "1": { "value": "#d5d0c5", "description": "Fond application principal" },
        "2": { "value": "#dcd7cc", "description": "Panneaux" },
        "3": { "value": "#e3ded3", "description": "Cartes, tuiles" },
        "4": { "value": "#ccc6b8", "description": "Hover" },
        "5": { "value": "#bdb6a7", "description": "Press" }
      },
      "ink": {
        "1": { "value": "#28241f", "description": "Texte principal" },
        "2": { "value": "#3c3836", "description": "Texte secondaire" },
        "3": { "value": "#5a544c", "description": "Labels, hints" },
        "4": { "value": "#8a8278", "description": "Désactivé" }
      },
      "accent": {
        "primary": { "value": "#af3a03", "description": "Orange brûlé (variante contrastée)" },
        "soft":    { "value": "#d65d0e" },
        "glow":    { "value": "rgba(175, 58, 3, 0.28)" },
        "tint":    { "value": "rgba(175, 58, 3, 0.08)" }
      },
      "status": {
        "ok":     { "value": "#3c911c" },
        "warn":   { "value": "#b57614" },
        "err":    { "value": "#9d0006" },
        "info":   { "value": "#427b58" }
      },
      "extra": {
        "blue":   { "value": "#2d82a3" },
        "purple": { "value": "#8c468c" }
      },
      "border": {
        "1": { "value": "rgba(60, 56, 54, 0.15)" },
        "2": { "value": "rgba(60, 56, 54, 0.28)" },
        "3": { "value": "rgba(60, 56, 54, 0.5)" }
      }
    }
  },
  "typography": {
    "fonts": {
      "ui":       { "family": "Inter",            "weights": [400, 500, 600, 700], "fallback": ["Cantarell", "system-ui", "sans-serif"] },
      "mono":     { "family": "JetBrains Mono",   "weights": [400, 500, 600, 700], "fallback": ["ui-monospace", "monospace"] },
      "terminal": { "family": "Share Tech Mono",  "weights": [400],                "fallback": ["VT323", "Courier New", "monospace"] }
    },
    "scale": {
      "label":     { "size": 11, "weight": 500, "transform": "uppercase", "tracking": "0.08em", "family": "mono" },
      "caption":   { "size": 12, "weight": 400, "family": "ui" },
      "body":      { "size": 14, "weight": 400, "family": "ui" },
      "body-emph": { "size": 14, "weight": 600, "family": "ui" },
      "title":     { "size": 18, "weight": 700, "family": "ui" },
      "h2":        { "size": 22, "weight": 700, "family": "ui" },
      "h1":        { "size": 28, "weight": 700, "family": "ui" },
      "display":   { "size": 44, "weight": 700, "family": "ui" },
      "kpi":       { "size": 28, "weight": 700, "family": "mono" }
    }
  },
  "radius": {
    "xs":   3,
    "sm":   4,
    "md":   6,
    "lg":   8,
    "xl":  10,
    "2xl": 12,
    "pill": 999
  },
  "spacing": {
    "1": 4,
    "2": 6,
    "3": 8,
    "4": 10,
    "5": 12,
    "6": 14,
    "7": 16,
    "8": 18,
    "9": 20,
    "10": 24,
    "12": 32,
    "14": 40,
    "16": 56
  },
  "shadows": {
    "1":     "0 1px 2px rgba(0,0,0,0.4)",
    "2":     "0 4px 12px rgba(0,0,0,0.45)",
    "3":     "0 12px 32px rgba(0,0,0,0.55)",
    "press": "inset 0 2px 4px rgba(0,0,0,0.5)",
    "tile3d": "inset 0 1px 0 rgba(255,230,180,0.12), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.4), 0 8px 18px rgba(0,0,0,0.5)"
  },
  "motion": {
    "fast":   "60ms ease",
    "normal": "180ms cubic-bezier(.3,.7,.3,1.2)",
    "slow":   "400ms cubic-bezier(.3,.6,.3,1)"
  }
}