/* ========================================================================== TOKENS -------------------------------------------------------------------------- Single source of truth for the visual language. Design source : Figma "PORTFOLIO_CASE-STUDY-LAYOUT" frame 673:10756 - "PORTFOLIO HOME PAGE_1920_C" Reference width : 1920px NOTE ON PROVENANCE The Figma file publishes no design variables - get_variable_defs on the frame returned a single empty style ("Grad"). Every value below was therefore lifted from the literal properties on the frame's layers and named here. This file is the only place raw hex / px values should live; the component stylesheets consume these custom properties. ========================================================================== */ :root { /* ---------------------------------------------------------------------- BREAKPOINTS Declared as custom properties for documentation and for JS to read. Media queries cannot interpolate custom properties, so the same numbers are repeated literally in @media rules - if you change one, change both. Every stylesheet uses this ladder and nothing else. (base) 0 - 480px mobile --bp-mobile-lg 481px - 767px large mobile --bp-tablet 768px - 1023px tablet --bp-desktop 1024px - 1439px desktop --bp-desktop-lg 1440px + large desktop -> approaches the 1920px Figma frame exactly ---------------------------------------------------------------------- */ --bp-mobile-lg: 481px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-desktop-lg:1440px; /* Nav-only breakpoint. The frame's seven nav items need 595px of text at the design's 16px/600, plus gaps and pill padding - more than the header can offer at 1024. Rather than shrink type below the design, the pill appears at 1200px and the collapsed menu covers everything under that. The two-column rail layout still begins at --bp-desktop. */ --bp-nav: 1200px; /* The viewport at which fluid values below reach their Figma value. */ --design-width: 1920px; /* ---------------------------------------------------------------------- COLOR ---------------------------------------------------------------------- */ /* Surfaces */ --color-bg: #242427; /* page */ --color-surface-header: #323237; /* header bar */ --color-surface-panel: rgba(138, 133, 127, 0.12); /* full-bleed bands */ --color-surface-card: rgba(138, 133, 127, 0.13); /* recommendation card*/ /* Text */ --color-text: #EDEDEA; /* primary - headlines, stat figures */ --color-text-strong: #FFFFFF; /* wordmark, ability titles, card label*/ --color-text-muted: #8A857F; /* secondary body, section eyebrows */ --color-text-caption: #BFBAB5; /* closing caption, stacked on mobile */ --color-text-on-image: #000000; /* closing caption over the photo */ --color-text-meta: rgba(255, 255, 255, 0.55); /* author role */ /* Accents */ --color-link: #1E9AFF; /* "LinkedIn >" in the rail */ --color-link-more: #008DFF; /* "more" inside a recommendation */ --color-accent-yellow: #F0C953; /* WayFinder News wordmark */ /* Lines & borders */ --color-border-nav: #8A857F; /* collapsed nav panel rules, 0.5px */ --color-border-media: #A3A3A3; /* work card, 0.5px */ --color-border-panel: #434343; /* impact panel + rec card, 1px */ --color-rule-ability: #FFFFFF; /* vertical rule beside an ability, 1px*/ --color-rule-card: #D1D1D1; /* rule inside a rec card, 0.5px */ --color-divider: rgba(255, 255, 255, 0.08); /* short vert divider */ /* Focus - not in the Figma frame. Added because the design ships no focus treatment and an unfocusable portfolio is not shippable. */ --color-focus: #1E9AFF; /* Work-card hover ("SELECTION behaivior" frame 675:11185) */ --color-card-veil: rgba(0, 0, 0, 0.7); /* ---------------------------------------------------------------------- TYPEFACES Inter carries the whole page; Poppins is used only for the "WayFinder News" wordmark in the start-up brand row. ---------------------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Poppins", var(--font-sans); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Used by both case-study hero headlines (Inter Extra Bold in the frames). Was referenced by case-study.css before it was ever declared here. */ --fw-extrabold: 800; /* ---------------------------------------------------------------------- TYPE SCALE (fluid) Each step is clamp(min, preferred, max) where `max` is the exact Figma value and is reached at a 1920px viewport; `min` is reached at 375px. The preferred term is the line through those two points, so type scales smoothly instead of snapping at breakpoints. ---------------------------------------------------------------------- */ --fs-hero: clamp(2.5rem, 1.46845rem + 4.40129vw, 6.75rem); /* 40 -> 108 */ --fs-display: clamp(2rem, 1.51456rem + 2.07120vw, 4rem); /* 32 -> 64 */ --fs-stat: clamp(2rem, 1.75728rem + 1.03560vw, 3rem); /* 32 -> 48 */ /* Both header frames set this at a flat 32/36 — the desktop header (728:9841) and the mobile one (742:15539) — so it reaches 32 by the nav breakpoint and holds there rather than growing on to 1920. It only eases down below that, where 32 plus three icons would not fit a phone. */ --fs-wordmark: clamp(1.375rem, 1.09056rem + 1.21359vw, 2rem); /* 22 -> 32 at 1199 */ --fs-quote-attr: clamp(1.125rem, 0.97330rem + 0.64725vw, 1.75rem); /* 18 -> 28 */ --fs-title: clamp(1.375rem, 1.28398rem + 0.38835vw, 1.75rem); /* 22 -> 28 */ --fs-lead: clamp(1.125rem, 1.00364rem + 0.51780vw, 1.625rem); /* 18 -> 26 */ --fs-eyebrow: clamp(1rem, 0.87864rem + 0.51780vw, 1.5rem); /* 16 -> 24 */ --fs-rail-intro: clamp(1.0625rem, 0.95631rem + 0.45307vw, 1.5rem); /* 17 -> 24 */ --fs-body: clamp(1.0625rem, 1.01699rem + 0.19417vw, 1.25rem); /* 17 -> 20 */ --fs-caption: clamp(1.0625rem, 0.89563rem + 0.71197vw, 1.75rem); /* 17 -> 28 */ --fs-brand-label: clamp(0.875rem, 0.81432rem + 0.25890vw, 1.125rem); /* 14 -> 18 */ --fs-ui: 1rem; /* 16 fixed */ --fs-nav: 0.875rem; /* 14 fixed */ /* Line heights - expressed as ratios so they hold at every size. */ --lh-hero: 1.05; /* 108 / 113.4 */ --lh-display: 1.094; /* 64 / 70 */ --lh-stat: 1; /* 48 / 48 */ --lh-title: 1.286; /* 28 / 36 */ --lh-eyebrow: 1.5; /* 24 / 36 */ --lh-brand: 1.444; /* 18 / 26 */ --lh-body: 1.5; /* 20 / 30 */ --lh-lead: 1.538; /* 26 / 40 */ --lh-quote: 1.45; /* recommendation body */ --lh-name: 1.5; --lh-role: 1.4; --lh-normal: normal; /* Letter spacing */ --ls-hero: -0.4px; --ls-display: -1px; --ls-eyebrow: -0.44px; --ls-quote: -0.08px; --ls-title: 0.1px; --ls-stat-meta: 0.3px; --ls-caption: 0.1px; /* ---------------------------------------------------------------------- LAYOUT At 1920 the frame is: 80 gutter | 320 rail | 40 gap | 1400 main | 80. ---------------------------------------------------------------------- */ --layout-max: 1760px; /* rail + gap + main */ /* The rail is 320px in the frame. Held fixed it starves the content column at 1024-1440, so it eases in and reaches the design value at 1600px and above. */ --layout-rail: clamp(11.25rem, 20vw, 20rem); /* 180 -> 320 */ --layout-rail-gap: clamp(1.5rem, 2.0833vw, 2.5rem); /* 24 -> 40 */ --layout-main: 1400px; /* main content column */ --page-gutter: clamp(1.25rem, 0.33981rem + 3.88350vw, 5rem); /* 20 -> 80 */ /* Frame 675:11867 was cut from 114 to 90. Flat, not fluid: the frame draws one height and it should be that height at every width, not only at 1920. NOTE: this token is shared, so the home page follows it too — its own frame still draws 114. */ --header-height: 5.625rem; /* 90 flat */ /* ---------------------------------------------------------------------- SPACE Vertical rhythm between the main column's children. In Figma the column is a 72px-gap flex stack; wider separations are produced by 40px and 8px spacer rectangles sitting in the flow (72 + 40 + 72 = 184). Those shims are expressed here as gaps rather than as empty elements. ---------------------------------------------------------------------- */ /* header -> first content band (the frame's root 110px flex gap) */ --page-top-gap: clamp(3.5rem, 2.68081rem + 3.49515vw, 6.875rem); /* 56 -> 110 */ /* Frame D's rhythm is flat: 110 between every band, with two 72s and one 118. The old 40/8px spacer rectangles are gone from the frame. */ --gap-band: clamp(3.5rem, 2.68083rem + 3.49515vw, 6.875rem); /* 56 -> 110 between bands */ --gap-tight: clamp(2.5rem, 2.01456rem + 2.07120vw, 4.5rem); /* 40 -> 72 hero>work, recs>quote */ --gap-closing: clamp(3.5rem, 2.55947rem + 4.01294vw, 7.375rem); /* 56 -> 118 quote > closing img */ /* Kept: still used inside sections. */ --section-gap: clamp(2.5rem, 2.01456rem + 2.07120vw, 4.5rem); /* 40 -> 72 */ /* About: the long paragraph now sits above the portrait row. */ --about-body-gap: clamp(2rem, 1.60558rem + 1.68285vw, 3.625rem); /* 32 -> 58 */ --grid-gap: clamp(1rem, 0.63592rem + 1.55340vw, 2.5rem); /* 16 -> 40 */ --grid-row-gap: clamp(2rem, 1.51456rem + 2.07120vw, 4rem); /* 32 -> 64 */ --ability-gap-x: clamp(1.5rem, 1.01456rem + 2.07120vw, 3.5rem); /* 24 -> 56 */ --ability-gap-y: clamp(1.75rem, 1.68932rem + 0.25890vw, 2rem); /* 28 -> 32 */ --brand-gap: clamp(2rem, 0.42233rem + 6.73139vw, 8.5rem); /* 32 -> 136 */ --about-gap: clamp(1.5rem, 0.92354rem + 2.45955vw, 3.875rem); /* 24 -> 62 */ --space-2: 0.125rem; /* 2 */ --space-4: 0.25rem; /* 4 */ --space-8: 0.5rem; /* 8 */ --space-14: 0.875rem; /* 14 */ --space-16: 1rem; /* 16 */ --space-24: 1.5rem; /* 24 */ --space-32: 2rem; /* 32 */ --stat-gap: clamp(1.5rem, 0.98422rem + 2.20065vw, 3.625rem); /* 24 -> 58 */ --space-56: 3.5rem; /* 56 */ /* Full-bleed band insets (frame D) */ --band-pad-impact: clamp(2.5rem, 1.95388rem + 2.33010vw, 4.75rem); /* 40 -> 76 */ --band-pad-about: clamp(3rem, 2.05947rem + 4.01294vw, 6.875rem); /* 48 -> 110 */ /* ---------------------------------------------------------------------- RADII / BORDERS / SHADOW ---------------------------------------------------------------------- */ --radius-card: 16px; /* recommendation */ --radius-avatar: 12px; /* author avatar */ --border-hairline: 0.5px; --border-thin: 1px; --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.02), 0 12px 32px rgba(0, 0, 0, 0.04); --shadow-avatar: 1px 2px 4px rgba(0, 0, 0, 0.25); /* ---------------------------------------------------------------------- MOTION Nothing in the frame animates - phase 1 is static. These exist so the interactions phase has one dial to turn. ---------------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 150ms; --duration: 250ms; /* ====================================================================== CASE STUDY Source : frame 628:4576 "ALASKA AIRLINES BOARDING - PRODUCTION" https://www.figma.com/design/4a4AKXypAI56ESXq89ZJ1q/?node-id=628-4576 Reference width : 1920px (same as the home frame) Unlike the home frame, this one DOES publish Figma variables - get_variable_defs returns the six below. They are reproduced verbatim under their Figma names, and the semantic --cs-* aliases point at them. A case study is a LIGHT page hanging off a dark site. The shared surface/text tokens above are deliberately NOT redefined here: the header and the case-study nav keep using them, so only the page body and its own components consume the --cs-* set. ====================================================================== */ /* --- Figma variables, verbatim ---------------------------------------- */ --color-chartreuse-green-69-60: rgba(177, 215, 138, 0.6); /* #b1d78a99 */ --color-cyan-87: #C8EEF5; --color-cyan-53: #46A8C6; --color-grey-18: #2F2E2E; /* published twice, also as "Mine Shaft" */ --color-grey-15: #282626; /* --- Surfaces --------------------------------------------------------- */ --cs-bg: #FAFAFA; /* the frame's background */ --cs-band: rgba(0, 65, 106, 0.05); /* ROLE band */ --cs-band-deep: rgba(0, 65, 106, 0.92); /* IMPACT band */ /* --- Ink -------------------------------------------------------------- */ --cs-ink: var(--color-grey-18); /* body copy */ --cs-ink-strong: #000000; /* IPAD STAND copy - see the note in case-study.css */ --cs-ink-label: #242427; /* ROLE / TEAM / SHIPPED */ --cs-rule: var(--color-grey-15); /* 3px quote rule */ /* Section eyebrows and rail values are #8A857F - identical to the site's --color-text-muted, so that token is reused rather than duplicated. */ /* --- Alaska blue ------------------------------------------------------ */ --cs-brand: #00416A; --cs-brand-88: rgba(0, 65, 106, 0.88); /* hero lede */ --cs-brand-75: rgba(0, 65, 106, 0.75); /* hero kicker */ --cs-on-deep: #E2E2E2; /* stat subtitle on the IMPACT band */ --cs-on-deep-body:#ECECEC; /* IMPACT closing paragraph */ /* --- Hero gradient ---------------------------------------------------- */ --cs-gradient-hero: linear-gradient( 80.6376deg, var(--color-chartreuse-green-69-60) 23.08%, var(--color-cyan-87) 64.89%, var(--color-cyan-53) 100% ); /* --- Type ------------------------------------------------------------- */ /* Reused from the scale above, because the frames agree exactly: section eyebrows -> --fs-eyebrow (24) + --ls-eyebrow (-0.44px) body copy -> --fs-body (20) + --lh-body (1.5) nav -> --fs-nav (14) */ --fs-cs-display: clamp(1.875rem, 1.63228rem + 1.03560vw, 2.875rem); /* 30 -> 46 hero headline */ --fs-cs-kicker: clamp(0.6875rem, 0.65716rem + 0.12945vw, 0.8125rem); /* 11 -> 13 hero eyebrow */ --fs-cs-situation: clamp(1.375rem, 1.10194rem + 1.16505vw, 2.5rem); /* 22 -> 40 SITUATION body */ --fs-cs-stat: clamp(2.375rem, 1.81371rem + 2.39482vw, 4.6875rem); /* 38 -> 75 "195 Million" */ --fs-cs-stat-sub:clamp(1.1875rem, 0.99029rem + 0.84142vw, 2rem); /* 19 -> 32 stat subtitle */ --fs-cs-caption: clamp(0.9375rem, 0.89199rem + 0.19417vw, 1.125rem); /* 15 -> 18 hero caption */ --fs-cs-caption-sm: 0.875rem; /* 14 fixed figure captions */ --fs-cs-meta: 0.9375rem; /* 15 fixed rail values */ --fs-cs-meta-label: 0.75rem; /* 12 fixed rail labels */ --fs-cs-meta-label-lg: 0.875rem; /* 14 fixed "Role" only */ --lh-cs-display: 1.08; /* 49.68 / 46 */ --lh-cs-situation: 1.4; /* 56 / 40 */ --lh-cs-caption: 1.667; /* 30 / 18 */ --lh-cs-caption-sm:1.6; /* frame is 30/14 = 2.14; loosened so a wrapped caption on a phone doesn't gap absurdly */ --lh-cs-stat: normal; /* frame: 91 box on 75 type */ --lh-cs-stat-sub: normal; /* frame: 39 box on 32 type */ --lh-cs-impact-body: 1.5833;/* 38 / 24 */ --lh-cs-meta: 1.4; /* 21 / 15 */ /* Tracking is converted to em so it survives the fluid sizes above. */ --ls-cs-kicker: 0.14em; /* 1.82px @ 13 */ --ls-cs-display: -0.02em; /* -0.92px @ 46 */ --ls-cs-situation:-0.025em; /* -1px @ 40 */ --ls-cs-stat-sub: -0.03125em; /* -1px @ 32 */ --ls-cs-impact-body: -0.04167em;/* -1px @ 24 */ --ls-cs-meta: 0.01em; /* 0.15px @ 15 */ --ls-cs-meta-label-lg: -0.0314em; /* -0.44px @ 14 */ /* --- Space ------------------------------------------------------------ */ /* The frame's rhythm between bands is a flat 110 - the same value the home page uses - so --gap-band carries it and is not redeclared. */ /* SHARED BY EVERY CASE STUDY. Both frames draw their own vertical stack — Alaska 174 + 78, WayFinder 53 + 212 — but the two pages sit next to each other behind one nav, so a reader moving between them sees the hero copy jump. Mike's call is that they align: WayFinder's pair is the shared one, and Alaska follows it. Horizontal insets stay per-page (Alaska keeps its 80 gutter, WayFinder its 120), so only the vertical is unified. Alaska's own numbers were 40 -> 174 and 0 -> 78. */ --cs-hero-pad-top: clamp(1.5rem, 2.76042vw, 3.3125rem); /* 24 -> 53 */ --cs-hero-pad-bottom: clamp(1.5rem, 1.34830rem + 0.64725vw, 2.125rem); /* 24 -> 34 */ --cs-hero-copy-offset: clamp(0rem, 11.04167vw, 13.25rem); /* 0 -> 212 */ --cs-hero-collage-gap: clamp(2rem, 1.57524rem + 1.81230vw, 3.75rem); /* 32 -> 60 */ --cs-hero-caption-gap: clamp(0.625rem, 0.53398rem + 0.38835vw, 1rem); /* 10 -> 16 */ --cs-quote-gap: clamp(1.75rem, 1.27973rem + 2.00647vw, 3.6875rem); /* 28 -> 59 */ --cs-situation-gap: clamp(1.5rem, 1.25728rem + 1.03560vw, 2.5rem); /* 24 -> 40 */ --cs-row-gap: clamp(1.25rem, 0.82524rem + 1.81230vw, 3rem); /* 20 -> 48 */ /* The frame insets the band 38 top / 39 bottom. */ --cs-impact-pad: clamp(1.75rem, 1.59830rem + 0.64725vw, 2.375rem); /* 28 -> 38 */ --cs-impact-pad-b: clamp(1.8125rem, 1.66080rem + 0.64725vw, 2.4375rem); /* 29 -> 39 */ --cs-impact-gap: clamp(0.75rem, 0.67415rem + 0.32362vw, 1.0625rem); /* 12 -> 17 */ --fs-cs-impact-body: clamp(1.0625rem, 0.95631rem + 0.45307vw, 1.5rem); /* 17 -> 24 */ --cs-impact-measure: 89.8%; /* frame: a 1291 paragraph in a 1438 column */ /* Case-study nav bar (frame nodes 687:5076 / 687:5077). The frame revised this from a 70px translucent dark bar with an outlined pill to a 51px bar in the page colour with dark labels and no marker at all — so the selected state is an underline (Mike's call). */ --cs-subnav-h: 3.1875rem; /* 51 flat */ --cs-subnav-gap: clamp(1.5rem, 1.13594rem + 1.55340vw, 3rem); /* 24 -> 48 */ --cs-subnav-bg: var(--cs-bg); /* #FAFAFA, the page colour */ --cs-subnav-ink: #454545; --cs-subnav-underline: 1px; /* frame 715:8183 Line 1087 */ --cs-subnav-underline-ink: #1D1D1B; /* its stroke */ /* Frame 715:8183 ends the row at 1730 of 1920 — 110px inside the 1760 measure — which puts its first label at 847. */ --cs-subnav-inset-end: 6.25%; /* Quote block. The frame draws a 3px rule 10px inside the content edge, with the copy 9px clear of it. */ --cs-quote-rule: 3px; --cs-quote-inset: 9px; /* Minimum touch target (WCAG 2.5.5 / mobile guidance). */ --tap-target: 44px; /* ====================================================================== WAYFINDER NEWS (case study #2) Source : frame 628:4788 "WAYFINDER NEWS" https://www.figma.com/design/4a4AKXypAI56ESXq89ZJ1q/?node-id=628-4788 Reference width : 1920px (same as every other frame in the file) get_variable_defs on this frame returns the same single empty style ("Grad") the home frame does, so — as above — every value here was read off the frame's literal layer properties and named at this layer. Wayfinder is a LIGHT page like Alaska, but a yellow one rather than a blue one, so it keeps the shared --cs-* structure tokens (they agree exactly: 30->46 display, 22->40 situation copy, 24/38 impact body, the 12/14/15px rail) and redefines only what is genuinely different. ====================================================================== */ /* --- Surfaces --------------------------------------------------------- */ --wf-yellow: #F0C952; /* hero panel, bands */ --wf-yellow-92: rgba(240, 201, 82, 0.92); /* IMPACT band over the photo */ --wf-cream: #F6F4E9; /* KEY FEATURES band */ /* The frame fades the DIFFERENTIATION panel from the yellow into the cream that the feature band below it continues. */ --wf-gradient-band: linear-gradient( 179.5195deg, #F0C953 52.921%, #F6F4E9 98.599% ); /* The page itself is #FAFAFA — identical to --cs-bg, so that is reused rather than duplicated. */ /* --- Ink -------------------------------------------------------------- */ --wf-ink-display: #3C3C43; /* headline, OVERVIEW copy, IMPACT copy */ --wf-ink: #333333; /* hero lede, the "We believe" statement */ --wf-ink-title: #242427; /* APPROACH step titles, rail dt */ --wf-ink-body: #686765; /* APPROACH step copy — also its rule */ --wf-ink-rail: #5E5852; /* section eyebrows (Alaska's are #8A857F) */ --wf-ink-marker: #000000; /* Permanent Marker headings */ --wf-ink-wordmark:#1C1C1E; /* "WayFinder News" in the IMPACT band */ --wf-ink-impact: #1E1E1E; /* the IMPACT label - darker and heavier than the rail labels above it */ --wf-ink-icon-title: #1A1A1A;/* "Trust" — the other two are pure black */ /* Rail values are #8A857F, identical to --color-text-muted; reused. */ /* Body copy set at reduced opacity on the light bands. */ --wf-ink-feature: rgba(0, 0, 0, 0.55); /* feature rows 2-4 */ --wf-ink-feature-lead: rgba(0, 0, 0, 0.85); /* feature row 1 only */ --wf-ink-icon-body: rgba(0, 0, 0, 0.75); /* Perspective/Trust/Control */ /* --- Accent / rules --------------------------------------------------- */ --wf-link: #62ACE9; /* rail links */ --wf-rule-marker: #000000; /* 1px rule under a marker head */ --wf-rule-step: var(--wf-ink-body); /* 1px rule beside an APPROACH */ --wf-rule-icon: rgba(0, 0, 0, 0.15); /* 1px rule over an icon block */ /* --- Typefaces -------------------------------------------------------- */ /* Two faces beyond the site's Inter/Poppins pair. Permanent Marker sets every feature headline; Open Sans sets the copy beneath them. */ --font-marker: "Permanent Marker", "Bradley Hand", "Comic Sans MS", cursive; --font-feature: "Open Sans", var(--font-sans); /* --- Type ------------------------------------------------------------- */ /* Reused verbatim from the --cs-* scale, because the frames agree: hero kicker -> --fs-cs-kicker (13) + --ls-cs-kicker (0.14em) hero headline -> --fs-cs-display (46) + --ls-cs-display (-0.02em) + --lh-cs-display (1.08) OVERVIEW copy -> --fs-cs-situation (40) / --lh-cs-situation (1.4) IMPACT copy -> --fs-cs-impact-body (24) / --lh-cs-impact-body rail -> --fs-cs-meta*, --lh-cs-meta eyebrows -> --fs-eyebrow (24) + --ls-eyebrow (-0.44px) body -> --fs-body (20) + --lh-body (1.5) */ --fs-wf-marker: clamp(1.75rem, 1.26456rem + 2.07120vw, 3rem); /* 28 -> 48 */ --fs-wf-marker-sm: clamp(1.5rem, 1.31796rem + 0.77670vw, 2.25rem); /* 24 -> 36 */ --fs-wf-feature: clamp(1.125rem, 0.98544rem + 0.59547vw, 1.5rem); /* 18 -> 24 */ --fs-wf-wordmark: clamp(1.75rem, 1.55129rem + 0.84790vw, 2.375rem); /* 28 -> 38 */ --fs-wf-bullet: 0.875rem; /* 14 fixed */ --lh-wf-marker: 1.2; --lh-wf-marker-tight: 1.1; /* row 1 only — the frame draws 1.1 there */ --lh-wf-feature: 1.45; --lh-wf-step: 1.8; /* 36 / 20 — APPROACH step title */ --lh-wf-bullet: 1.4286; /* 20 / 14 */ --ls-wf-marker: -0.02em; /* -0.96px @ 48 */ --ls-wf-feature: -0.005em; /* -0.12px @ 24 */ --ls-wf-icon: -0.02em; /* -0.48px @ 24 */ --ls-wf-icon-body: -0.005em; /* -0.08px @ 16 */ /* --- Layout ----------------------------------------------------------- */ /* The frame's column is NOT the site's centred 1760 measure: the rail sits at 80..338 and every band then runs from ~400 to the right edge of the artboard with no right gutter at all. The bleed IS reproduced (see .wf-shell). The narrower rail is NOT: as on the Alaska page, Mike's call is to keep the home page's 320/40 pair so the three pages line up, which puts the content column at 440 rather than the frame's 399. The frame's own numbers are recorded below but not consumed, so the measurement survives if that is ever revisited. */ --wf-rail: clamp(9.5rem, 13.4375vw, 16.125rem); /* 152 -> 258 (unused) */ --wf-rail-gap: clamp(1.25rem, 3.17708vw, 3.8125rem); /* 20 -> 61 (unused) */ /* --- Space ------------------------------------------------------------ */ /* Between bands the frame is a flat 110 — the same rhythm the home page and the Alaska frame use — so --gap-band carries it and is not redrawn. Four joins in this frame are deliberately flush (0): photograph -> DIFFERENTIATION panel -> KEY FEATURES band -> ONBOARDING band. */ /* Only the horizontal inset is WayFinder's own now — the vertical stack it used to declare here is --cs-hero-pad-top / --cs-hero-copy-offset above, shared with the Alaska page. */ --wf-hero-pad-x: clamp(1.25rem, 6.25vw, 7.5rem); /* 20 -> 120 */ --wf-hero-gap: clamp(2rem, 3.22917vw, 3.875rem); /* 32 -> 62 */ --wf-belief-gap: clamp(1rem, 1.30208vw, 1.5625rem); /* 16 -> 25 */ --wf-band-pad-y: clamp(2rem, 4.94792vw, 5.9375rem); /* 32 -> 95 */ --wf-band-pad-x: clamp(1.25rem, 3.33333vw, 4rem); /* 20 -> 64 */ --wf-step-gap: clamp(1.5rem, 3.75vw, 4.5rem); /* 24 -> 72 */ --wf-icon-gap: clamp(1.5rem, 2.86458vw, 3.4375rem); /* 24 -> 55 */ --wf-feature-gap: clamp(3rem, 5.72917vw, 6.875rem); /* 48 -> 110 */ --wf-marker-gap: var(--space-24); /* 24 flat */ /* The two staggered screen rows drop every other card by ~181px at 1920. A percentage margin on a grid item resolves against the WIDTH of its grid area, not its height, so this is expressed as a share of the card's width (181 / 353) and the offset then tracks the card at any width. */ --wf-stagger: 51.28%; --wf-screen-radius: clamp(1.25rem, 2.39583vw, 2.875rem); /* 20 -> 46 */ --wf-feature-radius: clamp(0.5rem, 0.83333vw, 1rem); /* 8 -> 16 */ /* ====================================================================== LOWES — MYHOME APPLIANCES (case study #6) Source : frame 675:11899 "LOWES - MYHOME APPLIANCES" https://www.figma.com/design/4a4AKXypAI56ESXq89ZJ1q/?node-id=675-11899 Reference width : 1920px (1920 x 7334) PROVENANCE. get_variable_defs on this frame publishes only three greys — color/grey/15 (#282626), color/grey/18 (#2F2E2E) and a duplicate of the first under the name "kemery91.wixsite.com/Mine Shaft". Both are already declared above and are reused rather than redrawn. Everything else below was read off the frame's literal layer properties and named here. Appliances is a LIGHT page like Alaska and WayFinder, but a Lowe's-blue one. It keeps every shared --cs-* structure token that agrees with the frame — 30->46 display, 22->40 SITUATION copy, 24/38 IMPACT body, the 12/14/15 rail, the 3px quote rule — and redefines only what differs. ====================================================================== */ /* --- Surfaces --------------------------------------------------------- */ /* The page itself is #FAFAFA, identical to --cs-bg, so that is reused. */ --ap-band-insight: #023F84; /* KEY INSIGHTS, full bleed */ --ap-band-ai: #EFEEEF; /* AI SEARCH, full bleed */ --ap-band-impact: rgba(1, 33, 105, 0.92); /* IMPACT, over the photo */ /* --- Hero gradient ---------------------------------------------------- The frame draws this as a 755 x 1519 rectangle rotated 90deg, carrying linear-gradient(85.084deg, #00A0DC 23.08%, #02236A 100%). Rotating the box rotates its gradient with it, so in page space the angle is 85.084 + 90 = 175.084deg — very nearly top-to-bottom, leaning right. Verified by sampling the node's own render: flat #00A0DC down to ~20%, then a ramp reaching rgb(1,47,117) at the bottom edge. The 100% stop sits outside the box, which is why the panel never actually shows #02236A. Reproducing the angle rather than the endpoints keeps that true. NOTE: gradient-line length depends on the box's aspect ratio, so below 1920 the ramp lands slightly differently — unavoidable, and the same is true of the Alaska hero. ---------------------------------------------------------------------- */ --ap-gradient-hero: linear-gradient( 175.084deg, #00A0DC 23.08%, #02236A 100% ); /* --- Ink -------------------------------------------------------------- */ /* This frame's section eyebrows are #6C6C6C, NOT the #8A857F that Alaska and WayFinder use, so --color-text-muted is not reused for them. */ --ap-eyebrow: #6C6C6C; --ap-hero-kicker: rgba(255, 255, 255, 0.75); --ap-hero-lede: #84DDFF; --ap-ink-situation: #8A857F; /* = --color-text-muted; named for clarity */ --ap-ink-situation-strong: #615D58; /* the Semi Bold run in SITUATION */ --ap-ink-quote: #8A857F; /* APPLIANCES INFORMATION quote */ --ap-ink-quote-strong: #68645E; /* its Bold run */ --ap-ink-bullet: #8A857F; --ap-ink-bullet-strong: #3B3936;/* the one Semi Bold bullet */ --ap-ink-caption: #8A857F; /* "Desktop modal for AI appliance search"*/ /* The AI SEARCH and PRE-FILTERED quotes are --color-grey-18 (#2F2E2E), already declared above and reused directly. */ --ap-on-band: #ECECEC; /* = --cs-on-deep-body; KEY INSIGHTS body */ --ap-on-band-label: #EDEDEA; /* = --color-text; eyebrows on the bands */ /* --- Type ------------------------------------------------------------- */ /* The KEY INSIGHTS band is the one size this frame introduces: 31/40 at -1px, between the site's --fs-body (20) and --fs-cs-situation (40). */ --fs-ap-insight: clamp(1.25rem, 1.08313rem + 0.71197vw, 1.9375rem); /* 20 -> 31 */ --lh-ap-insight: 1.2903; /* 40 / 31 */ --ls-ap-insight: -0.03226em; /* -1px @ 31 */ --fs-ap-bullet: 0.875rem; /* 14 flat */ --lh-ap-bullet: 1.4286; /* 20 / 14 */ /* --- Hero layout ------------------------------------------------------ Panel 401..1920 x 141..896. Inside it, measured from the panel's own top-left: the device cluster starts at +75, the copy block at +265, and the laptop's bottom edge lands 6px clear of the panel's. ---------------------------------------------------------------------- */ --ap-hero-pad-top: clamp(1.5rem, 0.72633rem + 3.30097vw, 4.6875rem); /* 24 -> 75 */ --ap-hero-pad-bottom: 0.375rem; /* 6 flat */ --ap-hero-pad-x: clamp(1.25rem, 0.46117rem + 3.36570vw, 4.5rem); /* 20 -> 72 */ /* Drops the copy against the device cluster: 406 - 216 = 190. */ --ap-hero-copy-offset: clamp(0rem, 9.89583vw, 11.875rem); /* 0 -> 190 */ /* --- Space ------------------------------------------------------------ The frame's rhythm between bands is the familiar flat 110 — carried by --gap-band — at every join except two, which are drawn tighter and looser respectively and are named here. ---------------------------------------------------------------------- */ /* Band insets. The AI SEARCH band is the only one that matches the shared 110 (the frame draws 109 top / 110 bottom, so --gap-band carries it). The other two draw their own: KEY INSIGHTS is inset 80 all round and IMPACT 100 top and bottom. */ --ap-insight-pad: clamp(2rem, 1.27184rem + 3.10680vw, 5rem); /* 32 -> 80 */ --ap-impact-pad: clamp(2.5rem, 1.58981rem + 3.88350vw, 6.25rem); /* 40 -> 100 */ --ap-join-insight: clamp(2.5rem, 2.22694rem + 1.16505vw, 3.625rem); /* 40 -> 58 SITUATION -> KEY INSIGHTS */ --ap-join-closing: clamp(3.5rem, 2.21056rem + 5.50162vw, 8.8125rem); /* 56 -> 141 PRE-FILTERED -> closing */ --ap-situation-gap: clamp(1.5rem, 0.86286rem + 2.71845vw, 4.125rem); /* 24 -> 66 shot -> copy */ /* MEASURED, NOT CONSUMED. The KEY INSIGHTS and IMPACT bands pair a narrow label (200 and 122) with a wide gap (124 and 112), which lands their copy at x=404 and x=314. Held against the site's 320 rail those gaps would push both bands' copy PAST the 401 every other section starts at, so appliances.css inherits --layout-rail-gap for them instead. Kept here so the measurement survives if that is ever revisited. */ --ap-insight-gap: clamp(1.5rem, -0.01699rem + 6.47249vw, 7.75rem); /* 24 -> 124 (unused) */ --ap-stack-gap: clamp(1.25rem, 1.06796rem + 0.77670vw, 2rem); /* 20 -> 32 quote -> screenshot */ --ap-ai-band-gap: clamp(1.5rem, 1.12075rem + 1.61812vw, 3.0625rem); /* 24 -> 49 between the two AI rows */ --ap-ai-col-gap: clamp(1.5rem, 0.40777rem + 4.66019vw, 6rem); /* 24 -> 96 AI row 1 columns */ --ap-ai-row2-gap: clamp(1rem, 0.81796rem + 0.77670vw, 1.75rem); /* 16 -> 28 AI row 2 columns */ --ap-impact-gap: clamp(1.5rem, 0.16505rem + 5.69579vw, 7rem); /* 24 -> 112 (unused) */ /* --- Radii ------------------------------------------------------------ */ --ap-phone-radius: 20px; /* the phone screen's corner in the frame */ }