/* ============================================================ STYLEGAUGE — Design Tokens Single source of truth for the front end. Every value below is one actually used in the Wave 1 / Wave 2 comps. WP = also exposed as a theme.json palette entry (editor-visible) CSS = CSS-only, not exposed to editors ============================================================ */ :root { /* ---- COLOUR · ink & structure -------------------------- */ --sg-nav: #0F1319; /* WP header + footer ground */ --sg-ink: #111317; /* WP primary text, primary buttons */ --sg-body: #4E5257; /* WP secondary body copy, long-form */ --sg-slate: #6E7378; /* WP tertiary text, labels, meta */ --sg-slate-light: #9A9EA3; /* CSS reversed meta text on --sg-nav */ --sg-mute: #A3A3A3; /* CSS struck prices, disabled text */ --sg-line: #E6E4E0; /* WP hairline borders, dividers */ --sg-line-dark: rgba(255,255,255,0.15); /* CSS rules on --sg-nav */ --sg-frame: #C9C4BC; /* CSS artboard/screen frame (comps only) */ /* ---- COLOUR · surfaces --------------------------------- */ --sg-white: #FFFFFF; /* WP card + page surface */ --sg-cream: #F8F6F2; /* WP alternating band, feature strip */ --sg-cream-2: #FBFAF8; /* CSS "similar item" row tint */ --sg-beige: #EAE4DC; /* WP image panel base, hero wash */ --sg-beige-2: #E3DCD2; /* CSS image-panel stripe (placeholder) */ --sg-grey-tint: #F1F1EF; /* CSS neutral chip fill */ /* ---- COLOUR · accent ----------------------------------- */ --sg-gold: #C4A46A; /* WP accent ON DARK ONLY */ --sg-gold-ink: #8A7340; /* WP accent on light grounds (AA text) */ --sg-gold-ink-deep: #7A5E28; /* CSS accent on --sg-gold-tint */ --sg-gold-tint: #F2E9DC; /* WP icon circles, AI panels */ /* ---- COLOUR · semantic --------------------------------- */ --sg-success: #2E7D4F; /* WP in stock, saving, lowest price */ --sg-success-deep: #1F5E3B; /* CSS success text on --sg-success-tint */ --sg-success-tint: #E9F5EE; /* WP success chip ground */ --sg-success-line: #CDE6D8; /* CSS success panel border */ --sg-amber: #8A6A32; /* WP stale price, low stock, caution */ --sg-alert: #D93A2B; /* WP sale price, don't-do, destructive */ --sg-alert-tint: #FBEAE8; /* WP alert chip ground */ /* ---- TYPE · family ------------------------------------- */ --sg-font: Archivo, Helvetica, Arial, sans-serif; --sg-font-mono: ui-monospace, Menlo, Consolas, monospace; /* slot labels only */ /* ---- TYPE · scale (size / weight / tracking / leading) -- Each step is a role, not a pixel size. Change the step, every instance follows. */ /* display-2xl · homepage + About hero */ --sg-display-2xl: 86px; --sg-display-2xl-w: 900; --sg-display-2xl-ls: -0.03em; --sg-display-2xl-lh: 0.95; /* display-xl · page H1 (outfit, occasion, category) */ --sg-display-xl: 58px; --sg-display-xl-w: 900; --sg-display-xl-ls: -0.02em; --sg-display-xl-lh: 1.0; /* display-lg · band headline */ --sg-display-lg: 40px; --sg-display-lg-w: 900; --sg-display-lg-ls: -0.02em; --sg-display-lg-lh: 1.05; /* display-md · PDP product title */ --sg-display-md: 32px; --sg-display-md-w: 800; --sg-display-md-ls: -0.01em; --sg-display-md-lh: 1.1; /* heading-lg · section header, uppercase */ --sg-heading-lg: 20px; --sg-heading-lg-w: 800; --sg-heading-lg-ls: 0.01em; --sg-heading-lg-lh: 1.2; /* heading-md · card group header, uppercase */ --sg-heading-md: 19px; --sg-heading-md-w: 700; --sg-heading-md-ls: 0.02em; --sg-heading-md-lh: 1.25; /* heading-sm · panel header, uppercase */ --sg-heading-sm: 13px; --sg-heading-sm-w: 700; --sg-heading-sm-ls: 0.10em; --sg-heading-sm-lh: 1.3; /* body-lg · editorial lede */ --sg-body-lg: 17px; --sg-body-lg-w: 500; --sg-body-lg-ls: 0; --sg-body-lg-lh: 1.6; /* body · default paragraph */ --sg-body-size: 14.5px; --sg-body-w: 400; --sg-body-ls: 0; --sg-body-lh: 1.65; /* body-sm · card + table copy */ --sg-body-sm: 13px; --sg-body-sm-w: 400; --sg-body-sm-ls: 0; --sg-body-sm-lh: 1.55; /* label · uppercase micro-label, table head */ --sg-label: 11px; --sg-label-w: 700; --sg-label-ls: 0.12em; --sg-label-lh: 1.2; /* label-brand · product brand line */ --sg-label-brand: 10.5px; --sg-label-brand-w: 500; --sg-label-brand-ls: 0.14em; --sg-label-brand-lh: 1.2; /* nav · header navigation item */ --sg-nav-size: 12.5px; --sg-nav-w: 600; --sg-nav-ls: 0.08em; --sg-nav-lh: 1; /* button · all CTA labels */ --sg-button: 12px; --sg-button-w: 700; --sg-button-ls: 0.10em; --sg-button-lh: 1; /* price-xl · PDP hero price */ --sg-price-xl: 40px; --sg-price-xl-w: 800; /* price-lg · comparison row, look total */ --sg-price-lg: 19px; --sg-price-lg-w: 700; /* price · card price */ --sg-price: 16px; --sg-price-w: 700; /* all prices: font-variant-numeric: tabular-nums */ /* ---- SPACING · 2px base, only these steps in use -------- */ --sg-space-1: 4px; --sg-space-2: 6px; --sg-space-3: 8px; --sg-space-4: 10px; --sg-space-5: 12px; --sg-space-6: 14px; --sg-space-7: 16px; /* grid gutter */ --sg-space-8: 20px; /* mobile page margin */ --sg-space-9: 24px; --sg-space-10: 28px; /* inter-section, tight */ --sg-space-11: 32px; /* desktop page margin */ --sg-space-12: 38px; /* inter-section, default */ --sg-space-13: 46px; /* inter-band */ --sg-space-14: 56px; --sg-space-15: 72px; /* ---- RADIUS -------------------------------------------- */ --sg-radius-xs: 3px; /* retailer logo plate */ --sg-radius-sm: 6px; /* chips, badges, swatch tiles */ --sg-radius-md: 8px; /* buttons, inputs, inner panels */ --sg-radius-lg: 12px; /* cards, tables, image panels */ --sg-radius-xl: 14px; /* monogram tile */ --sg-radius-full: 999px; /* pills, avatars, icon circles */ /* ---- BORDER -------------------------------------------- */ --sg-border: 1px solid var(--sg-line); --sg-border-strong: 2px solid var(--sg-ink); /* selected state, emphasis panel */ --sg-border-dashed: 1px dashed var(--sg-line); /* empty slot */ --sg-border-accent: 3px solid var(--sg-gold); /* pull-quote / callout rule */ --sg-rule-ink: 2px solid var(--sg-ink); /* section top rule */ /* ---- SHADOW · used sparingly; the system is border-led -- */ --sg-shadow-none: none; --sg-shadow-bar: 0 -4px 24px rgba(17,19,23,0.08); /* sticky compare tray */ --sg-shadow-pop: 0 8px 32px rgba(17,19,23,0.12); /* dropdown, modal */ --sg-ring-select: 0 0 0 2px #FFFFFF, 0 0 0 3px var(--sg-ink); /* colour swatch */ /* ---- LAYOUT -------------------------------------------- */ --sg-header-h: 70px; --sg-header-h-mobile: 58px; --sg-hit-min: 44px; /* minimum touch target */ --sg-max-measure: 72ch; /* long-form reading measure */ --sg-grid-gutter: var(--sg-space-7); /* ---- MOTION -------------------------------------------- */ --sg-ease: cubic-bezier(0.2, 0, 0.2, 1); --sg-dur-fast: 120ms; /* hover, focus */ --sg-dur: 200ms; /* swap cross-fade */ --sg-dur-slow: 1400ms; /* skeleton sweep */ } /* ---- BREAKPOINTS ---------------------------------------- Custom properties cannot be used in media queries; these are the literal widths the layouts change at. Mirror them in any preprocessor or theme.json setting. --sg-bp-sm 480px single column, 2-up product grid --sg-bp-md 768px sidebar filters collapse to a sheet; 3-up product grid --sg-bp-lg 1024px comparison table stops scrolling horizontally; 4-up product grid --sg-bp-xl 1280px sidebar returns; 6-up product grid --sg-bp-max 1440px design width; content caps, gutters grow ---------------------------------------------------------- */ @media (max-width: 1279px) { :root { --sg-grid-cols: 4; } } @media (max-width: 1023px) { :root { --sg-grid-cols: 3; } } @media (max-width: 767px) { :root { --sg-grid-cols: 2; --sg-display-2xl: 46px; --sg-display-xl: 38px; --sg-display-lg: 28px; } } /* ============================================================ theme.json MAPPING Palette entries (editor-visible, marked WP above): nav, ink, body, slate, line, white, cream, beige, gold, gold-ink, gold-tint, success, success-tint, amber, alert, alert-tint — 16 entries Everything marked CSS stays out of theme.json: it is either a derived tint, an alpha value, a comp-only artefact, or a state colour an editor should never apply to text or a background. Type: map display-2xl → heading-sm and body → label into theme.json typography.fontSizes using these same names, with fluid clamp() ranges derived from the mobile overrides above. Spacing: expose space-3 … space-13 as spacingSizes. ============================================================ */