.webp)
Maze
Design that works
No items found.
Visual identity
Maze — design reference
Source: https://maze.co:443/. 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-phonic)!important— selector.lg:heading-3!font-size: clamp(2.75rem,6.25vw,5.625rem)— selector.heading-1font-size: clamp(3.25rem,9.6059vw - .5203rem,8.125rem)— selector.heading-xlfont-size: clamp(1.5rem,3.3639vw - .1525rem,2.875rem)— selector.heading-3font-size: clamp(2rem,1.4623rem + 2.403vw,3.625rem)— selector.heading-2font-weight: var(--font-weight-light)— selector.heading-1font-weight: var(--font-weight-light)!important— selector.lg:heading-3!line-height: 1.4118— selector[data-hbspt-theme=mosaic] .submitted-message,[data-hbspt-theme=mosaic] .submitted-message pline-height: 120%— selector.heading-3line-height: 115%— selector.heading-3line-height: 110%— selector.heading-2line-height: 130%— selector.heading-4line-height: var(--tw-leading,var(--text-sm--line-height))— selector.text-smletter-spacing: -.05em— selector.heading-1letter-spacing: -.07em— selector.heading-1letter-spacing: -.09em— selector.heading-xlletter-spacing: -.04em— selector.heading-3letter-spacing: -.06em— selector.heading-2
Colors and surfaces
color: var(--copy-color)— selector[data-hbspt-theme=mosaic] .submitted-message,[data-hbspt-theme=mosaic] .submitted-message pcolor: var(--heading-color)— selector.heading-1color: var(--chips-text)— selector.text-(--chips-text)color: var(--cta-copy)— selector.text-(--cta-copy)color: var(--cursor-text)— selector.text-(--cursor-text)background-color: #0000— selectorbutton,input,optgroup,select,textareabackground-color: var(--card-background)— selector.bg-(--card-background)background-color: var(--cta-text-image-backdrop)— selector.bg-(--cta-text-image-backdrop)background-color: var(--cta-text-image-bg)— selector.bg-(--cta-text-image-bg)background-color: var(--grid-card-bg)— selector.bg-(--grid-card-bg)
Components and layout
border-radius: 0— selectorbutton,input,optgroup,select,textareaborder-radius: 50%— selector.alice-carousel\__play-btn-wrapperbox-shadow: 0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15)— selector.tippy-tooltip.light-themebox-shadow: none— selector:-moz-ui-invalidbox-shadow: var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)— selector.shadow,.shadow-[0px_4px_20px_rgba(0,0,0,0.08)]max-width: var(--container-8xl)— selector.section-gridmax-width: 40rem!important— selector.!containermax-width: 48rem!important— selector.!containermax-width: 64rem!important— selector.!containermax-width: 80rem!important— selector.!containermax-width: 90rem!important— selector.!containermax-width: 40rem— selector.containermax-width: 48rem— selector.containerpadding: 0— selector::file-selector-buttonpadding: calc(var(--spacing)\*4)— selector.has-[[data-card-element="asset"]]:sm:p-4:has([data-card-element=asset])padding: 10px 5px— selector.alice-carousel**next-btn,.alice-carousel**prev-btnpadding: 5px— selector.alice-carousel**next-btn-item,.alice-carousel**prev-btn-itempadding: 10px— selector.alice-carousel**play-btn-wrappergap: calc(var(--spacing)\*10)— selector.has-[[data-card-element="asset"]]:sm:gap-10:has([data-card-element=asset])transition: all .4s linear— selector.alice-carousel**play-btn-item:after,.alice-carousel\_\_play-btn-item:before
Responsive rules
(min-width:640px)
(min-width:1024px)
(min-width:64rem)
(min-width:40rem)
(hover:hover)
not all and (min-width:40rem)
screen and (max-width:480px)
(min-width:48rem)
(min-width:80rem)
(min-width:90rem)
not all and (hover:hover)
not all and (min-width:64rem)
not all and (min-width:48rem)
(min-width:480px)
(hover:hover) and (pointer:fine)
(hover:hover)_and_(pointer:fine)]:pointer-events-none
(hover:hover)_and_(pointer:fine)]:opacity-0
(hover:hover)_and_(pointer:fine)]:group-focus-within:pointer-events-auto:is(:where(.group):focus-within \*)
(hover:hover)_and_(pointer:fine)]:group-focus-within:opacity-100:is(:where(.group):focus-within \*)
(hover:hover)_and_(pointer:fine)]:group-hover:pointer-events-auto:is(:where(.group):hover \*)
(hover:hover)_and_(pointer:fine)]:group-hover:opacity-100:is(:where(.group):hover \*)Source: https://maze.co:443/. 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://maze.co:443/ — :host,:root
--spacing: .25rem;
--breakpoint-2xl: 90rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-3xl: 48rem;
--text-xs: .75rem;
--text-sm: .875rem;
--text-sm--line-height: 1.42857;
--font-weight-light: 300;
--font-weight-normal: 400;
--radius-xs: .125rem;
--radius-sm: .25rem;
--radius-md: .375rem;
--radius-lg: .5rem;
--radius-xl: .75rem;
--radius-2xl: 1rem;
--ease-out: cubic-bezier(0,0,.2,1);
--ease-in-out: cubic-bezier(.4,0,.2,1);
--blur-xs: 4px;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-2xl: 40px;
--perspective-distant: 1200px;
--aspect-video: 16/9;
--default-transition-duration: .15s;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--font-phonic: "Phonic",sans-serif;
--nav-height: 48px;
--banner-height: 0px;
--container-8xl: 90rem;
--grid-col-value: clamp(0px,4.166vw,42px);
--color-neutral-000: oklch(100% 0 0);
--color-neutral-100: oklch(96.7% .005 95.1);
--color-neutral-200: oklch(92.7% .008 73.7);
--color-neutral-300: oklch(85.2% .012 84.6);
--color-neutral-400: oklch(69% .011 87.5);
--color-neutral-500: oklch(54.2% .005 91.5);
--color-neutral-600: oklch(35.6% 0 0);
--color-neutral-700: oklch(22.6% 0 0);
--color-neutral-900: oklch(0% 0 0);
--color-blue-100: oklch(97.7% .012 236.6);
--color-blue-200: oklch(91.6% .044 245.1);
--color-blue-300: oklch(81.8% .094 251.4);
--color-blue-400: oklch(70.2% .157 257.8);
--color-blue-500: oklch(53.6% .192 259.7);
--color-blue-600: oklch(43.9% .171 260.2);
--color-blue-700: oklch(29.6% .107 259.6);
--color-cyan-100: oklch(97.5% .014 174.2);
--color-cyan-200: oklch(94.8% .026 172.9);
--color-cyan-300: oklch(90% .071 173.6);
--color-cyan-400: oklch(83.1% .105 172.2);
--color-cyan-500: oklch(69.6% .115 169.9);
--color-cyan-600: oklch(53.05% .1 167.38);
--color-cyan-700: oklch(44% .091 165.3);
--color-lime-100: oklch(98.6% .047 115);
--color-lime-200: oklch(96.41% .1049 116.85);
--color-lime-300: oklch(92.5% .161 118.9);
--color-lime-400: oklch(85.3% .205 122);
--color-lime-500: oklch(71.19% .1668 121.63);
--color-lime-600: oklch(54.6% .127 121.6);
--color-lime-700: oklch(44.2% .101 121.2);
--color-purple-100: oklch(95.5% .025 305.9);
--color-purple-200: oklch(87.3% .072 304.9);
--color-purple-300: oklch(74.8% .146 302.8);
--color-purple-400: oklch(64.9% .218 298.5);
--color-purple-500: oklch(52.5% .27 292);
--color-purple-600: oklch(42% .235 290.7);
--color-purple-700: oklch(30.6% .169 289.2);
--color-red-100: oklch(94.5% .03 357.1);
--color-red-200: oklch(89.4% .061 358.9);
--color-red-300: oklch(73.7% .17 3.2);
--color-red-400: oklch(63.4% .248 14.8);
--color-red-500: oklch(54.7% .218 16.6);
--color-red-600: oklch(45.6% .18 15.5);
--color-red-700: oklch(36.2% .147 357.4);
--color-yellow-100: oklch(98.1% .027 93.1);
--color-yellow-200: oklch(94.5% .074 91.5);
--color-yellow-300: oklch(89.7% .129 91.1);
--color-yellow-400: oklch(84.8% .174 86.1);
--color-yellow-500: oklch(74.2% .158 73.3);
--color-yellow-600: oklch(62.2% .134 61.3);
--color-yellow-700: oklch(51.3% .122 58.6);
--color-success: var(--color-cyan-600);
--color-error: var(--color-red-500);
--color-white: var(--color-neutral-000);
--color-transparent: transparent;
--shadow-nav: 0px 4px 30px #0000000a;
--shadow-modal: 0 4px 20px #00000014;
--aspect-landscape: 640/440;
--aspect-portrait: 440/640;
--aspect-logo: 200/60;
--copy-color: var(--color-neutral-700);
--heading-color: var(--color-neutral-700);
--link-color: var(--color-neutral-700);
--list-bullet-color: var(--copy-color);
--list-icon-color: var(--copy-color);
--eyebrow-background: transparent;
--eyebrow-text: var(--color-neutral-700);
--eyebrow-border: var(--color-neutral-500);
--chips-background: var(--color-lime-300);
--chips-text: var(--color-neutral-700);
--animate-subnav-appear: subnav-appear .25s linear;
--animate-subnav-disappear: subnav-disappear .25s linear;
--animate-small-bounce: small-bounce 1.5s ease-in-out infinite;
--animate-fade-in-up: fade-in-up linear both;
--animate-roi-blur-focus: roi-blur-focus linear both;
--animate-magnify: magnify ease both;https://maze.co:443/ — :root
--nav-height: 80px;
--grid-col-value: clamp(0px,2.777vw,40px);https://maze.co:443/ — .[--fade-in-up-distance:10px]
--fade-in-up-distance: 10px;https://maze.co:443/ — .[--link-color:var(--statement-attribution-color)]
--link-color: var(--statement-attribution-color);https://maze.co:443/ — .[--per-row:3]
--per-row: 3;https://maze.co:443/ — .[--per-row:4]
--per-row: 4;https://maze.co:443/ — .md:[--magnify-drift:-20%]
--magnify-drift: -20%;https://maze.co:443/ — .md:[--magnify-to-scale:1.75]
--magnify-to-scale: 1.75;https://maze.co:443/ — .md:[--per-row:6]
--per-row: 6;https://maze.co:443/ — .lg:[--per-row:8]
--per-row: 8;Source: https://maze.co:443/. 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-phonic)!important | .lg:heading-3! |
| font-size | clamp(2.75rem,6.25vw,5.625rem) | .heading-1 |
| font-size | clamp(3.25rem,9.6059vw - .5203rem,8.125rem) | .heading-xl |
| font-size | clamp(1.5rem,3.3639vw - .1525rem,2.875rem) | .heading-3 |
| font-size | clamp(2rem,1.4623rem + 2.403vw,3.625rem) | .heading-2 |
| font-weight | var(--font-weight-light) | .heading-1 |
| font-weight | var(--font-weight-light)!important | .lg:heading-3! |
| line-height | 1.4118 | [data-hbspt-theme=mosaic] .submitted-message,[data-hbspt-theme=mosaic] .submitted-message p |
| line-height | 120% | .heading-3 |
| line-height | 115% | .heading-3 |
| line-height | 110% | .heading-2 |
| line-height | 130% | .heading-4 |
| line-height | var(--tw-leading,var(--text-sm--line-height)) | .text-sm |
| letter-spacing | -.05em | .heading-1 |
| letter-spacing | -.07em | .heading-1 |
| letter-spacing | -.09em | .heading-xl |
| letter-spacing | -.04em | .heading-3 |
| letter-spacing | -.06em | .heading-2 |
| color | var(--copy-color) | [data-hbspt-theme=mosaic] .submitted-message,[data-hbspt-theme=mosaic] .submitted-message p |
| color | var(--heading-color) | .heading-1 |
| color | var(--chips-text) | .text-(--chips-text) |
| color | var(--cta-copy) | .text-(--cta-copy) |
| color | var(--cursor-text) | .text-(--cursor-text) |
| background-color | #0000 | button,input,optgroup,select,textarea |
| background-color | var(--card-background) | .bg-(--card-background) |
| background-color | var(--cta-text-image-backdrop) | .bg-(--cta-text-image-backdrop) |
| background-color | var(--cta-text-image-bg) | .bg-(--cta-text-image-bg) |
| background-color | var(--grid-card-bg) | .bg-(--grid-card-bg) |
| border-radius | 0 | button,input,optgroup,select,textarea |
| border-radius | 50% | .alice-carousel\__play-btn-wrapper |
| box-shadow | 0 0 20px 4px rgba(154,161,177,.15),0 4px 80px -8px rgba(36,40,47,.25),0 4px 4px -2px rgba(91,94,105,.15) | .tippy-tooltip.light-theme |
| box-shadow | none | :-moz-ui-invalid |
| box-shadow | var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow) | .shadow,.shadow-[0px_4px_20px_rgba(0,0,0,0.08)] |
| max-width | var(--container-8xl) | .section-grid |
| max-width | 40rem!important | .!container |
| max-width | 48rem!important | .!container |
| max-width | 64rem!important | .!container |
| max-width | 80rem!important | .!container |
| max-width | 90rem!important | .!container |
| max-width | 40rem | .container |
| max-width | 48rem | .container |
| padding | 0 | ::file-selector-button |
| padding | calc(var(--spacing)\*4) | .has-[[data-card-element="asset"]]:sm:p-4:has([data-card-element=asset]) |
| padding | 10px 5px | .alice-carousel**next-btn,.alice-carousel**prev-btn |
| padding | 5px | .alice-carousel**next-btn-item,.alice-carousel**prev-btn-item |
| padding | 10px | .alice-carousel**play-btn-wrapper |
| gap | calc(var(--spacing)\*10) | .has-[[data-card-element="asset"]]:sm:gap-10:has([data-card-element=asset]) |
| transition | all .4s linear | .alice-carousel**play-btn-item:after,.alice-carousel\_\_play-btn-item:before |
Source: https://maze.co:443/. 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.
- 118 custom-property declarations found; 598 relevant property declarations parsed.