{ "$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)" } }