/* ============================================================ NICOLE STEINMETZ — DESIGN TOKENS v2 Source of truth: Figma "Nicole Steinmetz" → Home (node 1:2) ------------------------------------------------------------ v2 supersedes tokens.css v1 (cobalt/bone). Every value below was read off the Figma node, not invented. Where v1 had a token the design no longer uses, it has been dropped rather than left to rot. Australian English throughout. ============================================================ */ :root { /* ---- BRAND ---------------------------------------------- */ --rust: #894332; /* primary CTA, CONTACT US pill */ --rust-press: #6E3527; /* :active — derived, not in Figma */ --amber: #F4A600; /* PRICING pill */ --amber-press: #D18F00; /* derived */ --blue: #6A96C7; /* FAQS pill */ --blue-press: #5A81AE; /* derived */ /* ---- INK ------------------------------------------------- */ --ink: #505050; /* headings + pillar body */ --ink-soft: #575757; /* hero sub, eyebrow */ --on-dark: #FFFFFF; /* text on rust / on footer image */ /* ---- SURFACES -------------------------------------------- */ --paper: #FFFFFF; /* page background */ --card: #F7F6F5; /* How We Build card */ --card-line: #DAD6D2; /* 0.5px hairline on that card */ /* ---- TYPOGRAPHY ------------------------------------------ Figma uses Inter, IBM Plex Mono and Helvetica Neue Bold. Helvetica Neue is NOT web-licensable without a paid licence and is only used on button labels + the CONTACT footer heading — where it is visually near-identical to Inter Bold at 16-20px. It maps to Inter here on purpose. See ASSETS.md → "Fonts" before changing this. */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid scale. Upper bound = the Figma value at 1440. */ --fs-eyebrow: 0.875rem; /* 14px */ --fs-h1: clamp(1.75rem, 2.78vw, 2.5rem); /* 28 → 40px */ --fs-lede: clamp(1.125rem, 1.53vw, 1.375rem); /* 18 → 22px */ --fs-h2: clamp(1.5rem, 2.08vw, 1.875rem); /* 24 → 30px */ --fs-h3: clamp(1.25rem, 1.53vw, 1.375rem);/* 20 → 22px */ --fs-body: 1rem; /* 16px */ --fs-ui: 1rem; /* 16px */ --fs-footer-h: 1.25rem; /* 20px */ --lh-tight: 1.15; /* h1 */ --lh-lede: 1.495; /* 32.9 / 22 */ --lh-body: 1.875; /* 30 / 16 — How We Build prose */ --lh-compact: 1.5625; /* 25 / 16 — pillar body */ --ls-eyebrow: 0.1em; /* 1.4px / 14px */ /* ---- LAYOUT ---------------------------------------------- */ --page-max: 1280px; /* 1440 frame − 80px gutters */ --gutter: 80px; --gutter-md: 40px; --gutter-sm: 20px; /* ---- SPACING (8px rhythm) -------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---- RADIUS ---------------------------------------------- */ --r-card: 15px; --r-pill: 40px; /* ---- MOTION ---------------------------------------------- */ --ease: cubic-bezier(.2, .6, .2, 1); --dur-fast: 140ms; --dur-base: 240ms; --hero-caret-w: 2px; --hero-caret-blink: 530ms; --hero-title-lines: 2; --hero-title-lines-sm: 3; /* ---- TOOLS CARD ------------------------------------------ From Nicole___Tool_Stack_Card_v5.html — not Figma. That file is the source for this component. Brand mark fills (Shopify green, Figma purple, etc.) stay on the SVGs; they are not UI tokens. */ --tools-card: #F4F2F0; --tools-card-line: #D9D9D9; --tools-chip: #FBFAF8; --tools-chip-line: #E4E1DB; --ink-faint: rgba(80, 80, 80, .42); --r-tools: 20px; --r-chip: 10px; --ease-out: cubic-bezier(.16, 1, .3, 1); --fs-chip: 0.8rem; --fs-chip-label: 0.625rem; --tools-chip-w: 150px; --tools-chip-h: 40px; --tools-icon: 18px; --tools-ratio: 370 / 324; --tools-ratio-sm: 343 / 329; --tools-pad: 18px; --tools-pad-y: 26px; /* extra air so the card matches How We Build */ --tools-field-y: 20px; --tools-field-x: 16px; --tools-enter: 40ms; --tools-stagger: 60ms; --tools-float: 7s; --tools-breathe: 3.6s; --dur-enter: 520ms; --tools-chip-gap: 7px; --tools-enter-y: 14px; --tools-arrow: 36px; --tools-mask: radial-gradient(70% 62% at 50% 46%, #000 55%, rgb(0 0 0 / .55) 75%, transparent 100%); /* ---- QUOTE CARD ------------------------------------------ From Nicole___Quote_Card_v2.html — not Figma. Shares the tools-card surface. Display-only: the loop ticks line items and counts the total; rows are not clickable. Orange in that file is #FFAD00; maps to --amber here, same as the Tools card hover. */ --quote-box: #F1EFEC; --ink-muted: rgb(80 80 80 / .68); --quote-ratio: 742 / 522; --quote-ratio-sm: 343 / 400; --quote-min-h: 340px; --r-quote: 24px; --r-quote-panel: 16px; --r-quote-box: 6px; --quote-check: 22px; --quote-check-icon: 13px; --fs-quote: 0.9375rem; --fs-quote-kicker: 0.75rem; --fs-quote-total: 1.125rem; --quote-float: 9s; --quote-count: 420ms; --dur-quote: 260ms; --quote-enter: 560ms; --quote-mask: radial-gradient(78% 72% at 50% 50%, #000 52%, rgb(0 0 0 / .5) 78%, transparent 100%); --quote-dot: radial-gradient(circle, rgb(80 80 80 / .22) 1.3px, transparent 1.4px); --quote-dot-size: 9px; --quote-dot-mask: radial-gradient(closest-side, #000 38%, rgb(0 0 0 / .45) 70%, transparent 100%); --r-quote-sm: 18px; --quote-eyebrow-pad: 11px 22px; --quote-eyebrow-pad-sm: 9px 18px; --quote-panel-pad: 24px 30px 22px; --quote-panel-pad-sm: 20px 20px 18px; --quote-row-pad: 9px 8px; --quote-rule-gap: 16px 0 14px; --quote-blob-in: 900ms; /* ---- PROJECT CARD ---------------------------------------- From Nicole___Start_Project_Card_v2.html — not Figma. Same surface as the Quote card. Display-only: the loop types a client name and ticks the brief. */ --proj-field: #F7F6F4; --proj-input-h: 40px; --proj-caret-w: 1.5px; --proj-caret-h: 17px; --proj-type: 68ms; --proj-group-gap: 22px; --proj-eyebrow-pad: 13px 24px; --proj-panel-pad: 26px 30px 34px; --proj-panel-pad-sm: 20px 20px 24px; --proj-pill-pad: 9px 20px; --proj-pill-pad-sm: 8px 15px; --fs-proj-pill-sm: 0.8125rem; --proj-grid-col: 18px; --proj-grid-row: 11px; --proj-grid-gap-sm: 10px; --proj-legend-ls: 0.09em; --proj-legend-mb: 10px; --proj-input-pad-x: 14px; --proj-pills-gap: 10px; --proj-ring: 3px; --proj-caret-ml: 2px; /* ---- TRUSTED BY MARQUEE ---------------------------------- Not in Figma — the row is static there. Duration is one full set-width loop; higher = slower. */ --trusted-marquee: 36s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }