/* ========================================================================== LUSTRE / tokens.css [agent-02] Design tokens ONLY. No selectors other than :root and token-only media queries. Light mode only (Ana Luisa ships no dark mode). PROVENANCE Every value is tagged: [M] MEASURED - read directly out of analuisa.com production CSS/markup. Sources, re-verified 2026-08-03: www.analuisa.com/ (home, 370KB) www.analuisa.com/collections/necklaces/ (PLP, 391KB) www.analuisa.com/styles.63270b914818d4b1331d.css (222KB) [I] INFERRED - not present on their site; chosen to fit the measured system. Do not cite these as "how Ana Luisa does it". Full write-up + reasoning: D:\ozla\DESIGN.md Nothing here copies their photography, copy, wordmark or SKUs. Numbers only. CHANGELOG round 2 (values only, NO token was renamed): --fs-sm max 13px -> 14px now [M] --fs-4xl max 56px -> 64px now [M] --grid-gap desktop 20px -> 25px now [M] --header-h mobile 56px -> 55px now [M] --lh-display 1.1 -> 1.05 added: --bg-editorial --line-hair --sp-14 --sp-16 --fs-prose --dur-instant --radius-circle --swatch --swatch-lg --ring-w ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. PALETTE Ana Luisa runs a near-monochrome page: white ground, black type, one warm grey for secondary text, one warm hairline. Colour appears only on sale flags and status. Keep it that way. --------------------------------------------------------------------- */ --bg: #ffffff; /* [M] body background */ --bg-soft: #efeded; /* [M] their neutral section wash (13 uses) */ --bg-cream: #fbf7ec; /* [M] warm editorial band; use sparingly */ --bg-editorial: var(--bg-cream); /* [M] alias. views/home.js codes against this name. Same ink as --bg-cream. */ --bg-inverse: #000000; /* [M] footer / full-bleed dark sections */ --fg: #000000; /* [M] body color:#000 - true black, not #111 */ --fg-muted: #898786; /* [M] their "dark-grey"; secondary + meta text */ --fg-subtle: #afafaf; /* [M] disabled state grey */ --fg-inverse: #ffffff; /* [M] */ --line: #e4e1db; /* [M] warm hairline; DEFAULT divider + card edge */ --line-soft: #efeded; /* [M] barely-there rule inside dense blocks */ --line-hair: var(--line-soft); /* [M] alias. views/home.js codes against this name. Same ink as --line-soft. */ --line-strong: #000000; /* [M] 1px solid #000 on outline buttons and focused inputs ONLY. Do not box cards in this, it kills the editorial feel. */ --accent: #000000; /* [M] primary CTA background (--btn-bg:#000000 on the live homepage buttons). Their old red CTA is retired; black is current. */ --accent-fg: #ffffff; /* [M] --btn-fg:#FFFFFF */ --accent-alt: #bb1b01; /* [M] the Ana Luisa red. Now reserved for sale, urgency and error. Never a page-wide accent. */ --sale: #bb1b01; /* [M] sale price + strikethrough partner colour */ --sale-soft: #e94b2f; /* [M] their "poppy"; badges on dark imagery */ --success: #26c653; /* [M] */ --warn: #aa7a22; /* [M] their "bronze" */ --error: #bb1b01; /* [M] same red as sale (text-error) */ --focus: #124e52; /* [M] deep teal from their link-hover state, repurposed as the focus ring so the ring is visible on both white and black. */ /* --------------------------------------------------------------------- 2. TYPE Ana Luisa's live site is effectively ALL SANS. Every typo-* class in production resolves to Mulish. The serif faces they still load (Rigatoni, AwesomeSerif) survive on a handful of legacy editorial blocks only. Do not reach for a serif by default. Mulish = SIL Open Font License. Legal to self-host. We self-host the variable woff2 at public/fonts/ (see base.css @font-face). [M] Rigatoni / AwesomeSerif = commercial licences. NOT used, NOT loaded. Editorial serif substitute is Fraunces (OFL) - see DESIGN.md. [I] --------------------------------------------------------------------- */ --font-body: "Mulish", "Mulish Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* [M]. "Mulish Fallback" is a metric-matched local() face defined in base.css; it holds the line box steady so the webfont swap causes zero layout shift. */ --font-display: var(--font-body); /* [M] headings are Mulish on AL. Intentionally NOT a serif. */ --font-editorial: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; /* [I] optional accent only. NOT loaded; system fallback. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* [M] present in their reset */ /* Fluid scale. Each clamp hits the MEASURED Ana Luisa mobile value at 320px and the MEASURED desktop value at 770px (their only real breakpoint), then holds. rem-based so browser zoom still works. Their measured pairs, mobile -> desktop: typo-micro-bold-caps 10 -> 12 typo-body 12 -> 15 (UI text: labels, prices, nav) .text / prose 14 -> 16 (long-form body copy) typo-h3 15 -> 20 typo-h2 18 -> 24 .h1 module / title-l 28 -> 52 typo-h1 24 -> 40 title-xl 32 -> 64 .subtext -> 14 */ --fs-xs: clamp(0.625rem, 0.536rem + 0.444vw, 0.75rem); /* [M] 10 -> 12 micro caps */ --fs-sm: clamp(0.75rem, 0.661rem + 0.444vw, 0.875rem); /* [M] 12 -> 14 fine print, .subtext at desktop */ --fs-md: clamp(0.8125rem, 0.724rem + 0.444vw, 0.9375rem); /* [M] 13 -> 15 UI body. desktop 15 is theirs; mobile is 13, +1px over their 12, for legibility on long product names */ --fs-prose: clamp(0.875rem, 0.786rem + 0.444vw, 1rem); /* [M] 14 -> 16 LONG-FORM copy only (.text). AL runs prose 1px..2px larger than UI text. Use on PDP description, editorial, static pages. */ --fs-lg: clamp(0.9375rem, 0.715rem + 1.111vw, 1.25rem); /* [M] 15 -> 20 typo-h3 */ --fs-xl: clamp(1.125rem, 0.858rem + 1.333vw, 1.5rem); /* [M] 18 -> 24 typo-h2 */ --fs-2xl: clamp(1.25rem, 0.894rem + 1.778vw, 1.75rem); /* [M] 20 -> 28 desktop 28 is their .h1 module; mobile 20 is [I], a bridge step */ --fs-3xl: clamp(1.5rem, 0.789rem + 3.556vw, 2.5rem); /* [M] 24 -> 40 typo-h1 */ --fs-4xl: clamp(2rem, 0.578rem + 7.111vw, 4rem); /* [M] 32 -> 64 title-xl. See DESIGN.md: at this size AL drops to weight 400. */ --fs-base: var(--fs-md); /* alias */ --lh-tight: 1.25; /* [M] AL's universal heading ratio (24/30, 40/50, 18/23, 15/19, 12/15 all land on 1.25) */ --lh-display: 1.05; /* [I] --fs-2xl and up. AL literally ships line-height:100% on every title-* step; we add 5% so a two-line mobile headline does not collide with itself. */ --lh-body: 1.5; /* [M] their long-form .text is 16/24 at desktop */ --lh-relaxed: 1.57; /* [M] their long-form .text is 14/22 at mobile */ --fw-regular: 400; /* [M] */ --fw-bold: 700; /* [M] AL has no 500/600; it is 400 or 700, nothing else */ --ls-caps: 0.05em; /* [M] typo-micro-bold-caps letter-spacing */ --ls-caps-wide: 0.08em; /* [M] their uppercase subtext */ --ls-tight: -0.01em; /* [M] .h1 module; large headings only */ /* --------------------------------------------------------------------- 3. SPACING (4px base per CONTRACT.md) AL's own rhythm is 5px-based (10/15/20/25/30/40/50/80). The steps below keep a 4px base but land exactly on their key values where it shows: 20 (page gutter), 40 (section heading gap), 80 (wide gutter). This is a STEP scale, not a multiplier scale: --sp-12 is 120px, not 12 * 4px. Read the number as an index. --------------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; /* [M] page gutter, mobile (collection_header margin) */ --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; /* [M] margin under section headings; collection_header desktop */ --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; /* [M] their widest vertical block padding */ --sp-12: 120px; /* [I] top-level section rhythm at desktop */ --sp-14: 160px; /* [I] rare. full-bleed editorial break. */ --sp-16: 200px; /* [I] rare. tallest thing on the site. */ /* --------------------------------------------------------------------- 4. LAYOUT --------------------------------------------------------------------- */ --container: 1440px; /* [M] their --screen-xl */ --container-narrow: 680px; /* [M] max-width on text-only blocks (single use on their side, but it is the right number for a 65ch measure at --fs-prose) */ --container-wide: 1536px; /* [M] largest .container step before full bleed */ --container-prose: 1200px; /* [M] max-width:1200px on their collection SEO copy */ --gutter: 20px; /* [M] padding 0 20px, mobile (overridden below) */ --grid-gap: 15px; /* [M] mobile:gap-x-[15px] on the live PLP grid */ --grid-gap-row: 30px; /* [M] mobile:gap-y-[30px] on the live PLP grid */ --grid-cols: 2; /* [M] mobile PLP is 2-up (overridden below) */ --section-y: 48px; /* [I] vertical rhythm between page sections, mobile */ /* Breakpoints. CSS cannot use vars in @media, these are for JS + docs. 770px is AL's ONE real breakpoint. They pair it with max-width:768px for the mobile side, leaving a 769px dead zone. We do not copy the bug: everything below is a clean min-width ladder. */ --bp-md: 770px; /* [M] the real desktop switch */ --bp-lg: 1024px; /* [M] .container step */ --bp-xl: 1280px; /* [M] .container step */ /* --------------------------------------------------------------------- 5. SHAPE AL is a flat site. Radii are small and shadows are near-absent: the only real box-shadow in 222KB of their CSS is a focus glow. Separate with hairlines, not elevation. --------------------------------------------------------------------- */ --radius-sm: 4px; /* [M] --border-sm; rounded-[4px] on live buttons + inputs */ --radius-md: 8px; /* [M] --border-md; most-used radius on their site */ --radius-lg: 12px; /* [I] their next step up is 20px/30px; 12 is ours */ --radius-pill: 999px; /* [M] legacy .button used calc(height/2); still on pills, chips and badges */ --radius-circle: 50%; /* [M] avatars, dots, swatches */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); /* [I] AL ships none */ --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); /* [I] drawers/dropdowns only */ --ring: 0 0 0 5px rgba(168, 19, 10, 0.1); /* [M] their real focus glow, verbatim. Decorative only: contrast is too low to be the accessible focus ring, base.css uses an outline. */ --ring-w: 2px; /* [I] :focus-visible outline width */ --ring-off: 2px; /* [I] :focus-visible outline offset */ /* --------------------------------------------------------------------- 6. CONTROL PROPORTIONS --------------------------------------------------------------------- */ --btn-h: 45px; /* [M] h-[45px] on live primary CTAs */ --btn-h-sm: 35px; /* [M] h-[35px]; they also run 28px on image overlays */ --btn-h-lg: 50px; /* [M] .button--large */ --btn-px: 15px; /* [M] px-[15px] (59 uses, their default inline pad) */ --btn-px-lg: 28px; /* [M] padding:9px 28px on .button--small */ --input-h: 45px; /* [I] their newsletter input computes to ~41px (12px pad + 15px line + 1px border, both sides). We round up to --btn-h so a field and its button align on one row and we clear the 44px tap floor. */ --input-px: 15px; /* [M] px-[15px] on their newsletter input */ --tap-min: 44px; /* [I] accessibility floor */ --card-ratio: 4 / 5; /* [M] product media aspect-ratio:.8, and the explicit 266/333 (= .7988) they ship next to it */ --hero-ratio: 3 / 4; /* [I] mobile hero */ --square: 1 / 1; /* [M] aspect-ratio:1/1 for thumbs + tiles */ --header-h: 55px; /* [M] mobile nav is py-[18px] around a 17px mark, and h-[55px] is the height they hardcode on every slide-out panel header. */ --announce-h: 36px; /* [I] no announcement bar on the pages we measured */ --swatch: 40px; /* [M] variant-input-wrap-size, mobile */ --swatch-lg: 42px; /* [M] variant-input-wrap-size, desktop */ /* --------------------------------------------------------------------- 7. MOTION --------------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* [M] most used */ --ease-out: cubic-bezier(0, 0, 0.2, 1); /* [M] */ --ease-overshoot: cubic-bezier(0, 0.57, 0.55, 1.07); /* [M] image + card reveals */ --dur-instant: 150ms; /* [M] .15s, hover tints and colour swaps */ --dur-fast: 200ms; /* [M] .2s, opacity */ --dur: 300ms; /* [M] .3s, the site default */ --dur-slow: 600ms; /* [M] .6s, transform, big media moves */ --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; } /* ========================================================================== Breakpoint token overrides. 770px is Ana Luisa's real desktop switch [M]. Only layout-ish tokens change here; the type scale is already fluid and needs no override. ========================================================================== */ @media (min-width: 770px) { :root { --gutter: 50px; /* [M] px-[50px] / desktop:px-[50px] */ --grid-gap: 25px; /* [M] gap-x-[25px] on the live PLP grid */ --grid-gap-row: 50px; /* [M] gap-y-[50px] on the live PLP grid */ --grid-cols: 4; /* [M] grid-cols-4 on the live PLP grid. AL jumps 2 -> 4 with no 3-up step. */ --section-y: 80px; /* [M] their widest vertical block padding */ --header-h: 72px; /* [I] their desktop header is content-sized */ } } @media (min-width: 1280px) { :root { --gutter: 80px; /* [I] no px-[80px] on their site. Chosen so that --container 1440 minus 2 * 80 = 1280, which is the max-width they DO put on hero titles [M]. */ --section-y: 120px; /* [I] */ } }