Figma / Public website reference / The foundations.

The foundations.

Exact values, ownership of spacing, layers, and responsive modes.

Measured source tokens

Space first. Color with a purpose.

The current website uses a 12-column grid, a 16px gutter, and a restrained black-and-white control system. Colored sections carry product identity. The values below are extracted from the delivered page, not estimated from screenshots.

#000000

Foreground / primary action

#FFFFFF

Default canvas

#D9D9D9

Border approximation; use source color-mix

#972121

Form error background

#E4E0FF

Guide lavender; original addition

#FFF5AD

Guide yellow; original addition

#FF3737

Brand red

#FF7237

Brand orange

#874FFF

Brand purple

#00B6FF

Brand blue

#24CB71

Brand green

Spacing scale

4px--fig-space-4

6px--fig-space-6

8px--fig-space-8

12px--fig-space-12

16px--fig-space-16

24px--fig-space-24

32px--fig-space-32

40px--fig-space-40

56px--fig-space-56

64px--fig-space-64

80px--fig-space-80

120px--fig-space-120

Token catalog

Observed light marketing mode. Inverse sections swap foreground and background. No visitor theme switch was observed. Forced-color support in this guide is a reconstructed accessibility addition.

Find a token

--f-col-widthcalc(min(100vw, 1440px) / 48)

--f-columns48

--f-guttercalc(calc(min(100vw, 1440px) / 48) * 2)

--f-lego-block-padding7.5rem

--f-max-content-width1440px

--fig-elevation-10 0.25rem 2rem 0 color-mix(in oklch, #000000, transparent 90%)

--fig-elevation-1-shadow0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%)

--fig-elevation-20 1.5rem 4.375rem 0 color-mix(in oklch, #000000, transparent 90%)

--fig-elevation-2-shadow0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%)

--fig-grid-col-widthcalc((min(100vw - (2.5rem * 2) - 0rem, 95rem) - (1rem * (12 - 1))) / 12)

--fig-grid-columns12

--fig-grid-gutter1rem

--fig-grid-margin2.5rem

--fig-grid-max-content-width95rem

--fig-radius-120.75rem

--fig-radius-161rem

--fig-radius-20.125rem

--fig-radius-241.5rem

--fig-radius-281.75rem

--fig-radius-40.25rem

--fig-radius-80.5rem

--fig-radius-full9999px

--fig-section-block-padding5rem

--fig-space-120.75rem

--fig-space-1207.5rem

--fig-space-161rem

--fig-space-241.5rem

--fig-space-322rem

--fig-space-40.25rem

--fig-space-402.5rem

--fig-space-563.5rem

--fig-space-60.375rem

--fig-space-644rem

--fig-space-80.5rem

--fig-space-805rem

--fig-space-none0

--fig-theme-badge-bgcolor-mix(in oklch, #000000, transparent 92%)

--fig-theme-badge-fg#000000

--fig-theme-bg#FFFFFF

--fig-theme-bordercolor-mix(in oklch, #000000, transparent 84%)

--fig-theme-border-hovercolor-mix(in oklch, #000000, transparent 60%)

--fig-theme-btn-ghost-bgcolor-mix(in oklch, #000000, transparent 100%)

--fig-theme-btn-ghost-bg-hovercolor-mix(in oklch, #000000, transparent 96%)

--fig-theme-btn-primary-bg#000000

--fig-theme-btn-primary-bg-hovercolor-mix(in oklch, #000000, transparent 15%)

--fig-theme-btn-primary-fg#FFFFFF

--fig-theme-btn-secondary-bgcolor-mix(in oklch, #000000, transparent 100%)

--fig-theme-btn-secondary-fg#000000

--fig-theme-btn-transparent-bgcolor-mix(in oklch, #000000, transparent 96%)

--fig-theme-btn-transparent-bg-hovercolor-mix(in oklch, #000000, transparent 92%)

--fig-theme-btn-transparent-fg#000000

--fig-theme-card-bgcolor-mix(in oklch, #000000, transparent 96%)

--fig-theme-fg#000000

--fig-theme-fg-mutedcolor-mix(in oklch, #000000, transparent 46%)

--fig-theme-form-error-bg#972121

--fig-theme-form-error-fg#FFFFFF

--fig-theme-form-input-bgcolor-mix(in oklch, #000000, transparent 92%)

--fig-theme-form-placeholdercolor-mix(in oklch, #000000, transparent 46%)

--fig-typography-lh-loose1.45

--fig-typography-lh-none1

--fig-typography-lh-normal1.3

--fig-typography-lh-relaxed1.4

--fig-typography-lh-snug1.2

--fig-typography-lh-tight1.1

--fig-typography-ls-none0rem

--fig-typography-ls-slight0rem

--fig-typography-ls-standard-0.04125rem

--fig-typography-ls-tight-0.078125rem

--fig-typography-ls-wide0.03125rem

--fig-typography-size-badge0.875rem

--fig-typography-size-body1rem

--fig-typography-size-bodyL1rem

--fig-typography-size-bodyXL1.5rem

--fig-typography-size-button1rem

--fig-typography-size-buttonS0.875rem

--fig-typography-size-caption0.875rem

--fig-typography-size-display15.5rem

--fig-typography-size-display24rem

--fig-typography-size-formInput1rem

--fig-typography-size-formLabel0.75rem

--fig-typography-size-title13.5rem

--fig-typography-size-title22.75rem

--fig-typography-size-title31.875rem

--fig-typography-size-title41.5rem

--fig-typography-variation-mono100

--fig-typography-variation-slnt-italic-6

--fig-typography-variation-wdth-condensed96

--fig-typography-variation-wdth-narrow98

--fig-typography-variation-wdth-normal100

--fig-typography-variation-wght-bold600

--fig-typography-variation-wght-bolder700

--fig-typography-variation-wght-regular400

--fig-typography-weightnormal

--font-figma-mono"figmaMono","figmaMono Fallback",SF Mono,menlo,monospace

--font-figma-sans"figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif

--global-cursor-defaultdefault

--global-cursor-grabgrab

--global-cursor-grabbinggrabbing

--global-cursor-pointerpointer

--global-cursor-texttext

--global-font-mono"figmaMono","figmaMono Fallback",SF Mono,menlo,monospace

--global-font-sans"figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif

--global-scrollbar-width0rem

--global-statsig-overlay#FFFFFF

Composition rules

Use parent grid gap for distances between sibling components. Keep control padding inside the component. Preserve measured exceptions, including the 22px horizontal button padding and fractional 46.390625px header-action height. Do not round those into an 8px scale.

:root {
  --fig-grid-gutter: 1rem;
  --fig-grid-margin: 2.5rem;
  --fig-grid-max-content-width: 95rem;
  --fig-space-24: 1.5rem;
  --fig-radius-8: .5rem;
}

Download token evidence