/* ============================================================ VENDORED COPY, DO NOT EDIT BY HAND ------------------------------------------------------------ Копия. Источник правды: studio\system\tokens.css. Синкать при изменениях источника (скопировать файл целиком и сохранить эту шапку). Ничего не менять локально: любое исправление сначала попадает в studio\system\tokens.css. Vendored 2026-08-18 для demo-лайва (site\demo\). RE-SYNCED 2026-08-23: копия отставала от источника на три блока, заведённые 19.08 (MOTION, EYEBROW, COUNT BADGE). Они добавлены ПЕРЕД demo-local блоком, чтобы demo-local остался последним и следующий синк остался безопасным. Ничего не изменено и не удалено: правка чисто аддитивная. Повод — витрина system\oro\, которая обязана показывать систему целиком. ============================================================ */ /* ============================================================ GILDEDBOX DESIGN SYSTEM, TOKEN LAYER ------------------------------------------------------------ Source of every value in this file: portal-landing-prototype/ index.html (HEAD at extraction time). Nothing here is new. The :root block of the prototype is carried over VERBATIM; values that lived as literals inside prototype rules (shadows, button ladder, container ladder) are promoted to named tokens with the same numbers and the prototype's own provenance comment. Provenance vocabulary, as used in the prototype: live 2026-08-12 measured on the live portal / public site SYSTEM.md recorded measurement, see that file Figma Figma node, DEPRECATED against live DEVIATION deliberate departure, reason given felt value chosen by eye, live gives no number Rules with no comment in the prototype are marked provenance: unverified, inherited from prototype ============================================================ */ :root { /* ============ COLOR ============ Verbatim from the prototype :root. Prototype header comment: "Local design-system foundation (Ton's requirement 2026-08-12): every color below this block resolves through a variable, no hex lives in the rules themselves. Zinc and Blue = the Tailwind scale (SYSTEM.md tokens). The off-scale values are exact live measurements (SYSTEM.md site chrome + portal chrome sections, live 2026-08-12) that sit on no scale and are fixed as is." */ /* Absolute ends, provenance: unverified, inherited from prototype */ --white: #ffffff; --black: #000000; /* Grays = Tailwind Zinc, the only gray scale in the brand (BRAND.md color rules; SYSTEM.md tokens) */ --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b; --zinc-950: #09090b; /* Blue = CTA and sidebar active state (SYSTEM.md tokens) */ --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-50: #eff6ff; --blue-200: #bfdbfe; /* Off-scale live values (SYSTEM.md, live 2026-08-12) */ --live-body: #fcfdfd; /* portal body, near-white off the scale */ --gold-beta: #bea042; /* live legacy gold; BRAND.md documents #c2a545, the live site measures #bea042 */ --header-shadow: rgba(102, 102, 102, 0.05); /* portal header constant shadow color */ --header-glass: rgba(255, 255, 255, 0.9); /* header bg on lg+, pairs with blur 6px */ --footer-hairline: #3d3d3d; /* live footer border, off the zinc scale */ --footer-link-hover: #fffc; /* live footer link hover, white at 80% */ /* v1 chrome inks carried by the catalog overlay head (v1 styles.css) */ --v1-ink: #242426; --v1-border: #dedee2; --v1-ink-hover: rgb(36 36 38 / 5%); /* Footer crumb strip: felt values from Ton's portal screen 2026-08-12; the strip exists only on the portal and its numbers were never measured live */ --crumb-strip-bg: #151518; --crumb-strip-ink: #b8b8bd; --crumb-strip-sep: #6b6b71; /* ============ RADIUS ============ */ /* Brand standard 5px, single radius for the whole system (Ton 2026-08-12 radius audit; BRAND.md form rules). Prototype records three DEVIATIONs that all resolve INTO this token: sidebar block (Figma 4px), title card (live rounded-md 4px), Upload Logo ghost (live 6px) are all unified on 5px. */ --radius: 5px; /* Promoted from prototype literals, same values, same roles. Pill = cart badge (index.html .gbh-badge, border-radius 999px), circle = icon buttons and list bullets (.gbh-icon-button 44x44, .hero-half li::before). provenance: unverified, inherited from prototype. BRAND.md also records a 3px badge radius; the prototype has no 3px rule, so no token is created for it here. */ --radius-pill: 999px; --radius-circle: 50%; /* ============ ELEVATION ============ All three shadows are promoted literals from prototype rules. Russell cancelled button shadows outright (BRAND.md), so the system carries no button elevation. */ /* Portal header, CONSTANT shadow (not scroll-gated). SYSTEM.md "Portal chrome", live via Ton's Chrome 2026-08-12: 0 4px 8px rgba(102,102,102,0.05), no bottom border. */ --shadow-header: 0 4px 8px var(--header-shadow); /* Gift card: tailwind shadow-md, exact per live (prototype .gift-card, SYSTEM.md portal chrome) */ --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* Collapsed sticky bar, upward shadow (prototype .cta-bar). provenance: unverified, inherited from prototype */ --shadow-bar: 0 -4px 16px rgba(24, 24, 27, 0.06); /* ============ TYPOGRAPHY ============ Only the families and the root size live here. The role level (H1 hero, page title, eyebrow, card name, ...) is deliberately NOT in this file: it belongs to TYPE-SCALE.md, which is not built yet (DECISIONS-BANK p.9 roadmap item 2). */ /* Body stack, verbatim from prototype body rule. provenance: unverified, inherited from prototype */ --font-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* Serif stack, verbatim from prototype (.hero h1, .footer__main h3, .page-title). Serif is TITLES ONLY (BRAND.md typography). */ --font-serif: 'Noto Serif', Georgia, serif; /* Root size, prototype body rule. provenance: unverified, inherited from prototype */ --font-size-root: 16px; /* The prototype also carries a mono stack (ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace) on .demo-controls. Not tokenised: the PROTO panel is service chrome and stands outside the system language on purpose (DECISIONS-BANK p.2). */ /* ============ SPACING ============ Container ladder promoted from the prototype .wrapper / .footer-wrap rules. Prototype comment: "Live .container ladder (diff measure our Pages vs the live portal at the same 2258 viewport, 2026-08-12; replaces the v1 min() formula): base width 100% + padding 0 24px; max-width 1600 from 1600; max-width 1920 + padding 0 48px from 1920; padding 0 16px at <=768 (SYSTEM.md site chrome wrapper cascade)." The 4px grid and the 4..24 / 32..80 / 96+ step scale are recorded in SYSTEM.md but appear nowhere as prototype variables, so they are not invented into tokens here. */ --container-pad: 24px; /* base */ --container-pad-narrow: 16px; /* <=768 */ --container-pad-wide: 48px; /* >=1920 */ --container-max-lg: 1600px; /* from 1600 */ --container-max-xl: 1920px; /* from 1920 */ /* Breakpoints the ladders switch on, promoted from the prototype @media queries (live Tailwind cascade, diff measure 2026-08-12). Declared as tokens for documentation: CSS cannot use custom properties inside @media, so rules keep the literals. */ --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ============ COMPONENT STEPS ============ LIVE BUTTON LADDER, promoted from the prototype's shared block. Prototype comment: "Shared size steps of the live portal button theme (Ton 2026-08-12: every prototype button leaves the Figma Oro scale; no new measures, the theme was already snapped into SYSTEM.md: Inter 400, UPPERCASE, ls -0.4px, min-h 36/42/48, labels 14 -> 16px from 1280, radius 5, no shadows)." Carried by .btn-cta, .btn-explore, .btn-bar and, with identical numbers, .gbh-cta in the header block. The PROTO panel stays out. Steps re-read off the live site by instrument (harvest public-home 2026-08-17): the 48 step turns on at exactly 2000, NOT at the Tailwind 2xl 1536 (live sweep: 1999 = 42, 2000 = 48); letter-spacing steps -0.35 base -> -0.4 from 1280. */ --btn-min-h: 36px; /* base */ --btn-min-h-xl: 42px; /* >=1280 */ --btn-min-h-2xl: 48px; /* >=2000, not >=1536: harvest public-home 2026-08-17 sweep, 1999 = 42, 2000 = 48; the 2xl name is historical */ --btn-font-size: 14px; /* base */ --btn-font-size-xl: 16px; /* >=1280 */ --btn-font-weight: 400; /* live theme is lighter than Figma Oro 600 */ --btn-line-height: 1.1; --btn-letter-spacing: -0.35px; /* base <1280 (harvest public-home 2026-08-17) */ --btn-letter-spacing-xl: -0.4px; /* >=1280, tracking-tight, live portal */ --btn-pad-y: 8px; --btn-pad-x: 16px; /* header base pad-x, .gbh-cta */ --btn-pad-x-xl: 20px; /* >=1280, and the landing/bar buttons' base */ /* Button LABEL typography, the inner span[data-pc-section="label"] of the live buttons (live public-home label span, harvest 2026-08-17, public-home-sweep targets cta-primary-label and cta-secondary-label): Inter 11px / 600 / ls 1px / line-height normal / uppercase, 12px from 2000 (the same off-Tailwind threshold as the 48 step); color is inherited from the button. Applied by T's decision 2026-08-17 (screenshot comparison vs live) ahead of the portal measurement behind the login; the portal read stays wanted as confirmation. Worn by the header .gbh-cta labels in the prototype. */ --btn-label-font-size: 11px; /* base */ --btn-label-font-size-2xl: 12px; /* >=2000, rides the 48 step threshold */ --btn-label-font-weight: 600; --btn-label-letter-spacing: 1px; --btn-label-line-height: normal; /* BUTTON XL, the largest size class the live site carries. Source: the product page Continue button, the single primary action of that template (harvest public-product 2026-08-17, target cta-add-primary). Thresholds read by instrument on live (harvest public-product-sweep 2026-08-17): 1279 = 56, 1280 = 64; 1999 = 64, 2000 = 72. The 72 step flips at exactly 2000, the same off-Tailwind threshold as the 48 step of the base ladder. Vertical padding is a constant 8px at every width; radius = the 5px --radius, same as live. Was adopted for the landing hero CTAs (feedback R via T 2026-08-17 "самый большой доступный размер"); those two buttons stepped down to BUTTON L on Ton's requirement "на размер меньше" 2026-08-17. XL stays in the system: it is live off the product page, currently worn by no prototype element. */ --btn-xl-min-h: 56px; /* base, live 360..1279 */ --btn-xl-min-h-xl: 64px; /* >=1280 (sweep: 1279 = 56, 1280 = 64) */ --btn-xl-min-h-2xl: 72px; /* >=2000, not a Tailwind step: harvest public-product-sweep 2026-08-17, 1999 = 64, 2000 = 72 */ --btn-xl-pad-y: 8px; /* constant at every width on live */ --btn-xl-pad-x: 24px; /* base */ --btn-xl-pad-x-xl: 32px; /* >=1280 */ /* BUTTON L, one size class below XL. NOT a live extraction: no element on the live site has measured these numbers. The ladder is interpolated per Ren's proportion formula (see the BUTTON PROPORTION FORMULA block below), created for Ton's requirement "на размер меньше" for the landing hero CTAs, 2026-08-17. Heights sit between the M (36/42/48) and XL (56/64/72) live ladders; pad-x = 0.5H per the formula; pad-y 8 constant like XL; media thresholds reuse the live ladders' own 1280 and 2000. Worn by the two landing hero CTAs (.btn-cta). */ --btn-l-min-h: 48px; /* base, interpolated */ --btn-l-min-h-xl: 56px; /* >=1280, interpolated */ --btn-l-min-h-2xl: 64px; /* >=2000, interpolated; threshold mirrors the live ladders' off-Tailwind 2000 */ --btn-l-pad-y: 8px; /* constant, mirrors XL */ --btn-l-pad-x: 24px; /* base, 0.5 * 48 */ --btn-l-pad-x-xl: 28px; /* >=1280, 0.5 * 56 */ --btn-l-pad-x-2xl: 32px; /* >=2000, 0.5 * 64 */ /* GET HELP, the one live button that measured its own numbers (SYSTEM.md portal chrome, live 2026-08-12: h 40 at 2xl, pad 6px 20px, Inter 400 14px UPPERCASE, ls -0.35px tracking-tight, outlined Zinc 900, radius 5). Kept separate from the ladder because live gives it a different height and tracking. */ --btn-gethelp-h: 40px; --btn-gethelp-pad-y: 6px; --btn-gethelp-pad-x: 20px; --btn-gethelp-letter-spacing: -0.35px; /* Icon button, v1 canon carried into the prototype header (.gbh-icon-button 44x44 circle; SYSTEM.md components: v1 .icon-button 44x44 circle, glyph 22, hover rgb(36 36 38 / 5%)) */ --icon-button-size: 44px; /* Portal header bar height, exactly 80px on live (SYSTEM.md site chrome + portal chrome, live 2026-08-12). Holds at EVERY width, mobile included: harvest public-home 2026-08-17 reads 80 on all thirteen sweep widths incl. 360 and 768; no mobile step exists on live. */ --header-h: 80px; } /* ============================================================ PRIMEVUE MAPPING ------------------------------------------------------------ The client front end is PrimeVue + Tailwind on Vue, and the final hand-off format for this system is a PrimeVue theme preset, not raw CSS (DECISIONS-BANK p.9). This block is the bridge. ACTIVE mappings below are the ones the live portal measurement actually produced. Everything else is left COMMENTED OUT and marked TODO verify: PrimeVue variable names are not guessed here, and no unmeasured value is asserted. ============================================================ */ :root { /* --- Verified by live measurement --- */ /* Seen directly in the portal measurement: the cart badge fill resolves to --p-primary-600 #2563eb (SYSTEM.md site chrome color table, live 2026-08-12). This is the single PrimeVue variable read off the live theme by name. */ --p-primary-600: var(--blue-600); /* Recorded finding: the portal's surface scale IS Tailwind Zinc (SYSTEM.md portal chrome header note; DECISIONS-BANK p.9). Three steps were seen by class in the live markup: bg-surface-50 = #fafafa (gift card interior) bg-surface-100 = #f4f4f5 (customer working area) text-surface-600 = #52525b (the "My Gifts" span) The remaining steps follow from the same recorded finding (scale = Zinc), not from separate observations. */ --p-surface-50: var(--zinc-50); /* seen live */ --p-surface-100: var(--zinc-100); /* seen live */ --p-surface-200: var(--zinc-200); /* implied by scale = Zinc */ --p-surface-300: var(--zinc-300); /* implied by scale = Zinc */ --p-surface-400: var(--zinc-400); /* implied by scale = Zinc */ --p-surface-500: var(--zinc-500); /* implied by scale = Zinc */ --p-surface-600: var(--zinc-600); /* seen live */ --p-surface-700: var(--zinc-700); /* implied by scale = Zinc */ --p-surface-800: var(--zinc-800); /* implied by scale = Zinc */ --p-surface-900: var(--zinc-900); /* implied by scale = Zinc */ --p-surface-950: var(--zinc-950); /* implied by scale = Zinc */ /* --- Proposals, not verified against the live portal --- */ /* Remaining primary steps. Blue 700 is the live CTA hover and Blue 50 / Blue 200 are the live sidebar active state (SYSTEM.md tokens), but the portal was never read for these variable names, so the binding is a proposal, not a measurement. */ /* --p-primary-50: var(--blue-50); */ /* TODO verify against live portal */ /* --p-primary-200: var(--blue-200); */ /* TODO verify against live portal */ /* --p-primary-700: var(--blue-700); */ /* TODO verify against live portal */ /* Surface 0 exists in the PrimeVue surface scale as the white end. Our white is #ffffff, but the portal body measured #fcfdfd, so which one the theme puts on surface-0 is unknown. */ /* --p-surface-0: var(--white); */ /* TODO verify against live portal */ /* Radius. Our system is single-radius 5px; the live portal renders rounded-md 4px on the title card and 5px as its base rounded (SYSTEM.md portal chrome). Which PrimeVue token carries it was never read. */ /* --p-content-border-radius: var(--radius); */ /* TODO verify against live portal */ /* Button theme. The NUMBERS are live-measured (SYSTEM.md portal chrome, and the LIVE BUTTON LADDER above); the PrimeVue variable names below follow the documented --p-{component}-{property} convention and were NOT observed on the portal. Do not ship without reading the live theme. */ /* --p-button-border-radius: var(--radius); */ /* TODO verify against live portal */ /* --p-button-label-font-weight: var(--btn-font-weight); */ /* TODO verify against live portal */ /* --p-button-padding-y: var(--btn-pad-y); */ /* TODO verify against live portal */ /* --p-button-padding-x: var(--btn-pad-x-xl); */ /* TODO verify against live portal */ /* No PrimeVue name is proposed for the off-scale live values (--live-body, --gold-beta, --header-shadow, --header-glass, --footer-hairline, --crumb-strip-*): they sit on no scale and the portal exposed no variable for them. They stay ours. */ } /* ============================================================ BUTTON PROPORTION FORMULA (proposal, Ren 2026-08-17) Status: PROPOSAL, accepted by Ton in the work channel (heart, 17.08). Not a live extraction: a formula VALIDATED against the two live-measured size classes, offered to frontend as a system update instead of a table of magic numbers. Everything derives from the button height H of a size class: font-size = round(H * 0.24) pad-x = round(H * 0.5) icon gap = pad-x (live M shows 20/20) icon size = round(font-size * 1.33) <- the one axis live has not shown yet; pure proposal radius = var(--radius) always. Brand signature, never scales. Validation against live (harvest 2026-08-17): M height 42 -> font 10.8 (live label 11) pad 21 (live 20) M height 48 -> font 11.5 (live label 12) XL height 64 -> font 15.4 (live label 15) XL height 72 -> font 17.3 (live label 16) Height ladders per class (mobile / >=1280 / >=2000): M 36 / 42 / 48 verified-live (header CTA, public-home); worn by header .gbh-cta and the sticky bar L 48 / 56 / 64 INTERPOLATED per this formula, no live measure (Ton's requirement "на размер меньше" 2026-08-17); worn by the two landing hero CTAs XL 56 / 64 / 72 verified-live (product Continue, public-product); currently worn by nothing in the prototype, stays as the live top size Other classes exist (Ton sees four sizes on the portal): their ladders wait for the portal harvest (storageState pending). ============================================================ */ /* ============================================================ MOTION (Oro motion language, lifted from the prototype 2026-08-19, gbppl-motion-pass; Ton: "моушен — часть языка, меняется только стратегически"). Curves and durations are named by the SIZE OF THE JOURNEY, never by component. Principle Ton-7: signature choreography ignores prefers-reduced-motion (Windows' animation toggle was hiding the ride entirely); politeness is allowed only for utility micro-motion (typing dots, checkmark draw). The catalog door keeps its own literal --tf-* clock in the prototype (approved as-is); everything else rides these. ============================================================ */ :root { --mo-enter: cubic-bezier(0.37, 0, 0.18, 1); /* big entrances; the door's own curve */ --mo-arrive: cubic-bezier(0, 0, 0.2, 1); /* content settling into place */ --mo-exit: cubic-bezier(0.4, 0, 1, 1); /* leaving accelerates */ --mo-move: cubic-bezier(0.4, 0, 0.2, 1); /* in-place moves, height, steps */ --mo-large: 1200ms; /* the door across the screen */ --mo-medium: 500ms; /* a popup out of its button */ --mo-medium-out: 350ms; /* ...and back into it */ --mo-small: 280ms; /* steps, height, side moves */ --mo-small-out: 90ms; /* the quiet leave before a step */ --mo-micro: 160ms; /* hovers, chips, icon-buttons */ /* The drawer, "малая дверь" of MOTION.md: the length Ton named on 19.08 ("700-900"), sitting between --mo-medium and --mo-large. DECLARED 26.08 as a token: it was already living as a literal in the checkout page and as a number in MOTION.md, and the drawer organism is the third consumer, which is one too many for a literal. Its exit is --mo-medium-out, the same 350 the checkout overlay leaves on. */ --mo-drawer-in: 800ms; } /* ============================================================ EYEBROW (type role 44, named by Ton 2026-08-19: "нужен небольшой ненасыщенный all-caps — это Eyebrow, других капс-подписей не заводим"). One definition for the page eyebrow (COMPANY GIFTING FOR:) and the ren-skin sidebar section titles; contrast on zinc-50 ground = 4.63:1. ============================================================ */ :root { --eyebrow-size: 12px; --eyebrow-weight: 600; --eyebrow-tracking: 0.12em; --eyebrow-color: var(--zinc-500); /* usage: text-transform: uppercase; font: var(--eyebrow-weight) var(--eyebrow-size) Inter; letter-spacing/color from tokens */ } /* ============================================================ COUNT BADGE (provenance gbppl-portal-header-2, the cart of the portal bar; made the one definition by Ton 2026-08-19: "то, что сейчас на корзине — идеальный бейдж; чёрное плохо видно, цифры маленькие", gbppl-badge-one). The small pill that says HOW MANY on top of an icon button. One atom, one look, everywhere: the cart of both headers, and the filters and favorites triggers of the embedded v1 catalog, which reach it through site/catalog/ oro-ui-override.css (literal copies, iframe boundary). Blue, not black. A count is a STATE, and state speaks in the accent (Principle Ton-5); black is furniture, and a black pill sinks into the stroke glyph it is standing on. The ring is 1px, not 2. It exists to lift the pill off the glyph, and every pixel it takes is a pixel the digit loses: at a 16px box, 2px of ring plus 4px of side padding leaves about 11px of clear width, which is where "цифры маленькие" came from. 1px of ring with a 10px digit reads at arm's length and still detaches cleanly. Anchored top 2 / right 2 inside the 44px icon button, which puts the pill over the glyph's corner without leaving the button's circle. Not this atom: the rectangular product tags on catalog cards (New / Customer Favorite), the Zinc 200 price chip, the "or" rule -- those are labels, not counts. ============================================================ */ :root { --count-badge-size: 16px; /* min-width AND height; the pill grows by padding at 2+ digits */ --count-badge-pad: 0 4px; --count-badge-radius: 999px; --count-badge-fill: var(--blue-600); --count-badge-ink: var(--white); --count-badge-ring: 1px solid var(--white); --count-badge-font-size: 10px; --count-badge-font-weight: 400; --count-badge-offset: 2px; /* top and right, inside a 44px icon button */ /* usage: position: absolute; top/right: var(--count-badge-offset); min-width/height: var(--count-badge-size); display: grid; place-items: center; padding: var(--count-badge-pad); background: var(--count-badge-fill); border: var(--count-badge-ring); border-radius: var(--count-badge-radius); color: var(--count-badge-ink); font-size/weight from tokens. Worn by .gbh-count. */ } /* ============================================================ SPACING SCALE gbppl-space-1 Ton 25.08.2026, on the booking card: «какой у нас вертикальный ритм?» There was none in the tokens: form rhythm was assembled from live numbers case by case (28/24/20). One 8-based scale, DECLARED, and one rule for forms: blocks --space-32, rows --space-24, columns gap --space-24. Live paddings that were harvested (cards 48/32, 64/48, 80/64) all sit on this scale. ============================================================ */ :root { --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; /* form rhythm (Ton 25.08) */ --form-block-gap: var(--space-32); --form-row-gap: var(--space-24); --form-col-gap: var(--space-24); } /* PANEL ELEVATION (gbppl-panel-3, Ton 26.08): the studio panel went dark like PROTO and needs to lift off the page without shouting. DECLARED: soft, wide, low-alpha. Blue 400 is the Tailwind step above our 600, DECLARED for state-on-dark (600 fails contrast on Zinc 950). */ :root { --shadow-panel: 0 8px 24px rgba(9, 9, 11, 0.18); --blue-400: #60a5fa; } /* ============================================================ DEMO-LOCAL ADDITIONS, NOT (YET) IN studio\system\tokens.css ------------------------------------------------------------ Добавлено 2026-08-18 для demo-футера (harvest public-footer* 18.08). Источник правды НЕ трогался: при следующем синке копии этот блок либо переезжает в studio\system\tokens.css, либо пересматривается. Блок держать ПОСЛЕДНИМ в файле, чтобы синк (копирование источника целиком + шапка) был безопасен. ============================================================ */ :root { /* Волосяные линии мобильного аккордеона футера: #1D1D1D сверху и снизу заголовка колонки на <=640, вне цинковой шкалы (harvest public-footer 2026-08-18, 360). */ --footer-hairline-mobile: #1d1d1d; /* Базовый цвет ul.policyList легальной полосы: #015287 (замер 18.08, constant на 7 ширинах). Виден не бывает: ссылки внутри белые; фиксируется для компьютед-паритета с лайвом. */ --footer-policy-ink: #015287; /* ---- Каталог (harvest public-catalog 17.08 + SSR-DOM 18.08). Все четыре значения — ЖИВЫЕ факты ВНЕ системы, материал разговора «канон vs баг»; demo-лайв = слепок, воспроизводим. */ --second-600: #0284c7; /* активный таб фильтров: живой токен second-600 = Tailwind sky-600 — чужая шкала (наш акцент blue-600 #2563eb) */ --catalog-ink: #191919; /* дефолтный текст каталога (live body color), вне цинковой шкалы (zinc-900 = #18181b) */ --catalog-badge-ink: #404040; /* бейдж "N Options": text-gray-700 лайва = Tailwind neutral-700, третье серое семейство (zinc-700 #3f3f46) */ --catalog-card-hover-border: #5e5e5e; /* hover-бордер карточки 1.5px, ни на одной шкале */ /* ---- Авторизация (harvest public-login 17.08 + живые состояния Playwright 18.08, portal.gildedbox.com/guest/auth). */ /* СЕМЬЯ ФОРМ-КОНТРОЛОВ 48/56/64 (инпут, сабмит, обёртка Google, OTP-ячейка — в ногу; пороги 1280 и 2xl=2000). Числа совпадают с интерполированной семьёй BUTTON L (--btn-l-*): login делает эту лестницу ЖИВОЙ — при синке источника отметить в комменте BUTTON L, что формы дают ей live-провенанс. */ --form-ctl-h: 48px; --form-ctl-h-xl: 56px; /* >=1280 */ --form-ctl-h-2xl: 64px; /* >=2000 (2xl-классы login включаются между 1920 и 2258, как на каталоге) */ /* Ошибка формы = Tailwind Red, ЧУЖАЯ шкала (у системы красного нет): бордер невалидного инпута red-500, текст сообщения red-600 (live 18.08, сабмит пустого/невалидного e-mail). */ --red-500: #ef4444; --red-600: #dc2626; /* ТРЕТЬЕ ЗОЛОТО ЛАЙВА, И ТЕПЕРЬ ТОЛЬКО ЗАПИСЬ О НЁМ. #bd9f58 — цвет звёздочки required на живых формах (live 18.08, guest/auth оба шага), не равный ни #c2a545 из BRAND.md, ни #bea042 из шапки. ПЕРЕИМЕНОВАН gbppl-concierge-auth-2 (10.09). Он звался --auth-required-gold и звучал РОЛЬЮ системы: так его и носил ::after лейбла, а витрина Field записывала это «исключением с живой формы». Тон, 10.09: звёздочка обязательности НЕ должна быть золотой. Роли у цвета больше нет — звёздочка говорит голосом лейбла и своего цвета не имеет вовсе (auth.css). Имя стало честным: это ЗАМЕР ЛАЙВА на полке вето, рядом с --gold-beta, и новая работа к нему не тянется. */ --gold-form: #bd9f58; /* Живое умолчание border без цвета (preflight): #e5e5e5 = neutral-200, вне цинка; носит кольцо конверта на шаге верификации (факт каталога 18.08, подтверждён на auth). */ --preflight-border: #e5e5e5; /* ---- Главная (probe live home 18.08 + harvest public-home 17.08). Оба значения — живые факты ВНЕ системы. */ --live-offwhite: #f3f3f3; /* чернила underline-CTA и контента финального баннера (btn white лайва красится #f3f3f3, не white и не zinc-100 #f4f4f5) */ --home-advantages-bg: #f6f6f6; /* фон секции преимуществ (bg-[#F6F6F6] лайва), вне цинковой шкалы */ } /* ============================================================ BUTTON ORGANISM (gbppl-button-1, 2026-08-25) ------------------------------------------------------------ Ton's button spec of 25.08: three types (filled, outline, ghost), two colours (primary blue, secondary black) plus the white inversion for dark grounds, a ladder of sizes (three then, five since gbppl-btn-ladder-1 of 02.09: xsmall, small, medium, large, xlarge), five states, an optional icon on either side, and type and padding that scale with BOTH the size of the button and the width of the screen. This block is the whole numeric map of that organism, in one place. Every line does exactly one of three things: ALIAS points at a token that already exists, so the organism spends the system's numbers rather than copying them. The provenance of the aliased token travels with it. LIVE a number measured on the product by instrument; the source and the date are named. DECLARED a number nothing on the product has ever shown. Named as such, so a later measurement can replace it without an archaeology dig. WHERE LIVE AND THE FORMULA DISAGREE, LIVE WINS. Ren's proportion formula of 17.08 (pad-y = 0.24H, pad-x = 0.5H, gap = pad-y) was written before the L and XL ladders had live numbers. It still holds at the small end (36 gives pad-y 8.6, which is the live 8) and it produced the whole interpolated L ladder, but the live auth submit and the live product Continue both keep pad-y at a flat 8 and run their gaps far wider than pad-y. The formula stays as the tie-breaker for sizes live has never shown; it no longer overrides a measurement. SECOND LOCAL-AHEAD BLOCK. The DEMO-LOCAL block above carries the rule "keep me last so the next sync is safe". That rule generalises rather than breaks: local-ahead blocks live at the TAIL of the file, in the order they were created, and the sync moves them into studio\system\tokens.css together. Nothing above this line is edited. NOT CHANGED ON PURPOSE: --btn-l-pad-x-xl (28px, FORMULA). The portal hero CTAs were wearing it when this block was written. PHASE 2 CLOSED THAT (gbppl-button-2, 26.08): those CTAs now wear the organism and read --gb-btn-large-pad-x-xl (32px, LIVE), so the 28 is no longer on any screen. The token stays declared, because the interpolated ladder it belongs to is still the fallback for sizes live has never shown. ------------------------------------------------------------ THE HEIGHT GRID (gbppl-button-2, Ton 26.08, verbatim) ------------------------------------------------------------ «Перепроверь все размеры кнопок: в Figma нам даже не хватает одного размера. Сетка: самый большой (2K и больше) 72px, следующий 64, далее 56, 48 и так далее по стандарту.» So the button heights of the system are ONE grid, eight apart, and every ladder walks it. As it stands after 02.09, with the names the ladders wear today: 72 xlarge from 2000 LIVE ("2K and above") 64 xlarge from 1280, large from 2000 LIVE 56 xlarge base, large from 1280 LIVE 48 large base, medium from 2000 LIVE 42 medium from 1280 LIVE, OFF THE GRID (see below) 40 small from 2000 DS-2 36 medium base, small from 1280 LIVE public header 32 small base, xsmall from 2000 DS-2 28 xsmall base and 1280 DECLARED, OFF THE GRID (Ton's floor) THE 40 WAS THE MISSING STEP, and on 26.08 the ladder cut to fill it was M (40/48/56): before that pass the ladders were S 36/42/48, L 48/56/64 and XL 56/64/72, and nothing started between the header's 36 and the form's 48. On 02.09 `small` (32/36/40) took over that rung with a node of the mock behind it and M was dissolved; the story is at THE RUNG THAT WAS DISSOLVED below. AND SINCE 02.09 THE GRID HAS ONE RUNG MORE, BELOW ALL OF THEM (gbppl-toggle-small-1): 32, the base of the new `small` ladder 32 / 36 / 40. It is still eight apart from 40 and it is still Ton's grid; what is new is that a ladder now stands under S. The arithmetic and the provenance are at the SIZE SMALL block. ------------------------------------------------------------ AND THE SAME DAY THE LADDERS TOOK THEIR FINAL NAMES (gbppl-btn-ladder-1, 02.09) ------------------------------------------------------------ The reconciliation with DS-2 (docs\BUTTON-FIGMA-RECONCILIATION.md, 01.09) found that our letters and the file the team looks at name different things: the mock's `medium` is 48, which is our S at 2K. Ton settled it by principle: the system speaks the language of the file, the curve down to small screens stays ours because the mock has none, and the ladder is FIVE RUNGS at 2K. xsmall 32 new, built by this wave small 40 built 02.09 (gbppl-toggle-small-1) medium 48 WAS S 36 / 42 / 48, not one number moved large 64 WAS L 48 / 56 / 64, not one number moved xlarge 72 WAS XL 56 / 64 / 72, not one number moved AND ONE RUNG WENT AWAY: 56 at 2K, the old M (40 / 48 / 56). It was the single ladder of this house that neither the live product nor the mock had ever shown, declared on 26.08 to fill a hole in the grid, and with a rung standing at 40 and another at 48 the hole is filled twice over. Its carriers are listed in the wave report and every one of them moved to `medium`. No alias was left behind, here or in the stylesheets: an alias is a second name for the same thing, and a second name is the drift this organism exists to end (precedent: button phase 2, 26.08). The heights the grid can reach are therefore 72 / 64 / 56 / 48 / 42 / 40 / 36 / 32 / 28, and the last one is new with xsmall. 42 IS A LIVE DEVIATION AND IT STAYS. The public header measures 42 at 1280 (harvest public-home-sweep 17.08; re-read by instrument 26.08 on all eight of our own header pages: min-height 42px at 1280 on every one). It is not on the eight-grid and it is not being corrected: live wins over the formula, and bending the header by 6px would repaint every page the client is looking at. Recorded as an off-grid live step, not as a rounding error. ============================================================ */ :root { /* ---- The one colour the paint map needs and the scale did not have. Blue 800 of the Tailwind ladder the system already rides (600 and 700 are in the palette above); the pressed step of the primary button. DECLARED: no live button has ever been caught mid-press. */ --blue-800: #1e40af; /* ============ SIZE XSMALL, the floor of the house ============ (gbppl-btn-ladder-1, 02.09) WHY IT EXISTS. It is the bottom rung of the five-rung ladder Ton settled on 01.09, and the mock has it: DS-2 draws xsmall in both filled families (`2027:342` and `2019:545`, 09.06.2026) at 32 tall. Nothing in the product wears it today, and that is said out loud rather than hidden: this block, the `--xsmall` modifier in button.css and the showcase are the whole of it. The first carrier arrives with its own measurement. THE ARITHMETIC, THE SAME CURVE ONE STEP FURTHER DOWN. The living curve of the ladders above (mean .874 at 1280, mean .856 at base; the table is at the SIZE SMALL block) applied to the 32 the mock fixes at 2K: 1280 = 32 x .874 = 27.97 -> 28 base = 28 x .856 = 23.97 -> 24 AND THE BASE IS NOT 24. Ton, 02.09: the floor of xsmall is 28 on narrow screens, because a finger matters more than a curve. 24 is under every touch target anyone publishes, and a rung that small is not a smaller button, it is a different object. So the ladder is 28 / 28 / 32: it steps ONCE, at 2000, and the absence of a 1280 step is the ladder rather than an omission, the same way `small` has no pad-x step. 28 is off the grid of eight, exactly as the live header's 42 is, and for the same kind of reason: a measured floor beats a formula. EVERY NUMBER BELOW IS DECLARED unless it says ALIAS or names DS-2. The 2K column is the mock read node by node; everything under it is the curve, and the base height is Ton's floor. */ --gb-btn-xsmall-h: 28px; /* Ton 02.09: the floor. The curve asks 24 and 24 is under any touch target; a finger matters more than a curve. Off the eight-grid, like the live 42 */ /* no --h-xl: the curve gives 32 x .874 = 27.97 -> 28 at 1280, which is the floor again, so the ladder has no 1280 step */ --gb-btn-xsmall-h-2xl: 32px; /* DS-2 2K, and a rung of Ton's height grid */ --gb-btn-xsmall-pad-y: 4px; /* DS-2 2K, and the ONE place the flat 8 of every other ladder cannot be spent: 8 over 8 around a 10px caps line (12.1 rendered) is 28.1, and the rung would be a tenth of a pixel taller than itself. pad-y is not load bearing here, min-height is. NO TOKEN: half the smallest step of the space scale, the same half-step the toggle's inset is */ --gb-btn-xsmall-pad-x: var(--btn-pad-x); /* ALIAS 16: the mock gives 16 at 2K and the pad stays FLAT below it, exactly as on `small`. The curve asks 12.5, and 12 is not a rung of the space scale while 8 would turn the button into a chip */ --gb-btn-xsmall-gap: 8px; /* DECLARED: one step under small's 12 -> 16 on the +4 rhythm both live ladders keep, and a rung of the space scale. The mock's own 14 lies on no scale at all and is read as 12 there, so it is the 2K value that is brought to a step, not this one */ --gb-btn-xsmall-gap-xl: 12px; /* DECLARED, >=1280: small's base gap, and the mock's 14 brought to the nearest step of the +4 rhythm. No 2000 step, because no ladder here steps its gap at 2000 */ --gb-btn-xsmall-font-size: var(--btn-font-size); /* ALIAS 14 */ --gb-btn-xsmall-font-size-xl: var(--btn-font-size-xl); /* ALIAS 16, >=1280 */ --gb-btn-xsmall-font-weight: 600; /* DECLARED: follows every rung but medium, and the mock */ --gb-btn-xsmall-line-height: normal;/* DECLARED, follows the rest */ --gb-btn-xsmall-tracking: var(--btn-letter-spacing); /* ALIAS -0.35 */ --gb-btn-xsmall-tracking-xl: var(--btn-letter-spacing-xl); /* ALIAS -0.4, >=1280 */ --gb-btn-xsmall-label: 10px; /* DS-2 2K, and FLAT: the curve would ask 8.75 under it and 10 is the floor of this house, the same floor `small` reaches at base. The label stops descending one rung before the box does, which is why xsmall and small share it at base. The 10 deepens the open question of the 11px caps of medium against a documentation floor of 12; it does not answer it */ --gb-btn-xsmall-icon: 12px; /* DS-2 2K, and FLAT down the ladder: small already carries 12 at base, and a glyph under 12 stops being a drawing */ /* ============ SIZE SMALL, the rung below everything but xsmall ============ (gbppl-toggle-small-1, 02.09) WHY IT EXISTS, AND WHY TODAY. Ton, on a screenshot of the console's Mode switch: «уменьшить размер вот этих тогглов в панели управления прототипом. Там должен быть самый маленький тоггл, который у нас есть. Это просто гигантское.» There was no smallest: medium (36/42/48, then still called S) was the bottom of the house, and gbppl-toggle-type-1 had just put half a toggle on it literally, which is how the console's Mode row got to 51.76 at 1280 and 57.76 on his own screen. THE NAME WAS THE FINAL ONE FROM THE FIRST HOUR, ON PURPOSE. The five-rung ladder was decided before this rung was cut (docs\BUTTON-FIGMA-RECONCILIATION.md §6, DS-2 of 01.09), so it was born under `small` rather than under a letter and the renaming wave later that day had one fewer name to move. For a few hours the file spoke two dialects, four letters and one word; gbppl-btn-ladder-1 closed that the same day and no alias was created either way. THE ARITHMETIC, TAKEN OFF THE NEIGHBOURS AND CONTINUED DOWN. The living curve of the four ladders that stood in this block at the time, read at the two thresholds (their letters are the ones they wore that morning; S is today's medium, L is large, XL is xlarge, and M was dissolved by the naming wave): ladder 2K 1280 base 1280/2K base/1280 S 48 42 36 .875 .857 M 56 48 40 .857 .833 L 64 56 48 .875 .857 XL 72 64 56 .889 .875 mean .874 .856 and the absolute step shrinks as the ladder descends: -8/-8 on M, L and XL, -6/-6 on S. So from the 40 the mock fixes at 2K: 1280 = 40 x .874 = 34.96 -> 36 (rung of Ton's height grid) base = 36 x .856 = 30.82 -> 32 (the next step down) small = 32 / 36 / 40, a -4/-4 step: exactly the continuation medium's -6/-6 promises. Both new points land on the eight-grid. THIS TABLE IS THE CURVE THE WHOLE HOUSE IS BUILT ON, and xsmall above is read off it too. EVERY NUMBER BELOW IS DECLARED unless it says ALIAS. The 2K column is the mock read node by node (DS-2 `2019:498` / `2019:535`, 09.06.2026); everything under 2K is this curve. Nothing here has been measured on a product: no live button has ever been 40px tall, let alone 32. A later measurement replaces these lines and nothing else. */ --gb-btn-small-h: 32px; /* DECLARED, curve: 36 x .856 */ --gb-btn-small-h-xl: 36px; /* DECLARED, >=1280: 40 x .874, and a rung of Ton's height grid */ --gb-btn-small-h-2xl: 40px; /* DS-2 2K, and the grid rung that until now was only the base of the old M */ --gb-btn-small-pad-y: var(--btn-pad-y); /* ALIAS 8: flat 8 is what all four ladders measure at every size and every width, and the mock gives small 8 too */ --gb-btn-small-pad-x: var(--btn-pad-x); /* ALIAS 16: the mock gives 16 at 2K (its 16/20 asymmetry is a defect of the file, see the reconciliation §2.1), and the pad stays FLAT below it. The curve asks for 16 x .78 = 12.5, and 12 is not a rung of the space scale (8/16/24/32/48/64) while 8 would turn the button into a chip. A pad is a length off the space scale before it is a proportion */ /* no --pad-x-xl: the ladder is flat, so there is no 1280 step to point at */ --gb-btn-small-gap: 12px; /* DECLARED: one step under medium's 12->20 on the +4 rhythm both live ladders keep, and the base of medium itself */ --gb-btn-small-gap-xl: 16px; /* DS-2 2K gives 16; no ladder in this block steps its gap at 2000, so the 1280 step carries 2K as well */ --gb-btn-small-font-size: var(--btn-font-size); /* ALIAS 14 */ --gb-btn-small-font-size-xl: var(--btn-font-size-xl); /* ALIAS 16, >=1280. The outer element's type is one value for every rung but xlarge */ --gb-btn-small-font-weight: 600; /* DECLARED: follows large and xlarge, and the mock. The 400 is the header's alone */ --gb-btn-small-line-height: normal;/* DECLARED, follows large and xlarge */ --gb-btn-small-tracking: var(--btn-letter-spacing); /* ALIAS -0.35 */ --gb-btn-small-tracking-xl: var(--btn-letter-spacing-xl); /* ALIAS -0.4, >=1280 */ --gb-btn-small-label: 10px; /* DECLARED, curve of the label (~.875 a step) taken down one rung from medium's 11. IT IS THE FLOOR: 10 is where the mock floors its own smallest label too, and nothing in this house is set smaller. The 11px caps of medium are already an open question to Ton (skill section 8); a 10 under them deepens that question and does not answer it, and it is named here so the answer moves both rungs at once */ --gb-btn-small-label-xl: 11px; /* DECLARED, >=1280: medium's base label */ --gb-btn-small-label-2xl: 12px; /* DS-2 2K, and live as the medium label at 2000 — the two sources agree here */ --gb-btn-small-icon: 12px; /* DECLARED, the glyph curve one rung under the flat 16 of medium */ --gb-btn-small-icon-xl: 16px; /* DS-2 2K gives 16; no 2000 step, because the 1280 step already carries it */ /* ============ SIZE MEDIUM, the header ladder ============ Live off the public header (harvest public-home 2026-08-17, re-read 24.08). Chrome buttons, bars, anything standing inside an 80px header. IT WAS CALLED S UNTIL 02.09 and not one of its numbers moved when it was renamed (gbppl-btn-ladder-1): 36 / 42 / 48 is what the header measured then and what it measures now. The name is the mock's, because DS-2 calls 48 at 2K `medium` and the team reads the mock; the word changed, the ladder did not. Every carrier moved in the same commit and no alias was left. */ --gb-btn-medium-h: var(--btn-min-h); /* ALIAS 36 */ --gb-btn-medium-h-xl: var(--btn-min-h-xl); /* ALIAS 42, >=1280 */ --gb-btn-medium-h-2xl: var(--btn-min-h-2xl); /* ALIAS 48, >=2000 */ --gb-btn-medium-pad-y: var(--btn-pad-y); /* ALIAS 8 */ --gb-btn-medium-pad-x: var(--btn-pad-x); /* ALIAS 16 */ --gb-btn-medium-pad-x-xl: var(--btn-pad-x-xl); /* ALIAS 20, >=1280 */ --gb-btn-medium-gap: 12px; /* LIVE header 24.08 */ --gb-btn-medium-gap-xl: 20px; /* LIVE header 24.08, >=1280 */ --gb-btn-medium-font-size: var(--btn-font-size); /* ALIAS 14 */ --gb-btn-medium-font-size-xl: var(--btn-font-size-xl); /* ALIAS 16, >=1280 */ --gb-btn-medium-font-weight: var(--btn-font-weight); /* ALIAS 400 */ --gb-btn-medium-line-height: var(--btn-line-height); /* ALIAS 1.1 */ --gb-btn-medium-tracking: var(--btn-letter-spacing); /* ALIAS -0.35 */ --gb-btn-medium-tracking-xl: var(--btn-letter-spacing-xl);/* ALIAS -0.4, >=1280 */ --gb-btn-medium-label: var(--btn-label-font-size); /* ALIAS 11 */ --gb-btn-medium-label-2xl: var(--btn-label-font-size-2xl); /* ALIAS 12, >=2000 */ --gb-btn-medium-icon: 16px; /* DECLARED: the live header carries no icon inside a button. 16 is the first step of the large icon ladder and the largest glyph a 36px box holds without crowding its 8px padding. Flat down the ladder: a glyph that grew to 20 would out-shout an 11px label. */ /* ============ THE RUNG THAT WAS DISSOLVED: the old M ============ 40 / 48 / 56, declared 26.08 as «the missing size» and taken out again on 02.09 (gbppl-btn-ladder-1, Ton by principle). IT IS RECORDED HERE RATHER THAN DELETED SILENTLY, because a measurement is never deleted quietly and neither is a decision. M was the ONE ladder of this house that neither the live product nor DS-2 had ever shown: every number in it was interpolated between the two live ladders around it. Its purpose was to fill the 40 rung of Ton's grid, and `small` (32 / 36 / 40) now stands on that rung with a mock behind it, so the hole M was cut to fill is filled twice over. Its carriers all read `medium` from 02.09 and are listed one by one in the wave report; nothing wears 56 at 2K any more. If a 56 rung is ever wanted back, it comes back with a measurement or with a node in the mock, not with this paragraph. */ /* ============ SIZE LARGE, the form ladder ============ 48/56/64. Called L until 02.09; the rename moved the word and nothing else, and `large` is the mock's own name for 64 at 2K. Interpolated on 17.08 and made LIVE by the guest sign-in submit (harvest public-login 17.08 plus the live states of 18.08), which measures the whole family: height, padding, gap, label ladder and icon ladder. The workhorse size, and the organism's DEFAULT. */ --gb-btn-large-h: var(--btn-l-min-h); /* ALIAS 48 */ --gb-btn-large-h-xl: var(--btn-l-min-h-xl); /* ALIAS 56, >=1280 */ --gb-btn-large-h-2xl: var(--btn-l-min-h-2xl); /* ALIAS 64, >=2000 */ --gb-btn-large-pad-y: var(--btn-l-pad-y); /* ALIAS 8 */ --gb-btn-large-pad-x: var(--btn-l-pad-x); /* ALIAS 24 */ --gb-btn-large-pad-x-xl: 32px; /* LIVE auth 18.08, >=1280. The interpolated --btn-l-pad-x-xl says 28 and stays untouched (see the block head): live measured 32 and live wins. */ --gb-btn-large-gap: 20px; /* LIVE auth 18.08 */ --gb-btn-large-gap-xl: 24px; /* LIVE auth 18.08, >=1280 */ --gb-btn-large-font-size: var(--btn-font-size); /* ALIAS 14 */ --gb-btn-large-font-size-xl: var(--btn-font-size-xl); /* ALIAS 16, >=1280 */ --gb-btn-large-font-weight: 600; /* LIVE auth 18.08: the form submit is heavier than the header's 400 */ --gb-btn-large-line-height: normal; /* LIVE auth 18.08 */ --gb-btn-large-tracking: var(--btn-letter-spacing); /* ALIAS -0.35 */ --gb-btn-large-tracking-xl: var(--btn-letter-spacing-xl);/* ALIAS -0.4, >=1280 */ --gb-btn-large-label: 14px; /* LIVE auth 18.08 */ --gb-btn-large-label-sm: 15px; /* LIVE auth 18.08, >=640 */ --gb-btn-large-label-2xl: 16px; /* LIVE auth 18.08, >=2000 */ --gb-btn-large-icon: 16px; /* LIVE auth 18.08 */ --gb-btn-large-icon-xl: 20px; /* LIVE auth 18.08, >=1280 */ --gb-btn-large-icon-2xl: 24px; /* LIVE auth 18.08, >=2000 */ /* ============ SIZE XLARGE, the committing ladder ============ 56/64/72, called XL until 02.09. THE MOCK HAS NO RUNG AT 72 AND THIS ONE STILL STANDS: 72 is LIVE, measured on the product page Continue, and a live rung outlives a file that does not draw it. It is the one rung of the five whose name is ours rather than DS-2's, built out of the mock's own word for the rung below it. Live off the product page Continue (harvest public-product 17.08), the single primary action of its template. Worn on the prototype by Place Order. THE LABEL IS THE LIVE ONE, 14/15/16, not the 11/12 of the medium ladder. live\checkout.html currently puts the small header label on this large button, which is the exact defect Ton named on the hub shelf 24.08 (a button with, in his words, an unsystematic font): xlarge geometry wearing the header's typography. The organism carries the live pair; fixing the consumer is phase 2. The live threshold for the 15px step is 768 and for the 16px step 2258; the second is normalised to the system's own 2000, the off-Tailwind threshold every other ladder here flips at. */ --gb-btn-xlarge-h: var(--btn-xl-min-h); /* ALIAS 56 */ --gb-btn-xlarge-h-xl: var(--btn-xl-min-h-xl); /* ALIAS 64, >=1280 */ --gb-btn-xlarge-h-2xl: var(--btn-xl-min-h-2xl); /* ALIAS 72, >=2000 */ --gb-btn-xlarge-pad-y: var(--btn-xl-pad-y); /* ALIAS 8 */ --gb-btn-xlarge-pad-x: var(--btn-xl-pad-x); /* ALIAS 24 */ --gb-btn-xlarge-pad-x-xl: var(--btn-xl-pad-x-xl); /* ALIAS 32, >=1280 */ --gb-btn-xlarge-gap: 24px; /* DECLARED: one large step up, the same +4 rhythm the icon ladder keeps */ --gb-btn-xlarge-gap-xl: 28px; /* DECLARED, >=1280 */ --gb-btn-xlarge-font-size: 20px; /* LIVE product 17.08 */ --gb-btn-xlarge-font-size-xl: 24px; /* LIVE product 17.08, >=1280 */ --gb-btn-xlarge-font-weight: 600; /* LIVE product 17.08 */ --gb-btn-xlarge-line-height: normal; /* LIVE product 17.08 */ --gb-btn-xlarge-tracking: -0.5px; /* LIVE product 17.08 */ --gb-btn-xlarge-tracking-xl: -0.6px; /* LIVE product 17.08, >=1280 */ --gb-btn-xlarge-label: 14px; /* LIVE product 17.08 */ --gb-btn-xlarge-label-md: 15px; /* LIVE product 17.08, >=768 */ --gb-btn-xlarge-label-2xl: 16px; /* LIVE product 17.08 at 2258, threshold normalised to 2000 */ --gb-btn-xlarge-icon: 20px; /* DECLARED, one large step up */ --gb-btn-xlarge-icon-xl: 24px; /* DECLARED, >=1280 */ --gb-btn-xlarge-icon-2xl: 28px; /* DECLARED, >=2000 */ /* ============ THE LABEL, shared by every rung ============ Only the SIZE changes down the ladders; weight, tracking, line-height and case are one value everywhere, and all three live sources agree on them (header label span, auth submit label, product Continue label: 600, +1px, normal, caps). */ --gb-btn-label-weight: var(--btn-label-font-weight); /* ALIAS 600 */ --gb-btn-label-tracking: var(--btn-label-letter-spacing);/* ALIAS 1px */ --gb-btn-label-line-height: var(--btn-label-line-height); /* ALIAS normal */ /* ============ PAINT ============ PRIMARY is blue, the accent, and blue is STATE (Ton-5): the one action the screen is asking for. SECONDARY is black, furniture: the actions that are simply always there. INVERSE is the white cut of secondary, for dark grounds. Instrument run 25.08 (gildedbox.com home and catalog, 1440, every a and button on the page): the live product carries NO opaque dark fill and NO opaque white fill on any button. Its only filled button is Blue 600. So every primary number below is LIVE and every secondary and inverse FILL is DECLARED. The outlines, however, are live on both grounds and were re-measured in that same run. */ /* Primary, all live */ --gb-btn-fill-primary: var(--blue-600); /* LIVE 24-25.08 */ --gb-btn-fill-primary-hover: var(--blue-700); /* LIVE 24-25.08, DARKENS */ --gb-btn-fill-primary-active: var(--blue-800); /* DECLARED, next rung down */ --gb-btn-ink-on-primary: var(--zinc-50); /* LIVE 24.08 #fafafa, not pure white */ --gb-btn-ink-primary: var(--blue-600); /* outline and ghost ink, and the hairline */ --gb-btn-ink-primary-hover: var(--blue-700); --gb-btn-ink-primary-active: var(--blue-800); /* Secondary. The fills are DECLARED: Zinc 900 is the system's black (Ton-5 furniture), and hover DARKENS one rung, which is the direction the live blue button proved and Ton stated outright on 24.08, catching a button of ours that lightened instead. Zinc 950 and then pure black for the press are the last rungs the scale has. */ --gb-btn-fill-secondary: var(--zinc-900); /* DECLARED */ --gb-btn-fill-secondary-hover: var(--zinc-950); /* DECLARED, darkens */ --gb-btn-fill-secondary-active: var(--black); /* DECLARED */ --gb-btn-ink-on-secondary: var(--zinc-50); /* matches the primary ink */ --gb-btn-ink-secondary: var(--zinc-900); /* LIVE 25.08: the outline keeps Zinc 900 ink AND hairline on hover */ --gb-btn-ink-secondary-hover: var(--zinc-900); /* LIVE 25.08, unchanged */ --gb-btn-ink-secondary-active: var(--zinc-950); /* DECLARED */ /* Inverse, for dark grounds. The outline pair is LIVE: it is the transparent header over the hero video, re-measured 25.08 (Start Gifting reads white ink, white hairline, hover ground rgba(255,255,255,.2)). The fill is DECLARED. */ --gb-btn-fill-inverse: var(--white); /* DECLARED */ --gb-btn-fill-inverse-hover: var(--zinc-200); /* DECLARED, darkens */ --gb-btn-fill-inverse-active: var(--zinc-300); /* DECLARED */ --gb-btn-ink-on-inverse: var(--zinc-900); /* DECLARED */ --gb-btn-ink-inverse: var(--white); /* LIVE 24-25.08 */ --gb-btn-ink-inverse-hover: var(--white); /* LIVE 24-25.08 */ --gb-btn-ink-inverse-active: var(--white); /* LIVE 24-25.08 */ /* The wash an outline or a ghost lays down under itself. Both hovers are live and both were re-measured on 25.08 on the same button standing on two different grounds. The press washes are those colours carried further; DECLARED. */ --gb-btn-wash-accent-hover: var(--blue-50); /* DECLARED */ --gb-btn-wash-accent-active: var(--blue-200); /* DECLARED */ --gb-btn-wash-ink-hover: rgba(212, 212, 216, 0.2); /* LIVE 24-25.08, Zinc 300 at 20% */ --gb-btn-wash-ink-active: rgba(212, 212, 216, 0.35); /* DECLARED */ --gb-btn-wash-inverse-hover: rgba(255, 255, 255, 0.2); /* LIVE 24-25.08 */ --gb-btn-wash-inverse-active: rgba(255, 255, 255, 0.35); /* DECLARED */ /* ============ THE ICON ONLY BUTTON ============ gbppl-drawer-unify-1 (28.08). Section 8 of the skill has carried "icon-only: в организме нет" since the checkout census found twelve of them on one page; the drawer wave closes it, and it closes it WITHOUT INVENTING A NUMBER. Three of the four values below already lived in tokens.css, harvested off the v1 catalogue and worn by the header's round glyphs ever since; the organism now spends the same ones instead of every consumer drawing its own circle. 44 IS NOT ON THE HEIGHT GRID (72/64/56/48/40/36) and not on the space scale either. It is not being rounded up to 48: 44 is what the live v1 drawers and our own header both measure, and live wins over the formula the same way the header's 42 does. The glyph is 22, measured on those same drawers (svg 22x22, stroke 1.5). It is a half step between the 20 and the 24 that the open icon-size question in section 8 is about, and it is the one number here that is new to tokens.css. */ --gb-btn-icon-size: var(--icon-button-size); /* ALIAS 44, LIVE v1 + header */ --gb-btn-icon-radius: var(--radius-circle); /* ALIAS 50% */ --gb-btn-icon-glyph: 22px; /* LIVE catalogue drawers 28.08 */ --gb-btn-wash-icon-hover: var(--v1-ink-hover); /* ALIAS rgb(36 36 38 / 5%), LIVE: the wash a round glyph answers with in the catalogue drawers and in our header. A ghost RECTANGLE keeps the organism's Zinc 300 at 20%; a round one has always washed in ink at 5%, and both are measured. */ /* ============ FORM AND BEHAVIOUR ============ */ --gb-btn-radius: var(--radius); /* ALIAS 5, the one brand radius */ --gb-btn-border-width: 1px; /* LIVE 24.08, the outline hairline */ --gb-btn-disabled-opacity: 0.6; /* LIVE auth 18.08 (.gba-btn:disabled) */ --gb-btn-duration: 200ms; /* LIVE 24-25.08 on colour, background and border. Not the 160ms of --mo-micro: the live button is slower than our hover clock. */ --gb-btn-easing: var(--mo-move); /* ALIAS cubic-bezier(.4,0,.2,1), which is the curve the live button uses */ /* The focus ring. DECLARED, and put to Ton as a decision: the system has no ring of its own yet, and the only precedent in the house is the Colors page swatch row (2px Blue 600). Blue, because focus is a STATE and state speaks in the accent (Ton-5). Offset 2px so the ring never touches the 5px corner and stays readable around a filled blue button; on dark grounds it turns white, the same swap the inverse ink makes. */ --gb-btn-focus-ring: var(--blue-600); --gb-btn-focus-ring-inverse: var(--white); --gb-btn-focus-ring-width: 2px; --gb-btn-focus-ring-offset: 2px; }