Spencer Gabor

Design Specification — Spencer Gabor

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a muted accent (#FFFFFF). All type is set in Futura Now Headline. Detected font weights: 400, 500.

Logo asset(s): https://spencergabor.work/icon/favicon-96x96.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Typography

Primary typeface: Futura Now Headline — stack: Futura Now Headline

Font stacks (most used first)

• Futura Now Headline
• Inter
• var(--font-family-headline)

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05)

Animation & Motion

Transitions

• .8s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),.8s box-shadow linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)
• .5s translate linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),.8s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),.8s visibility
• .5s translate linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),.2s scale cubic-bezier(.215,.61,.355,1),.2s visibility
• .15s color cubic-bezier(.445,.05,.55,.95),1s transform linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726,1.3643 14.48%,1.3151 16.2%,1.0317 21.81%,.941 24.01%,.8912 25.91%,.8694 27.84%,.8698 29.21%,.8824 30.71%,1.0122 38.33%,1.0357,1.046 42.71%,1.0416 45.7%,.9961 53.26%,.9839 57.54%,.9853 60.71%,1.0012 68.14%,1.0056 72.24%,.9981 86.66%,1)
• 1s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)
• .8s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),.8s translate linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)
• 1.2s opacity cubic-bezier(.39,.575,.565,1)
• 1.4s translate linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1),1.4s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)
• .8s scale linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)
• .8s opacity linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1)

Easing curves

• cubic-bezier(.25,.25,.75,.75)
• cubic-bezier(.47,0,.745,.715)
• cubic-bezier(.39,.575,.565,1)
• cubic-bezier(.445,.05,.55,.95)
• cubic-bezier(.55,.085,.68,.53)
• cubic-bezier(.25,.46,.45,.94)
• cubic-bezier(.455,.03,.515,.955)
• cubic-bezier(.55,.055,.675,.19)

CTA labels found on page

• Nike
• ShakeShack
• Jaffa
• Caulfield Cup
• Frugo
• Whop

Source Design Tokens (CSS custom properties)

:root {
  --ease-linear: cubic-bezier(.25,.25,.75,.75);
  --ease-in-sine: cubic-bezier(.47,0,.745,.715);
  --ease-out-sine: cubic-bezier(.39,.575,.565,1);
  --ease-in-out-sine: cubic-bezier(.445,.05,.55,.95);
  --ease-in-quad: cubic-bezier(.55,.085,.68,.53);
  --ease-out-quad: cubic-bezier(.25,.46,.45,.94);
  --ease-in-out-quad: cubic-bezier(.455,.03,.515,.955);
  --ease-in-cubic: cubic-bezier(.55,.055,.675,.19);
  --ease-out-cubic: cubic-bezier(.215,.61,.355,1);
  --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
  --ease-in-quart: cubic-bezier(.895,.03,.685,.22);
  --ease-out-quart: cubic-bezier(.165,.84,.44,1);
  --ease-in-out-quart: cubic-bezier(.77,0,.175,1);
  --ease-in-quint: cubic-bezier(.755,.05,.855,.06);
  --ease-out-quint: cubic-bezier(.23,1,.32,1);
  --ease-in-out-quint: cubic-bezier(.86,0,.07,1);
  --ease-in-expo: cubic-bezier(.95,.05,.795,.035);
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --ease-in-out-expo: cubic-bezier(1,0,0,1);
  --ease-in-circ: cubic-bezier(.6,.04,.98,.335);
  --ease-out-circ: cubic-bezier(.075,.82,.165,1);
  --ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
  --ease-in-back: cubic-bezier(.6,-.28,.735,.045);
  --ease-out-back: cubic-bezier(.175,.885,.32,1.275);
  --ease-in-out-back: cubic-bezier(.68,-.55,.265,1.55);
  --ease-out-elastic: linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1);
  --ease-out-elastic-100-30: linear(0,.2178 2.1%,1.1144 8.49%,1.2959 10.7%,1.3463 11.81%,1.3705 12.94%,1.3726,1.3643 14.48%,1.3151 16.2%,1.0317 21.81%,.941 24.01%,.8912 25.91%,.8694 27.84%,.8698 29.21%,.8824 30.71%,1.0122 38.33%,1.0357,1.046 42.71%,1.0416 45.7%,.9961 53.26%,.9839 57.54%,.9853 60.71%,1.0012 68.14%,1.0056 72.24%,.9981 86.66%,1);
  --toggle-size: 3;
  --gap: 1.5;
  --radius: calc(var(--toggle-size)*.5 + var(--gap));
  --spacing: .75;
  --translateY: calc(cos(var(--idx) * var(--spacing) + 1.25)*var(--radius)*1rem);
  --translateX: calc(sin(var(--idx) * var(--spacing) + 1.25)*var(--radius)*-1rem);
  --scaleY: var(--1c6caef9);
  --offsetY: var(--ba0f1688);
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --font-family-headline: "Futura Now Headline",sans-serif;
  --font-family-body: "Inter",sans-serif;
  --padding: 1rem;
  --max-width: 860px;
  --shadow: 0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05);
  --color-white: #fff;
  --color-black: #2c2c2c;
  --color-grey: #cbcbcb;
  --color-primary: var(--color-white);
  --color-onPrimary: var(--color-black);
  --color-secondary: var(--color-grey);
  --color-onSecondary: var(--color-black);
  --font-h1: 4.125rem/.82 var(--font-family-headline);
  --font-h2: 2.5rem/.82 var(--font-family-headline);
  --font-h4: .875rem/1 var(--font-family-headline);
  --font-h6: 500 .5625rem/1 var(--font-family-body);
  --font-body: 500 1rem/1.3 var(--font-family-body);
  --offset: var(--76298768);
  --pointerXOffset: 0;
  --pointerOffset: calc(var(--pointerXOffset)*50);
  --slide-width: var(--311a8615);
}

Do's and Don'ts

Do

• Do reserve the accent #FFFFFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFFFFF;
  --color-secondary: #CBCBCB;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-text-secondary: #CBCBCB;
  --color-on-primary: #000000;
  --color-on-secondary: #000000;
  --font-sans: Futura Now Headline;
  --font-size-headline-lg: 32px;
  --font-size-headline-md: 28.8px;
  --font-size-title-lg: 22.4px;
  --font-size-body-md: 16px;
  --font-size-label-md: 13.3px;
  --font-size-label-sm: 10.7px;
  --radius-lg: 16px;
  --radius-pill: 50%;
  --shadow-md: 0px 9px 21px rgba(0,0,0,.1),0px 38px 38px rgba(0,0,0,.09),0px 85px 51px rgba(0,0,0,.05);
  --space-xs: 3.2px;
  --space-sm: 9.6px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.02em;
  --tracking-label: .1em;
  --container-max: 860px;
}