/* ============================================================================= Capeltio — design tokens PART 1 is the design team's canonical token file, reproduced verbatim: `design_handoff_capeltio/tokens/capeltio.tokens.css` (names, values, order). Do not rename or "improve" anything in it. It is regenerated upstream every time the design moves, and any translation we invent here becomes a diff to reconcile by hand at every delivery. The handoff is READ-ONLY from this repo (D21): report a problem with file:line, Loïck fixes it, we re-read. PART 2 is what this repo adds because the canonical file does not carry it: a type scale, a few exact radii, the shadows, and the reset. Each entry names the HiFi screen it was measured on. Rule from the handoff's own CLAUDE.md, and it is absolute: never put a raw hex in a component, and never invent a colour. ============================================================================= */ /* ============================================================================= PART 1 — canonical tokens (verbatim) Thème clair « papier ». Aucun dégradé, aucun noir pur. ============================================================================= */ :root { /* ---- Fonds et encres ---- */ --cap-bg: #f4f1e8; /* fond page */ --cap-surface: #fdfcf7; /* panneaux, fenêtres, cartes */ --cap-ink: #1e2320; /* titres */ --cap-body: #4a4f47; /* corps de texte */ --cap-body-strong: #3a3f38; /* texte secondaire appuyé */ --cap-muted: #7d7a6d; --cap-muted-2: #8a877a; --cap-muted-3: #6c6a5e; --cap-faint: #8a887b; --cap-faint-2: #a09e90; --cap-faint-3: #b0aea0; /* Tints papier, du plus clair au plus soutenu */ --cap-paper-50: #f7f4ea; --cap-paper-100: #f0ecdf; --cap-paper-150: #efebdf; --cap-paper-200: #ece8db; --cap-paper-250: #ecebe0; --cap-paper-300: #e8e2d2; --cap-paper-400: #e3ddcb; /* Encres sombres — boutons foncés et leurs survols */ --cap-dark-100: #3b3c34; --cap-dark-200: #33342c; --cap-dark-300: #30312a; --cap-dark-400: #292a24; --cap-dark-500: #22231e; /* ---- Filets ---- */ --cap-rule: #d9d3c2; /* filet courant */ --cap-rule-window: #d0c9b6; /* bord de fenêtre */ --cap-rule-strong: #dcd6c5; --cap-rule-strong-2: #cfc8b5; --cap-rule-strong-3: #c9c3b2; --cap-rule-strong-4: #c9c7b8; /* chips sélectionnés */ /* Hachures 45° — deux teintes, ne pas fusionner. L'axe est le VIEWPORT, pas le type d'écran : en mobile toujours la chaude. Motif : repeating-linear-gradient(45deg, 0 1px, transparent 1px 11px) */ /* TOUS les écrans mobiles (1a, 1b, 1r1..1r7) + la landing desktop 11a. = terra-tint */ --cap-hatch-warm: #eddac9; /* Auth et pages utilitaires DESKTOP seulement : 7p, 7q1, 7q2, 7r1, 7r2, 7v1, 7v2, 7v3 */ --cap-hatch-neutral: #e6e0d0; --cap-dim-line: #b9b2a0; /* cotes gris chaud */ /* ---- Pétrole — identité et app ---- */ --cap-teal: #145a6b; /* CTA app, filet de groupe des réponses, badges */ --cap-teal-light: #1d778a; /* liens, sur-titres de zone */ --cap-teal-accent: #2a8ca1; --cap-teal-accent-2: #5aa7b8; --cap-on-teal: #fdfcf7; /* ---- Terre cuite — accent graphique landing + alerte ---- */ --cap-terra: #d8542a; /* « POURQUOI », origine des cotes, 500 dépassé, survol CTA */ --cap-terra-dark: #c2461f; /* CTA plein du landing au repos */ --cap-terra-light: #e0693e; --cap-terra-pale: #f0a184; --cap-terra-tint: #eddac9; /* fonds de badge, bandeaux d'information */ /* ---- Typographie ---- */ --cap-font-display: 'Archivo', system-ui, sans-serif; /* 800, wdth 115%, ls -0.02em */ --cap-font-body: 'Archivo', system-ui, sans-serif; /* 400/600, 15-16px, lh 1.6 */ --cap-font-label: 'Familjen Grotesk', system-ui, sans-serif; /* 9-12px, ls .08-.14em, caps */ /* ---- Rayons ---- */ --cap-radius-badge: 3px; --cap-radius-sm: 8px; /* petits boutons, champs (8-9px) */ --cap-radius-cta: 11px; --cap-radius-card: 13px; /* 12-14px */ --cap-radius-drawer: 16px; --cap-radius-pill: 99px; /* chips, jauges */ /* ---- Ombres — 4 familles, 14 valeurs, rien d'autre ---- Aucune ombre dure, aucune ombre intérieure. La lueur teintée porte la COULEUR DU BOUTON, pas une élévation : ne jamais la remplacer par une ombre neutre. Les surfaces de contenu (fil, bulles, cartes de tarifs, sidebar, composer) n'ont AUCUNE ombre — elles se posent par le filet 1 px. */ /* Élévation neutre */ --cap-shadow-card: 0 10px 26px rgba(30, 35, 32, 0.1); /* carte d'auth desktop 400px */ --cap-shadow-card-sm: 0 8px 22px rgba(30, 35, 32, 0.08); /* carte d'auth mobile */ --cap-shadow-xs: 0 4px 14px rgba(30, 35, 32, 0.05); /* élévation minime */ --cap-shadow-modal: 0 18px 48px rgba(30, 35, 32, 0.3); /* modale « réserve épuisée » */ --cap-shadow-hero-card: 0 0.55em 1.5em rgba(30, 35, 32, 0.07); /* en em, suit l'échelle du hero */ /* Écran incliné du hero (perspective) */ --cap-shadow-tilt: 24px 32px 60px rgba(30, 35, 32, 0.14); --cap-shadow-tilt-neg: 22px 30px 44px -18px rgba(30, 35, 32, 0.34); /* Surfaces qui glissent */ --cap-shadow-drawer: 20px 0 50px rgba(30, 35, 32, 0.25); /* drawer mobile, latéral */ --cap-shadow-sheet: 0 -14px 40px rgba(30, 35, 32, 0.25); /* bottom sheet, vers le haut */ /* Lueur teintée de CTA */ --cap-glow-teal: 0 10px 26px color-mix(in srgb, #145a6b 30%, transparent); --cap-glow-terra: 0 10px 26px color-mix(in srgb, #c2461f 32%, transparent); --cap-glow-teal-sm: 0 4px 14px color-mix(in srgb, #145a6b 45%, transparent); --cap-glow-terra-sm: 0 4px 14px color-mix(in srgb, #d8542a 45%, transparent); --cap-glow-terra-dark-sm: 0 4px 14px color-mix(in srgb, #c2461f 45%, transparent); --cap-scrim: rgba(30, 35, 32, 0.4); /* voile de modale */ /* ---- Largeurs clés ---- */ --cap-w-thread: 640px; --cap-w-sidebar: 240px; --cap-w-drawer: 289px; --cap-w-window: 1280px; /* fenêtre desktop de la maquette, 1280 x 700 */ } /* NE JAMAIS IMPLÉMENTER — gris froids appartenant au canevas de présentation de la maquette (titres d'écran, notes, bezel de téléphone). Hors produit : #dfe2e7 #9aa0a8 #8f959e #6f7580 #6f757d #e6e8ec #2b2e35 #131316 */ /* Fonts: the canonical file suggests the Google CDN. We self-host the same two variable families instead — see fonts.css and DECISIONS D26. Same fonts, two fewer third-party connections on first paint. */ /* ============================================================================= PART 2 — repo additions, measured on the HiFi Everything here is absent from the canonical token file. Values carry the screen id they were read from, so they can be checked against the mockup. ============================================================================= */ :root { /* --- One colour the canonical file omits ------------------------------- #efebdd and #efebdf are BOTH in the mockup and are not interchangeable: #efebdd is the quota gauge track (37 uses, always a track), #efebdf is bubbles and zone fills (33 uses, never a track). The canonical file keeps only #efebdf (--cap-paper-150), so the gauge track has no token. Reported; until it lands upstream, it lives here and nowhere else. */ --cap-quota-track: #efebdd; /* And the name above is only HALF right — found while building 7m/12u/1j (step 1f). Of the 41 uses of #efebdd in the V3 mockup, 24 are backgrounds (gauge tracks) and 14 are `1px solid` HAIRLINES inside a block: the divider between the identity row and the password line, and its mobile twin. So the colour has two roles, and "always a track" — written into D27 and into the report sent upstream — is wrong. Aliased rather than duplicated: one value, two names, so a component can say which role it means and a rename upstream lands in one place. The report has been updated to ask for a role-neutral canonical name. */ --cap-rule-soft: var(--cap-quota-track); /* --- A second colour the canonical file omits -------------------------- #a8a496 — the label of a SPENT control: « Lien envoyé » once the password link has gone out (7m2, and its mobile twin 1j2). Two uses in the whole mockup, and it is not --cap-faint-2 (#a09e90) or --cap-faint-3 (#b0aea0), which both sit visibly beside it. Measured, not chosen; substituting the nearest token left a real drift on the diff. Reported with #efebdd. */ --cap-spent: #a8a496; /* And a third, one single use: the « PAS DE NOTATION SUR CE TOUR » line on `7e7`. #a8a598 sits between --cap-faint-2 (#a09e90) and --cap-faint-3 (#b0aea0) and is neither. One use is thin ground for a token, so it is worth saying what it is NOT: it is not the annotation layer's #8a877a, which is the reason that line is built as product copy rather than filtered out as a note to the developer. Reported with the other two. */ --cap-faint-4: #a8a598; /* --- Three more the V4 delivery adds, and the canonical file still omits -- Same gap as the three above and reported with them: the token file did NOT change between V3 and V4 (diffed, byte for byte), while the mockup gained two new frames that use colours it does not carry. #e2ddcd — the hairline that separates the rating row from « Tu as appliqué lequel ? » (`7e8`, `7e3`, and the FeedbackHiFi component). It is NOT --cap-rule (#d9d3c2), which is visibly darker and sits on the same screen around every chip, and not --cap-rule-soft (#efebdd), which is lighter. */ --cap-rule-inner: #e2ddcd; /* #e6e1d2 on #a29c8c — the send button while a turn is in flight (`7e9`, and ComposerHiFi's new `sending` state). Substituting the nearest tokens is what this build did before the frame existed, and it was wrong in both slots: --cap-rule (#d9d3c2) is darker than the drawn ground and --cap-muted-2 (#8a877a) is darker than the drawn glyph, so the disabled button read as MORE present than the enabled one. */ --cap-btn-off-bg: #e6e1d2; --cap-btn-off-ink: #a29c8c; /* --- Exact radii the canonical scale rounds ---------------------------- The canonical set is a range summary (« 12-14px » → 13px). These are the values the mockup actually draws; using them keeps the landing pixel-exact without inventing anything. */ --r-field: 9px; /* 11a/1a: demo send button */ --r-control: 10px; /* 11a: ghost buttons, plan CTA, title highlight */ /* The filled primary button, everywhere it appears: the auth family's CTA (7p/12a/12k…), the quota modal's « Voir les plans » (7e5/1n) and the history card's. It lived in auth.css as `--r-auth-cta` until the quota modal reached for it from chat.css — where it resolved to NOTHING, because the app shell never loads auth.css, and an undefined custom property makes the whole declaration invalid: `7e5`'s CTA has been rendering SQUARE against the mockup's 11px since step 2. Moved here, and renamed to say what it is rather than which screen first needed it. */ --r-cta: 11px; /* 7p/12a/12k · 7e5/1n · the history card */ --r-cta-lg: 12px; /* 11a: hero CTA and the demo entry field */ --r-card: 14px; /* 11a: how-it-works cards, plan cards */ --r-decor: 24px; /* 11a: the blueprint box behind the demo */ /* No shadow tokens here any more: the canonical file now carries all four families (14 values). Reported as "quasi absentes vs 36 in the mockup" and fixed upstream the same day — the landing uses --cap-glow-teal, --cap-shadow-xs, --cap-shadow-tilt(-neg) and --cap-shadow-hero-card. */ /* --- Type scale --------------------------------------------------------- Read off the 1280px-wide HiFi frames (1:1). The MOBILE frames are 1:1 too — 390×844, a real phone — and are consistently the desktop × ~0.76 (10.5→8, 11→8.5, 9.5→7.5). The one true miniature is the demo card embedded in the mobile hero (locked 190×412, 9:19.5, ~8px text): it draws a phone inside the phone, so its px values are a picture, not a type scale. (Corrected 2026-08-05: an earlier note here said the whole mobile frame was half-scale. Following it would have doubled every mobile value.) */ --t-2xs: 10px; --t-xs: 11px; --t-sm: 12px; --t-md: 13px; --t-lg: 15px; --t-xl: 16px; --t-2xl: 17px; --t-3xl: 24px; --t-4xl: 30px; /* Body: 15-16px / 1.6, per the handoff § Typographie. */ --t-base: 16px; --lh-body: 1.6; --lh-tight: 1.2; /* Landing headline: 52px desktop (11a) → 34px mobile (1a). Both validated; the clamp only interpolates BETWEEN them, it invents no third size. */ --t-hero: clamp(34px, 4.4vw, 52px); /* Eyebrow / label tracking — the HiFi's signature on small caps labels. */ --track-label: 0.14em; --track-label-2: 0.12em; --track-wide: 0.16em; } /* Per-component sizes the HiFi uses once (13.5px, 12.5px, 9px…) stay in the screen's own stylesheet with its id in a comment. Tokens carry what crosses screens; a one-off from one frame does not become vocabulary. */ /* ============================================================================= Minimal reset — performance-first, no external reset dependency. ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--cap-bg); color: var(--cap-ink); font-family: var(--cap-font-body); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } /* The HiFi's recurring eyebrow: small, spaced, uppercase, UI font. */ .eyebrow { font-family: var(--cap-font-label); font-size: var(--t-sm); letter-spacing: var(--track-label); text-transform: uppercase; } /* Link colours are the mockup's own global rule: a{color:#1d778a} a:hover{color:#2a8ca1} */ a { color: var(--cap-teal-light); text-decoration: none; } a:hover { color: var(--cap-teal-accent); } /* Honour the user's motion preference — required for the landing animation (06-screens.md: static fallback, must not block first paint). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }