.webp)
Vercel
Build Fast and Reliable Sites
Visual identity
Vercel — design reference
Source: https://vercel.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Typography
font-family: var(--font-sans)— selector.fides-banner-buttonfont-family: var(--font-geist-sans)— selector.text-heading-16font-family: var(--font-geist-sans)!important— selector.text-heading-40!font-family: var(--font-mono)— selector.text-copy-14-monofont-family: var(--font-mono)!important— selector.text-label-12-mono!font-family: var(--font-geist-pixel-circle)!important— selector.[&_a]:font-pixel-circle! afont-size: 14px— selector.fides-banner-buttonfont-size: 24px— selector.fides-modal-titlefont-size: 0— selector.fides-toggle .fides-toggle-displayfont-size: 16px— selector.xQbA4q_productTitlefont-size: 100%— selector.xQbA4q_buttonResetfont-size: 76px— selector._0sku8a_titlefont-size: 36px— selector._0sku8a_titlefont-size: 20px— selector._0sku8a_subtitlefont-weight: 500!important— selector.fides-banner-buttonfont-weight: 600— selector.fides-modal-titlefont-weight: 500— selector.fides-notice-toggle-titlefont-weight: 800— selector._0sku8a_titlefont-weight: 400— selector._0sku8a_subtitlefont-weight: 600!important— selector.AMTIxG_headingfont-weight: 700— selector._0OUYIW_titleline-height: 150%— selector.fides-modal-containerline-height: 32px— selector.fides-modal-titleline-height: 24px— selector.xQbA4q_productTitleline-height: 76px— selector._0sku8a_titleline-height: 40px— selector._0sku8a_titleline-height: 36px— selector._0sku8a_subtitleline-height: 28px— selector._0sku8a_subtitleline-height: 110%!important— selector.AMTIxG_headingletter-spacing: -.96px— selector.fides-modal-titleletter-spacing: -.04em— selector._0sku8a_titleletter-spacing: -.01em— selector._0sku8a_subtitleletter-spacing: calc(var(--font-size) \* var(--kerning-percent))!important— selector.AMTIxG_headingletter-spacing: -.4px— selector._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title[data-size=small]letter-spacing: -.32px— selector._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title,._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title[data-size=small]letter-spacing: -.02em— selector._3Ry7Nq_impact._3Ry7Nq_mini:not(._3Ry7Nq_title-as-label) ._3Ry7Nq_title strong,._3Ry7Nq_impact._3Ry7Nq_mini:not(._3Ry7Nq_title-as-label) ._3Ry7Nq_title h2letter-spacing: -.015em— selector.W3bdWW_tileHeading
Colors and surfaces
color: var(--ds-gray-1000)!important— selector.fides-banner-button-primarycolor: var(--ds-background-100)!important— selector.fides-banner-button-secondary,.fides-banner-button-tertiarycolor: #fff— selector.fides-toggle .fides-toggle-displaycolor: var(--accents-5)— selector._0sku8a_subtitlecolor: var(--button-custom-fg)!important— selector.gbx7Ca_button[data-custom-button]:not([disabled])color: var(--button-custom-fg-hover)!important— selector.gbx7Ca_button\[data-custom-button]\[data-focus]color: var(--button-custom-fg-active,var(--button-custom-fg-hover))!important— selector.gbx7Ca_button\[data-custom-button]\[data-active]color: var(--ds-gray-1000)— selector:is(.vF3MAa_pre .language-json .token.property,.vF3MAa_pre .language-markdown .token.title,.vF3MAa_pre .language-markdown-source .token.title)background-color: var(--ds-gray-100)— selector.fides-toggle .fides-toggle-displaybackground-color: var(--ds-blue-700,#0070f3)— selector.fides-toggle .fides-toggle-input:checked+.fides-toggle-displaybackground-color: var(--ds-gray-200)— selector.-RqBSG_cell:hover .-RqBSG_exploreCardVisualbackground-color: #171717— selector.dark-theme .-RqBSG_exploreCardVisualbackground-color: var(--ds-gray-300)— selector.-RqBSG_exploreCardVisualbackground-color: var(--ds-background-100)— selector.zm99lG_dateLocationCardContentbackground-color: var(--ds-gray-1000)— selector.l7Zt3q_videoControls progressbackground-color: var(--geist-foreground)— selector.l7Zt3q_videoControls progress[value]::-webkit-progress-value
Components and layout
border-radius: 128px— selector.fides-banner-buttonborder-radius: 6px— selector.fides-modal-button-group .fides-banner-buttonborder-radius: 50%— selector.fides-toggle .fides-toggle-display:beforeborder-radius: var(--corner-small,6px)— selector.HnT9Mq_cardborder-radius: var(--geist-radius)— selector.l7Zt3q_container.l7Zt3q_borderRadiusborder-radius: 5px— selector.l7Zt3q_videoControls progressborder-radius: 15px 0 0 15px— selector.-W_jTq_buttonborder-radius: 12px— selector.DOFHJW_root abox-shadow: var(--ds-focus-ring)— selector.fides-banner-button[data-focus-visible-added]box-shadow: 0 1px 1px #00000029,0 0 4px #0000001f— selector.fides-toggle .fides-toggle-display:beforebox-shadow: 0 0 0 1px var(--geist-background), 0 0 0 3px var(--button-custom-bg-hover,var(--button-custom-bg,var(--geist-foreground)))!important— selector.gbx7Ca_button\[data-custom-button]\[data-focus]box-shadow: 0 1px 2px #0000000a— selector.zm99lG_dateLocationCardbox-shadow: var(--ds-shadow-border-small)— selector.-W_jTq_buttonbox-shadow: var(--ds-shadow-small)— selector.Vpxv7a_root [data-offset-card]box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)— selector.has-[button:focus-visible]:ring-2:has(:is(button:focus-visible))box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important— selector.data-[nav-open]:!shadow-none[data-nav-open]max-width: 420px— selectordiv#fides-banner-containermax-width: 800px— selector._0sku8a_titlemax-width: 720px!important— selector.-RqBSG_exploreCardsTitle,.-RqBSG_exploreCardsmax-width: 336px— selector.-RqBSG_exploreCardmax-width: 100%— selector.oBsGXq_container>canvasmax-width: 40em— selector.aaV5MG_section pmax-width: 900px— selector._0OUYIW_subtitlemax-width: 80%— selector.ePYXRW_content ppadding: 0 12px— selector.fides-banner-buttonpadding: 0 24px— selector.fides-modal-title,.fides-modal-description,.fides-modal-noticespadding: 0— selector.xQbA4q_buttonResetpadding: 1.5rem 0— selector._0sku8a_titlepadding: 6.5rem 0— selector.fbx8NG_footerSectionpadding: var(--cell-padding)— selector._RKRWa_sectionpadding: 16px— selector.zm99lG_dateLocationCardHeadingpadding: 24px— selector.HnT9Mq_card .HnT9Mq_textContentgap: 12px— selector#fides-button-group>divgap: 24px— selector.-RqBSG_exploreCardsContainergap: 46px— selector.-RqBSG_exploreCardsgap: 16px— selector.-RqBSG_exploreCardgap: calc(var(--cell-padding) / 2)— selector._RKRWa_sectiongap: 6px— selector.zm99lG_dateLocationCardHeadinggap: 10px— selector._4ciayq_note ._4ciayq_titlegap: 8px— selector.aGa9CG_buttonstransition: background .15s,border .15s— selector.fides-banner-buttontransition: opacity .2s— selector.fides-modal-containertransition: background .1s— selector.fides-notice-toggle-titletransition: transform .7s cubic-bezier(.5,.25,.35,1)— selectordiv#fides-banner-containertransition: all .2s— selector.fides-toggle .fides-toggle-displaytransition: opacity .2s ease-out— selector.xQbA4q_productTitletransition: color .2s— selector.-RqBSG\_cell p
Responsive rules
(prefers-reduced-motion:reduce)
(max-width:370px)
(max-width:500px)
(max-width:960px)
(max-width:600px)
screen and (max-width:960px)
screen and (max-width:800px)
screen and (max-width:600px)
screen and (max-width:440px)
screen and (max-width:380px)
(hover:hover)
(min-width:961px)
screen and (max-width:400px)
screen and (min-width:401px) and (max-width:600px)
screen and (min-width:601px) and (max-width:768px)
screen and (min-width:769px) and (max-width:960px)
screen and (min-width:961px)
(max-width:400px)
screen and (min-width:601px) and (max-width:960px)
screen and (min-width:961px) and (max-width:1200px)
screen and (min-width:1201px)
(prefers-reduced-motion:no-preference)
(min-width:960px)
(min-width:961px) and (max-width:1200px)
screen and (max-width:480px)Source: https://vercel.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Original CSS custom-property declarations, grouped by source and selector. Up to 250 declarations; selectors preserved; media-query conditions are not attached to individual declarations.
https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/3u82rwmj_1n8p.css — body
--caveats-toggle-false: #fff;
--caveats-toggle-true: var(--ds-blue-700);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/3u82rwmj_1n8p.css — .fides-modal-notices
--notices-border: 1px solid var(--ds-gray-400);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/3u82rwmj_1n8p.css — .fides-toggle
--diameter: 24px;
--width: 40px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .w4TYZW_heroImage
--hero-width: 780px;
--hero-height: 640px;
--hero-square-size: 340px;
--tablet-width: calc(var(--hero-width) \* .75);
--tablet-height: calc(var(--hero-height) \* .75);
--tablet-square-size: calc(var(--hero-square-size) \* .75);
--mobile-width: calc(var(--hero-width) \* .5);
--mobile-height: calc(var(--hero-height) \* .5);
--mobile-square-size: calc(var(--hero-square-size) \* .5);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .w4TYZW_buttonsPrivate
--direction: column!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .w4TYZW_buttonsNonPrivate
--direction: column!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .gbx7Ca_button[data-custom-button]:not([disabled])
--themed-border: var(--button-custom-border)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .gbx7Ca_button\[data-custom-button]\[data-focus]
--themed-border: var(--button-custom-border-hover)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .gbx7Ca_button\[data-custom-button]\[data-hover]
--themed-border: var(--button-custom-border-hover)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .gbx7Ca_button\[data-custom-button]\[data-active]
--themed-border: var(--button-custom-border-active,var(--button-custom-border-hover))!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .vF3MAa_pre
--padding: 16px;
--shiki-color-text: var(--ds-gray-1000);
--shiki-color-background: transparent;
--shiki-token-constant: var(--ds-blue-900);
--shiki-token-string: var(--ds-green-900);
--shiki-token-comment: var(--ds-gray-900);
--shiki-token-keyword: var(--ds-pink-900);
--shiki-token-parameter: var(--ds-amber-900);
--shiki-token-function: var(--ds-purple-900);
--shiki-token-string-expression: var(--ds-green-900);
--shiki-token-punctuation: var(--ds-gray-1000);
--shiki-token-link: var(--ds-green-900);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .RRCuXa_errorRow
--guide-color: var(--ds-red-400);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .VEU71W_variable
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .fW1cEW_variable
--font-geist-sans: "GeistSans", "GeistSans Fallback";https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_gridSystem
--light-dashed-png: url(data:image/png;
--dark-dashed-png: url(data:image/png;
--max-width: 1080px;
--min-width: 368px;
--guide-width: 1px;
--horizontal-margin: 2rem;
--grid-system-width: 100vw;
--guide-color: var(--ds-gray-400);
--cross-color: var(--ds-gray-600);
--horizontal-margin: 1rem;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .dark-theme .AMTIxG_gridSystem
--guide-color: var(--ds-gray-200);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_systemDebug
--debug-color-rgb: 255, 204, 109;
--debug-guide-color: rgba(var(--debug-color-rgb), .7);
--debug-block-color: rgba(var(--debug-color-rgb), .1);
--debug-hidden-guide-color: rgba(var(--debug-color-rgb), .1);
--guide-color: var(--debug-guide-color)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_unstable_gridSystemWrapper .AMTIxG_gridSystem
--horizontal-margin: 0px;
--grid-system-width: calc(100cqw);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_grid
--width: clamp(calc(var(--min-width) - var(--guide-width)), calc(var(--grid-system-width) - var(--guide-width) - (var(--horizontal-margin) \* 2)), calc(var(--max-width) - var(--guide-width)));
--column-width: calc(var(--width) / var(--grid-columns));
--row-height: calc(var(--height) / var(--grid-rows));
--height: var(--xs-height,var(--sm-height));
--grid-rows: var(--xs-grid-rows,var(--sm-grid-rows));
--grid-columns: var(--xs-grid-columns,var(--sm-grid-columns));
--cell-padding: 24px;
--grid-divider-gap: calc(72px - var(--cell-padding));
--height: var(--sm-height);
--grid-rows: var(--sm-grid-rows);
--grid-columns: var(--sm-grid-columns);
--height: var(--smd-height,var(--md-height,var(--sm-height)));
--grid-rows: var(--smd-grid-rows,var(--md-grid-rows,var(--sm-grid-rows)));
--grid-columns: var(--smd-grid-columns,var(--md-grid-columns,var(--sm-grid-columns)));
--cell-padding: 40px;
--grid-divider-gap: calc(120px - var(--cell-padding));
--height: var(--md-height,var(--smd-height,var(--sm-height)));
--grid-rows: var(--md-grid-rows,var(--smd-grid-rows,var(--sm-grid-rows)));
--grid-columns: var(--md-grid-columns,var(--smd-grid-columns,var(--sm-grid-columns)));
--grid-divider-gap: calc(140px - var(--cell-padding));
--height: var(--lg-height,var(--md-height,var(--smd-height,var(--sm-height))));
--grid-rows: var(--lg-grid-rows,var(--md-grid-rows,var(--smd-grid-rows,var(--sm-grid-rows))));
--grid-columns: var(--lg-grid-columns,var(--md-grid-columns,var(--smd-grid-columns,var(--sm-grid-columns))));
--cell-padding: 48px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_cross
--cross-size: 21px;
--cross-half-size: calc((var(--cross-size) / 2) + var(--guide-width) - .5px);
--cross-size: 11px;
--cross-row: var(--xs-cross-row,var(--sm-cross-row));
--cross-column: var(--xs-cross-column,var(--sm-cross-column));
--cross-row: var(--sm-cross-row);
--cross-column: var(--sm-cross-column);
--cross-size: 15px;
--cross-row: var(--smd-cross-row,var(--md-cross-row,var(--sm-cross-row)));
--cross-column: var(--smd-cross-column,var(--md-cross-column,var(--sm-cross-column)));
--cross-row: var(--md-cross-row,var(--smd-cross-row,var(--sm-cross-row)));
--cross-column: var(--md-cross-column,var(--smd-cross-column,var(--sm-cross-column)));
--cross-row: var(--lg-cross-row,var(--md-cross-row,var(--smd-cross-row,var(--sm-cross-row))));
--cross-column: var(--lg-cross-column,var(--md-cross-column,var(--smd-cross-column,var(--sm-cross-column))));https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_block
--grid-row: var(--xs-grid-row,var(--sm-grid-row));
--grid-column: var(--xs-grid-column,var(--sm-grid-column));
--block-display: var(--xs-block-display,var(--sm-block-display));
--cell-rows: var(--xs-cell-rows,var(--sm-cell-rows));
--cell-columns: var(--xs-cell-columns,var(--sm-cell-columns));
--grid-row: var(--sm-grid-row);
--grid-column: var(--sm-grid-column);
--cell-rows: var(--sm-cell-rows);
--cell-columns: var(--sm-cell-columns);
--block-display: var(--sm-block-display);
--grid-row: var(--smd-grid-row,var(--md-grid-row,var(--sm-grid-row)));
--grid-column: var(--smd-grid-column,var(--md-grid-column,var(--sm-grid-column)));
--cell-rows: var(--smd-cell-rows,var(--md-cell-rows,var(--sm-cell-rows)));
--cell-columns: var(--smd-cell-columns,var(--md-cell-columns,var(--sm-cell-columns)));
--block-display: var(--smd-block-display);
--grid-row: var(--md-grid-row,var(--smd-grid-row,var(--sm-grid-row)));
--grid-column: var(--md-grid-column,var(--smd-grid-column,var(--sm-grid-column)));
--cell-rows: var(--md-cell-rows,var(--smd-cell-rows,var(--sm-cell-rows)));
--cell-columns: var(--md-cell-columns,var(--smd-cell-columns,var(--sm-cell-columns)));
--block-display: var(--md-block-display,var(--smd-block-display));
--grid-row: var(--lg-grid-row,var(--md-grid-row,var(--smd-grid-row,var(--sm-grid-row))));
--grid-column: var(--lg-grid-column,var(--md-grid-column,var(--smd-grid-column,var(--sm-grid-column))));
--cell-rows: var(--lg-cell-rows,var(--md-cell-rows,var(--smd-cell-rows,var(--sm-cell-rows))));
--cell-columns: var(--lg-cell-columns,var(--md-cell-columns,var(--smd-cell-columns,var(--sm-cell-columns))));https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_heading
--container-width: calc(var(--row-height) _ var(--cell-columns) - (var(--cell-padding) _ 2));
--container-height: calc(var(--row-height) _ var(--cell-rows) - (var(--cell-padding) _ 2));
--scale-factor: calc(var(--cell-rows) \* var(--scaled-size-adjustment));
--computed-font-size: calc((var(--container-width) / var(--normalized-character-count)) \* var(--scale-factor));
--font-size: clamp(24px, var(--computed-font-size), 72px);
--kerning-percent: -.06;
--font-size: clamp(24px, var(--computed-font-size), 64px);
--kerning-percent: -.02;
--font-size: clamp(16px, var(--computed-font-size), 48px);
--font-size: clamp(12px, var(--computed-font-size), 32px);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_useContainer
--height: var(--xs-height,var(--sm-height));
--grid-rows: var(--xs-grid-rows,var(--sm-grid-rows));
--grid-columns: var(--xs-grid-columns,var(--sm-grid-columns));
--cell-padding: 24px;
--grid-divider-gap: calc(72px - var(--cell-padding));
--height: var(--sm-height);
--grid-rows: var(--sm-grid-rows);
--grid-columns: var(--sm-grid-columns);
--height: var(--smd-height,var(--md-height,var(--sm-height)));
--grid-rows: var(--smd-grid-rows,var(--md-grid-rows,var(--sm-grid-rows)));
--grid-columns: var(--smd-grid-columns,var(--md-grid-columns,var(--sm-grid-columns)));
--cell-padding: 40px;
--grid-divider-gap: calc(120px - var(--cell-padding));
--height: var(--md-height,var(--smd-height,var(--sm-height)));
--grid-rows: var(--md-grid-rows,var(--smd-grid-rows,var(--sm-grid-rows)));
--grid-columns: var(--md-grid-columns,var(--smd-grid-columns,var(--sm-grid-columns)));
--grid-divider-gap: calc(140px - var(--cell-padding));
--height: var(--lg-height,var(--md-height,var(--smd-height,var(--sm-height))));
--grid-rows: var(--lg-grid-rows,var(--md-grid-rows,var(--smd-grid-rows,var(--sm-grid-rows))));
--grid-columns: var(--lg-grid-columns,var(--md-grid-columns,var(--smd-grid-columns,var(--sm-grid-columns))));
--cell-padding: 48px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .AMTIxG_useContainer .AMTIxG\_block
--grid-row: var(--xs-grid-row,var(--sm-grid-row));
--grid-column: var(--xs-grid-column,var(--sm-grid-column));
--block-display: var(--xs-block-display,var(--sm-block-display));
--cell-rows: var(--xs-cell-rows,var(--sm-cell-rows));
--cell-columns: var(--xs-cell-columns,var(--sm-cell-columns));
--grid-row: var(--sm-grid-row);
--grid-column: var(--sm-grid-column);
--cell-rows: var(--sm-cell-rows);
--cell-columns: var(--sm-cell-columns);
--block-display: var(--sm-block-display);
--grid-row: var(--smd-grid-row,var(--md-grid-row,var(--sm-grid-row)));
--grid-column: var(--smd-grid-column,var(--md-grid-column,var(--sm-grid-column)));
--cell-rows: var(--smd-cell-rows,var(--md-cell-rows,var(--sm-cell-rows)));
--cell-columns: var(--smd-cell-columns,var(--md-cell-columns,var(--sm-cell-columns)));
--block-display: var(--smd-block-display);
--grid-row: var(--md-grid-row,var(--smd-grid-row,var(--sm-grid-row)));
--grid-column: var(--md-grid-column,var(--smd-grid-column,var(--sm-grid-column)));
--cell-rows: var(--md-cell-rows,var(--smd-cell-rows,var(--sm-cell-rows)));
--cell-columns: var(--md-cell-columns,var(--smd-cell-columns,var(--sm-cell-columns)));
--block-display: var(--md-block-display,var(--smd-block-display));
--grid-row: var(--lg-grid-row,var(--md-grid-row,var(--smd-grid-row,var(--sm-grid-row))));
--grid-column: var(--lg-grid-column,var(--md-grid-column,var(--smd-grid-column,var(--sm-grid-column))));
--cell-rows: var(--lg-cell-rows,var(--md-cell-rows,var(--smd-cell-rows,var(--sm-cell-rows))));
--cell-columns: var(--lg-cell-columns,var(--md-cell-columns,var(--smd-cell-columns,var(--sm-cell-columns))));https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .BwJUkq_stack
--stack-direction: var(--sm-stack-direction);
--stack-align: var(--sm-stack-align);
--stack-justify: var(--sm-stack-justify);
--stack-padding: var(--sm-stack-padding);
--stack-gap: var(--sm-stack-gap);
--stack-direction: var(--md-stack-direction,var(--sm-stack-direction));
--stack-align: var(--md-stack-align,var(--sm-stack-align));
--stack-justify: var(--md-stack-justify,var(--sm-stack-justify));
--stack-padding: var(--md-stack-padding,var(--sm-stack-padding));
--stack-gap: var(--md-stack-gap,var(--sm-stack-gap));
--stack-direction: var(--lg-stack-direction,var(--md-stack-direction,var(--sm-stack-direction)));
--stack-align: var(--lg-stack-align,var(--md-stack-align,var(--sm-stack-align)));
--stack-justify: var(--lg-stack-justify,var(--md-stack-justify,var(--sm-stack-justify)));
--stack-padding: var(--lg-stack-padding,var(--md-stack-padding,var(--sm-stack-padding)));
--stack-gap: var(--lg-stack-gap,var(--md-stack-gap,var(--sm-stack-gap)));
--stack-direction: var(--xl-stack-direction,var(--lg-stack-direction,var(--md-stack-direction,var(--sm-stack-direction))));
--stack-align: var(--xl-stack-align,var(--lg-stack-align,var(--md-stack-align,var(--sm-stack-align))));
--stack-justify: var(--xl-stack-justify,var(--lg-stack-justify,var(--md-stack-justify,var(--sm-stack-justify))));
--stack-padding: var(--xl-stack-padding,var(--lg-stack-padding,var(--md-stack-padding,var(--sm-stack-padding))));
--stack-gap: var(--xl-stack-gap,var(--lg-stack-gap,var(--md-stack-gap,var(--sm-stack-gap))));https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — ._2ZhahW_phone
--background: var(--ds-background-100);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .dark-theme ._2ZhahW_phone
--background: var(--ds-background-200);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .a0N6tq_root
--salesforce-commerce-cloud-color: #099dda;
--ds-focus-ring: 0 0 0 2px var(--ds-background-100), 0 0 0 4px var(--form-focus-color);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .R0LLkW_form
--page-padding: 32px;
--top-offset: calc(var(--header-height) + var(--cell-padding));https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .R0LLkW_form.R0LLkW\_themedForm
--page-padding: 0px;
--top-offset: calc(var(--header-height) + var(--cell-padding) + 32px);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .R0LLkW_themedForm .R0LLkW_submitButton:disabled
--themed-border: var(--ds-gray-400)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .R0LLkW_themedButton [data-geist-spinner]
--spinner-color: white!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .R0LLkW\_fields
--form-gap: 32px;
--form-gap: 24px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .l7Zt3q_posterPlay
--lightningcss-light: initial;
--lightningcss-dark: ;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .aGa9CG_overlayContainer
--shadow-width-left: 40px;
--shadow-width-right: 40px;
--scroller-0: #fffffff2;
--scroller-1: #ffffffb3;
--scroller-2: #ffffff73;
--scroller-3: #fff3;
--scroller-4: #fff0;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .aGa9CG_overlay
--scroller-gradient: #fff 0, #ffffffb3 8px, #ffffff73 14px, #ffffff4d 19px, #ffffff42 21px, #ffffff30 25px, #ffffff1f 29px, #ffffff0f 32px, #ffffff08 34px, #ffffff05 36px, #ffffff02 38px, #ffffff01 39px, #fff0 40px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — :is(.dark-theme .aGa9CG_overlay,.design-dark-theme .aGa9CG_overlay)
--scroller-gradient: #000 0, #000000b3 8px, #00000073 14px, #0000004d 19px, #00000042 21px, #00000030 25px, #0000001f 29px, #0000000f 32px, #00000008 34px, #00000005 36px, #00000002 38px, #00000001 39px, #0000 40px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .Xst2va\_bookRotateWrapper
--book-height: 240px;
--book-width: 196px;
--book-depth: 56px;
--book-color: var(--ds-gray-200);
--text-color: var(--ds-gray-1000);
--book-border-radius: 5.4px 1.8px 1.8px 5.4px;
--hover-rotate: -20deg;
--hover-scale: 1.066;
--hover-translate-x: -.5em;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .ib_Bhq_book .ib_Bhq_book-rotate-wrapper
--book-height: 190px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .pFnISG_carouselWrapper
--fade-out-px: 128px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .pFnISG\_carousel
--copies: 3;
--gap: 28px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .DOFHJW_prefix
--size: 40px;
--size: 32px;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .xHiAkW_visual-cell .xHiAkW_top-cross
--pos: calc(var(--cross-half-size) \* -1);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .knmcua\_v
--start-offset: 2;
--end-offset: 1;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .knmcua_zeroBottom
--start-offset: 2;
--end-offset: 1;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .knmcua_zeroTop
--start-offset: 0;
--end-offset: 1;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .knmcua_zeroSlash
--start-offset: 2;
--end-offset: 1;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .aaV5MG_section.aaV5MG_dark-theme
--guide-color: var(--ds-gray-300);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .dEn04G\_grid
--section-bg: var(--ds-background-100);
--guide-color: var(--ds-gray-300)!important;https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .dark-theme .dEn04G_grid
--section-bg: var(--ds-gray-100);https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css — .xmYGmq_bookRotateWrapper
--book-height: 240px;
--book-width: 196px;
--book-depth: 56px;
--text-color: var(--ds-gray-1000);
--book-border-radius: 6px 2px 6px 2px;
--hover-rotate: -20deg;
--hover-scale: 1.066;
--hover-translate-x: -8px;
--book-height: 190px;Source: https://vercel.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.
| Property | Declared value | Selector |
|---|---|---|
| font-family | var(--font-sans) | .fides-banner-button |
| font-family | var(--font-geist-sans) | .text-heading-16 |
| font-family | var(--font-geist-sans)!important | .text-heading-40! |
| font-family | var(--font-mono) | .text-copy-14-mono |
| font-family | var(--font-mono)!important | .text-label-12-mono! |
| font-family | var(--font-geist-pixel-circle)!important | .[&_a]:font-pixel-circle! a |
| font-size | 14px | .fides-banner-button |
| font-size | 24px | .fides-modal-title |
| font-size | 0 | .fides-toggle .fides-toggle-display |
| font-size | 16px | .xQbA4q_productTitle |
| font-size | 100% | .xQbA4q_buttonReset |
| font-size | 76px | ._0sku8a_title |
| font-size | 36px | ._0sku8a_title |
| font-size | 20px | ._0sku8a_subtitle |
| font-weight | 500!important | .fides-banner-button |
| font-weight | 600 | .fides-modal-title |
| font-weight | 500 | .fides-notice-toggle-title |
| font-weight | 800 | ._0sku8a_title |
| font-weight | 400 | ._0sku8a_subtitle |
| font-weight | 600!important | .AMTIxG_heading |
| font-weight | 700 | ._0OUYIW_title |
| line-height | 150% | .fides-modal-container |
| line-height | 32px | .fides-modal-title |
| line-height | 24px | .xQbA4q_productTitle |
| line-height | 76px | ._0sku8a_title |
| line-height | 40px | ._0sku8a_title |
| line-height | 36px | ._0sku8a_subtitle |
| line-height | 28px | ._0sku8a_subtitle |
| line-height | 110%!important | .AMTIxG_heading |
| letter-spacing | -.96px | .fides-modal-title |
| letter-spacing | -.04em | ._0sku8a_title |
| letter-spacing | -.01em | ._0sku8a_subtitle |
| letter-spacing | calc(var(--font-size) \* var(--kerning-percent))!important | .AMTIxG_heading |
| letter-spacing | -.4px | ._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title[data-size=small] |
| letter-spacing | -.32px | ._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title,._3Ry7Nq_impact:not(._3Ry7Nq_mini) ._3Ry7Nq_title[data-size=small] |
| letter-spacing | -.02em | ._3Ry7Nq_impact._3Ry7Nq_mini:not(._3Ry7Nq_title-as-label) ._3Ry7Nq_title strong,._3Ry7Nq_impact._3Ry7Nq_mini:not(._3Ry7Nq_title-as-label) ._3Ry7Nq_title h2 |
| letter-spacing | -.015em | .W3bdWW_tileHeading |
| color | var(--ds-gray-1000)!important | .fides-banner-button-primary |
| color | var(--ds-background-100)!important | .fides-banner-button-secondary,.fides-banner-button-tertiary |
| color | #fff | .fides-toggle .fides-toggle-display |
| color | var(--accents-5) | ._0sku8a_subtitle |
| color | var(--button-custom-fg)!important | .gbx7Ca_button[data-custom-button]:not([disabled]) |
| color | var(--button-custom-fg-hover)!important | .gbx7Ca_button\[data-custom-button]\[data-focus] |
| color | var(--button-custom-fg-active,var(--button-custom-fg-hover))!important | .gbx7Ca_button\[data-custom-button]\[data-active] |
| color | var(--ds-gray-1000) | :is(.vF3MAa_pre .language-json .token.property,.vF3MAa_pre .language-markdown .token.title,.vF3MAa_pre .language-markdown-source .token.title) |
| background-color | var(--ds-gray-100) | .fides-toggle .fides-toggle-display |
| background-color | var(--ds-blue-700,#0070f3) | .fides-toggle .fides-toggle-input:checked+.fides-toggle-display |
| background-color | var(--ds-gray-200) | .-RqBSG_cell:hover .-RqBSG_exploreCardVisual |
| background-color | #171717 | .dark-theme .-RqBSG_exploreCardVisual |
| background-color | var(--ds-gray-300) | .-RqBSG_exploreCardVisual |
| background-color | var(--ds-background-100) | .zm99lG_dateLocationCardContent |
| background-color | var(--ds-gray-1000) | .l7Zt3q_videoControls progress |
| background-color | var(--geist-foreground) | .l7Zt3q_videoControls progress[value]::-webkit-progress-value |
| border-radius | 128px | .fides-banner-button |
| border-radius | 6px | .fides-modal-button-group .fides-banner-button |
| border-radius | 50% | .fides-toggle .fides-toggle-display:before |
| border-radius | var(--corner-small,6px) | .HnT9Mq_card |
| border-radius | var(--geist-radius) | .l7Zt3q_container.l7Zt3q_borderRadius |
| border-radius | 5px | .l7Zt3q_videoControls progress |
| border-radius | 15px 0 0 15px | .-W_jTq_button |
| border-radius | 12px | .DOFHJW_root a |
| box-shadow | var(--ds-focus-ring) | .fides-banner-button[data-focus-visible-added] |
| box-shadow | 0 1px 1px #00000029,0 0 4px #0000001f | .fides-toggle .fides-toggle-display:before |
| box-shadow | 0 0 0 1px var(--geist-background), 0 0 0 3px var(--button-custom-bg-hover,var(--button-custom-bg,var(--geist-foreground)))!important | .gbx7Ca_button\[data-custom-button]\[data-focus] |
| box-shadow | 0 1px 2px #0000000a | .zm99lG_dateLocationCard |
| box-shadow | var(--ds-shadow-border-small) | .-W_jTq_button |
| box-shadow | var(--ds-shadow-small) | .Vpxv7a_root [data-offset-card] |
| box-shadow | var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) | .has-[button:focus-visible]:ring-2:has(:is(button:focus-visible)) |
| box-shadow | var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important | .data-[nav-open]:!shadow-none[data-nav-open] |
| max-width | 420px | div#fides-banner-container |
| max-width | 800px | ._0sku8a_title |
| max-width | 720px!important | .-RqBSG_exploreCardsTitle,.-RqBSG_exploreCards |
| max-width | 336px | .-RqBSG_exploreCard |
| max-width | 100% | .oBsGXq_container>canvas |
| max-width | 40em | .aaV5MG_section p |
| max-width | 900px | ._0OUYIW_subtitle |
| max-width | 80% | .ePYXRW_content p |
| padding | 0 12px | .fides-banner-button |
| padding | 0 24px | .fides-modal-title,.fides-modal-description,.fides-modal-notices |
| padding | 0 | .xQbA4q_buttonReset |
| padding | 1.5rem 0 | ._0sku8a_title |
| padding | 6.5rem 0 | .fbx8NG_footerSection |
| padding | var(--cell-padding) | ._RKRWa_section |
| padding | 16px | .zm99lG_dateLocationCardHeading |
| padding | 24px | .HnT9Mq_card .HnT9Mq_textContent |
| gap | 12px | #fides-button-group>div |
| gap | 24px | .-RqBSG_exploreCardsContainer |
| gap | 46px | .-RqBSG_exploreCards |
| gap | 16px | .-RqBSG_exploreCard |
| gap | calc(var(--cell-padding) / 2) | ._RKRWa_section |
| gap | 6px | .zm99lG_dateLocationCardHeading |
| gap | 10px | ._4ciayq_note ._4ciayq_title |
| gap | 8px | .aGa9CG_buttons |
| transition | background .15s,border .15s | .fides-banner-button |
| transition | opacity .2s | .fides-modal-container |
| transition | background .1s | .fides-notice-toggle-title |
| transition | transform .7s cubic-bezier(.5,.25,.35,1) | div#fides-banner-container |
| transition | all .2s | .fides-toggle .fides-toggle-display |
| transition | opacity .2s ease-out | .xQbA4q_productTitle |
| transition | color .2s | .-RqBSG\_cell p |
Source: https://vercel.com/. Extracted 2026-10-14. Scope: public marketing website CSS; declared styles, not computed browser values. This is an observed inventory, not an official internal design system.
Evidence and limitations
- Values come directly from downloaded stylesheets. Selector context is retained to distinguish elements; individual media-query conditions are not retained.
- CSS cascade, active viewport, runtime styles, interactive states and private product UI were not verified. Colors or dimensions in utility classes may be unused on this page.
- No inferred dark theme, semantic color roles or framework defaults have been added.
- 1772 custom-property declarations found; 4154 relevant property declarations parsed.
Stylesheet sources
- https://vercel.com/
- https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2njlv31x-vb66.css
- https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/3u82rwmj_1n8p.css
- https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/2y9c8z4abk3c0.css
- https://vercel.com/vc-ap-vercel-marketing/_next/static/immutable/chunks/3e8307_66w5qd.css