spb/lou-ka

1{2  "$description": "Lou-Ka — jetons de design (miroir de frontend/src/ka/tokens.css + surcharge accent de styles.css). Format W3C Design Tokens ($value/$type), importable dans Figma via Tokens Studio ou Variables Import.",3  "$source": "repo lou-ka (spbgit) · M4M64a:~/apps/lou-ka · relu le 2026-09-04",4  "couleur": {5    "paper": { "$type": "color", "$value": "#f5f3ee", "$description": "--paper · fond de page" },6    "surface": { "$type": "color", "$value": "#ffffff", "$description": "--surface · cartes" },7    "surface-2": { "$type": "color", "$value": "#faf9f5", "$description": "--surface-2 · champs, lignes paires" },8    "ink": { "$type": "color", "$value": "#141814", "$description": "--ink · texte, bordures 1,5 px, états actifs" },9    "ink-2": { "$type": "color", "$value": "#4d5551", "$description": "--ink-2 · texte secondaire" },10    "ink-3": { "$type": "color", "$value": "#8b928c", "$description": "--ink-3 · étiquettes, placeholders" },11    "line": { "$type": "color", "$value": "rgba(20, 24, 20, 0.14)", "$description": "--line / --hairline" },12    "line-strong": { "$type": "color", "$value": "rgba(20, 24, 20, 0.85)", "$description": "--line-strong / --hairline-strong" },13    "green": { "$type": "color", "$value": "#1c5c41", "$description": "--green · kicker, tags source, « sous le marché »" },14    "green-deep": { "$type": "color", "$value": "#123f2e", "$description": "--green-deep" },15    "green-soft": { "$type": "color", "$value": "#e8f0ea", "$description": "--blue-soft (alias historique) · amenities, en bref" },16    "green-ok": { "$type": "color", "$value": "#2e7d4a", "$description": ".st-included" },17    "green-ok-soft": { "$type": "color", "$value": "#eef7f0", "$description": ".st-included fond" },18    "amber": { "$type": "color", "$value": "#e8a33d", "$description": "--amber · KA Score moyen" },19    "amber-soft": { "$type": "color", "$value": "#fdf3e2", "$description": "--amber-soft" },20    "danger": { "$type": "color", "$value": "#b3423a", "$description": "--danger · retrait de filtre" },21    "danger-soft": { "$type": "color", "$value": "#fbe9e7", "$description": "--danger-soft" },22    "accent": { "$type": "color", "$value": "#ff6a00", "$description": "--accent · ACCENT LOU-KA (seule surcharge de tokens.css)" },23    "accent-soft": { "$type": "color", "$value": "#fff1e6", "$description": "--accent-soft · totaux, notes" },24    "accent-deep": { "$type": "color", "$value": "#cc5500", "$description": "--accent-deep · survol CTA, ▲ marché" },25    "on-accent": { "$type": "color", "$value": "#ffffff", "$description": "--on-accent · texte posé sur l'accent" },26    "navy": { "$type": "color", "$value": "#0b1330", "$description": "porte du logo (dégradé #101a3d → #0b1330)" },27    "logo-frame-top": { "$type": "color", "$value": "#ff7a1a", "$description": "cadre du logo, haut" },28    "logo-frame-bottom": { "$type": "color", "$value": "#f56000", "$description": "cadre du logo, bas" },29    "logo-light-top": { "$type": "color", "$value": "#ff8533", "$description": "tapis de lumière, haut" },30    "carte-eau": { "$type": "color", "$value": "#1c5c41", "$description": "ka-maps · eau vert forêt" },31    "carte-routes": { "$type": "color", "$value": "#d9f26b", "$description": "ka-maps · routes lime" }32  },33  "typo": {34    "famille": {35      "display": { "$type": "fontFamily", "$value": "Space Grotesk", "$description": "titres, prix, boutons, chips, nav" },36      "body": { "$type": "fontFamily", "$value": "Inter", "$description": "texte courant" },37      "mono": { "$type": "fontFamily", "$value": "JetBrains Mono", "$description": "micro-étiquettes, ticker, kicker, live" }38    },39    "graisse": {40      "regular": { "$type": "fontWeight", "$value": 400 },41      "medium": { "$type": "fontWeight", "$value": 500 },42      "semibold": { "$type": "fontWeight", "$value": 600 },43      "bold": { "$type": "fontWeight", "$value": 700 }44    },45    "taille": {46      "h1-hero": { "$type": "dimension", "$value": "88px", "$description": "clamp(44px, 7.2vw, 88px) · .hero-display" },47      "h1": { "$type": "dimension", "$value": "54px", "$description": "--fs-h1 clamp(30px, 3.2vw + 18px, 54px)" },48      "h1-page": { "$type": "dimension", "$value": "46px", "$description": "Stats / Villes clamp(30px, 4.6vw, 46px)" },49      "h2": { "$type": "dimension", "$value": "34px", "$description": "--fs-h2 clamp(23px, 1.8vw + 14px, 34px)" },50      "h3": { "$type": "dimension", "$value": "22px", "$description": "--fs-h3 clamp(17px, 0.9vw + 12px, 22px)" },51      "bloc-h2": { "$type": "dimension", "$value": "21px", "$description": ".f-bloc h2" },52      "kpi": { "$type": "dimension", "$value": "44px", "$description": "grands chiffres Stats" },53      "prix-fiche": { "$type": "dimension", "$value": "54px", "$description": ".f-hero .price clamp(38px, 8.5vw, 54px)" },54      "prix-carte": { "$type": "dimension", "$value": "21px", "$description": ".card-price" },55      "recherche": { "$type": "dimension", "$value": "28px", "$description": ".q-big input clamp(19px, 2.8vw, 28px)" },56      "lede": { "$type": "dimension", "$value": "16.5px" },57      "body": { "$type": "dimension", "$value": "15px", "$description": "--fs-body" },58      "titre-carte": { "$type": "dimension", "$value": "14.5px" },59      "nav": { "$type": "dimension", "$value": "14px" },60      "bouton": { "$type": "dimension", "$value": "14px" },61      "small": { "$type": "dimension", "$value": "13px", "$description": "--fs-small" },62      "chip": { "$type": "dimension", "$value": "12.5px" },63      "meta": { "$type": "dimension", "$value": "12.5px" },64      "live": { "$type": "dimension", "$value": "12px" },65      "kicker": { "$type": "dimension", "$value": "11.5px" },66      "ticker": { "$type": "dimension", "$value": "11.5px" },67      "klabel": { "$type": "dimension", "$value": "10px" },68      "crit-label": { "$type": "dimension", "$value": "9.5px" },69      "st-pill": { "$type": "dimension", "$value": "9.5px" }70    },71    "interlettrage": {72      "titre": { "$type": "dimension", "$value": "-0.03em" },73      "hero": { "$type": "dimension", "$value": "-0.045em" },74      "kicker": { "$type": "dimension", "$value": "0.12em" },75      "klabel": { "$type": "dimension", "$value": "0.1em" },76      "crit": { "$type": "dimension", "$value": "0.14em" },77      "ticker": { "$type": "dimension", "$value": "0.08em" }78    },79    "interligne": {80      "titre": { "$type": "number", "$value": 1.06 },81      "h2": { "$type": "number", "$value": 1.15 },82      "body": { "$type": "number", "$value": 1.55 }83    }84  },85  "espacement": {86    "sp-1": { "$type": "dimension", "$value": "4px" },87    "sp-2": { "$type": "dimension", "$value": "8px" },88    "sp-3": { "$type": "dimension", "$value": "12px" },89    "sp-4": { "$type": "dimension", "$value": "16px" },90    "sp-5": { "$type": "dimension", "$value": "24px" },91    "sp-6": { "$type": "dimension", "$value": "32px" },92    "sp-7": { "$type": "dimension", "$value": "48px" },93    "sp-8": { "$type": "dimension", "$value": "64px" },94    "conteneur-max": { "$type": "dimension", "$value": "1152px" },95    "conteneur-padding-mobile": { "$type": "dimension", "$value": "16px" },96    "conteneur-padding-desktop": { "$type": "dimension", "$value": "24px" },97    "cible-tactile": { "$type": "dimension", "$value": "44px" },98    "header-desktop": { "$type": "dimension", "$value": "64px" },99    "header-mobile": { "$type": "dimension", "$value": "56px" },100    "ticker": { "$type": "dimension", "$value": "32px" },101    "grille-cartes-min": { "$type": "dimension", "$value": "290px", "$description": "grid minmax(290px, 1fr) · gap 22px" },102    "fiche-colonnes": { "$type": "string", "$value": "1.6fr 1fr · gap 30px (≥ 900 px)" }103  },104  "rayon": {105    "card": { "$type": "dimension", "$value": "10px", "$description": "--r-card" },106    "ctl": { "$type": "dimension", "$value": "6px", "$description": "--r-ctl · boutons, nav, CTA, champs, contrôles" },107    "pill": { "$type": "dimension", "$value": "999px", "$description": "--r-pill · chips, badges, pastilles" },108    "sheet": { "$type": "dimension", "$value": "24px", "$description": "feuille de critères mobile (coins hauts)" },109    "thumb": { "$type": "dimension", "$value": "12px" },110    "st-pill": { "$type": "dimension", "$value": "3px" }111  },112  "bordure": {113    "encre": { "$type": "dimension", "$value": "1.5px", "$description": "cartes, boutons, header, ticker" },114    "filet": { "$type": "dimension", "$value": "1px", "$description": "chips, séparateurs" },115    "forte": { "$type": "dimension", "$value": "2px", "$description": "sous .q-big" },116    "ancre-active": { "$type": "dimension", "$value": "2.5px" }117  },118  "ombre": {119    "flat": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px", "color": "rgba(20,24,20,0.05)" }, "$description": "--shadow-flat" },120    "off": { "$type": "shadow", "$value": { "offsetX": "6px", "offsetY": "6px", "blur": "0px", "spread": "0px", "color": "#141814" }, "$description": "--shadow-off · survol carte" },121    "off-soft": { "$type": "shadow", "$value": { "offsetX": "8px", "offsetY": "8px", "blur": "0px", "spread": "0px", "color": "rgba(20,24,20,0.08)" }, "$description": "--shadow-off-soft" },122    "off-mid": { "$type": "shadow", "$value": { "offsetX": "4px", "offsetY": "4px", "blur": "0px", "spread": "0px", "color": "rgba(20,24,20,0.18)" }, "$description": "--shadow-off-mid" },123    "hard": { "$type": "shadow", "$value": { "offsetX": "4px", "offsetY": "4px", "blur": "0px", "spread": "0px", "color": "#141814" }, "$description": ".cta / .fab / KA agent" },124    "focus-accent": { "$type": "shadow", "$value": { "offsetX": "3px", "offsetY": "3px", "blur": "0px", "spread": "0px", "color": "#ff6a00" }, "$description": "champs :focus, sheet-apply (5,5)" },125    "fab-halo": { "$type": "shadow", "$value": { "offsetX": "0px", "offsetY": "10px", "blur": "28px", "spread": "0px", "color": "rgba(20,24,20,0.25)" } }126  },127  "z-index": {128    "content": { "$type": "number", "$value": 1 },129    "sticky": { "$type": "number", "$value": 300 },130    "header": { "$type": "number", "$value": 500 },131    "bottombar": { "$type": "number", "$value": 600 },132    "dropdown": { "$type": "number", "$value": 700 },133    "overlay": { "$type": "number", "$value": 800 },134    "modal": { "$type": "number", "$value": 900 },135    "toast": { "$type": "number", "$value": 950 },136    "grain": { "$type": "number", "$value": 9999, "$description": "body::before · pointer-events none" }137  },138  "breakpoint": {139    "sm": { "$type": "dimension", "$value": "360px" },140    "mobile-max": { "$type": "dimension", "$value": "640px", "$description": "feuille de critères, grille 1 colonne" },141    "tabbar-max": { "$type": "dimension", "$value": "760px", "$description": "tabbar + burger" },142    "md": { "$type": "dimension", "$value": "768px" },143    "fiche-2col": { "$type": "dimension", "$value": "900px" },144    "lg": { "$type": "dimension", "$value": "1024px" },145    "gk-badge-min": { "$type": "dimension", "$value": "1080px", "$description": "badge Groupe KA masqué en dessous" },146    "xl": { "$type": "dimension", "$value": "1440px" }147  },148  "mouvement": {149    "rapide": { "$type": "duration", "$value": "120ms" },150    "base": { "$type": "duration", "$value": "150ms" },151    "feuille": { "$type": "duration", "$value": "240ms" },152    "ease-out": { "$type": "cubicBezier", "$value": [0.2, 0.9, 0.3, 1] },153    "hover-translate": { "$type": "string", "$value": "translate(-2px, -2px) + ombre off-mid" }154  }155}156