.webp)
Officevibe
A new approach to employee experience
No items found.
No items found.
No items found.
Visual identity
Officevibe — design reference
Source: https://workleap.com/officevibe. 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: Arial,sans-serif— selectorbodyfont-family: var(--_typography---paragraph-body--font)— selectorbodyfont-family: var(--_typography---h1--font)— selectorh1font-family: var(--_typography---h2--font)— selectorh2font-family: var(--_typography---h3--font)— selectorh3font-family: var(--_typography---h4--font)— selectorh4font-family: var(--_typography---h5--font)— selectorh5font-size: 14px— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonfont-size: 2em— selectorh1font-size: 38px— selectorh1font-size: 32px— selectorh2font-size: 24px— selectorh3font-size: 18px— selectorh4font-weight: 600— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonfont-weight: 700— selectorh1,h2,h3,h4,h5,h6font-weight: var(--_typography---paragraph-body--font-weight)— selectorbodyfont-weight: var(--_typography---h1--font-weight)— selectorh1font-weight: var(--_typography---h2--font-weight)— selectorh2font-weight: var(--_typography---h3--font-weight)— selectorh3font-weight: var(--_typography---h4--font-weight)— selectorh4line-height: 1.3— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonline-height: 20px— selectorbodyline-height: 44px— selectorh1line-height: 36px— selectorh2line-height: 30px— selectorh3line-height: 24px— selectorh4line-height: 18px— selectorh6letter-spacing: -.32px— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonletter-spacing: var(--_typography---paragraph-body--letter-spacing)— selectorbodyletter-spacing: var(--_typography---h1--letter-spacing)— selectorh1letter-spacing: var(--_typography---h2--letter-spacing)— selectorh2letter-spacing: var(--_typography---h3--letter-spacing)— selectorh3letter-spacing: var(--_typography---h4--letter-spacing)— selectorh4letter-spacing: var(--_typography---h5--letter-spacing)— selectorh5letter-spacing: var(--_typography---h6--letter-spacing)— selectorh6
Colors and surfaces
color: var(--content-colors--content-brand-default)— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttoncolor: #2545ff— selector.navbar_dropdown-link:hover .navbar_title-wrappercolor: var(--brand-color-palette--leapin-blue)— selector.navbar_dropdown-link:hover .navbar_link-label, .navbar-content_product-card:hover .navbar_link-label.cc-productcolor: white— selector.navbar-content_product-card:hover .buttoncolor: var(--content-colors--content-default-inverted)— selector#demo-buttonbackground-color: transparent— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonbackground-color: var(--brand-color-palette--leapin-blue)— selector.navbar-content_product-card:hover .buttonbackground-color: #0000— selectora
Components and layout
border-radius: 3rem— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonborder-radius: .5rem— selector.osano-cm-buttons**button:hover,.osano-cm-save.osano-cm-view**button.osano-cm-button:hoverborder-radius: 0— selector.webinar-hubspot-form-container input[type='email'], .webinar-hubspot-form-container input[type='text']border-radius: var(--border-radius--border-radius-sm)— selector.text-rich-text imgborder-radius: var(--_components---button--border-radius)— selector.buttonborder-radius: var(--border-radius--border-radius-full)— selector.button.is-subscribe:hoverborder-radius: 100px— selector.button.u-noshrink.is-search:hoverborder-radius: var(--border-radius--border-radius-xxs)— selector.navbar_dropdown-linkbox-shadow: 0 0 0 2px #dbf3ff,0 0 0 4px #adc9ff,0 4px 8px 4px #2545ff33— selector.navbar_link:focus-visible,.navbar_link[data-wf-focus-visible]box-shadow: 0 8px 8px #2545ff1a,0 12px 24px #253ab10d,0 32px 40px #253ab10d— selector.navbar_dropdown-contentbox-shadow: none— selector.navbar_dropdown-content.cc-resourcesbox-shadow: 0 32px 40px #253ab10d,0 8px 8px #2545ff1a,0 12px 24px #253ab10d— selector.navbar_dropdown-wrapperbox-shadow: 0 4px 8px #2545ff1a— selector.capabilities-card.cc-hoverablebox-shadow: 2px 2px 16px #2545ff1a,0 12px 24px #253ab10d— selector.capabilities-card.cc-hoverable:hoverbox-shadow: 0 8px 50px #0000000d— selector.nav-menu-threemax-width: 720px— selector.text-rich-text.versus-bodymax-width: 900px— selector.heading-style-h4.u-trusted_embed-wrappermax-width: var(--_layout---container--max-width)— selector.navbar_containermax-width: 32rem— selector.navbar_dropdown-content.cc-solutionspadding: .5rem 1rem— selector.osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-buttonpadding: .75rem .5rem— selector.navbar_link, .navbar_dropdown-togglepadding: 0— selectorbutton::-moz-focus-inner,input::-moz-focus-innerpadding: var(--_components---button--vertical-padding)var(--_components---button--horizontal-padding)— selector.buttongap: 8px— selector.osano-cm-dialogbuttonsgap: 32px— selector.webinar-hubspot-form-container formtransition: transform 0.3s ease-out— selector.button.is-cta .button_circle-wrapper #buttonArrowtransition: 0.3s ease-in-out— selector.capabilities-card .arrowtransition: 0.3s ease-out— selector.capabilities-card imgtransition: all 300ms ease— selector.navbar-content\_product-card imgtransition: transform .3s cubic-bezier(.215,.61,.355,1)— selector.swiper-rounded-arrow pathtransition: all .3s cubic-bezier(.215,.61,.355,1)— selectora
Responsive rules
screen and (max-width: 767px)
screen and (min-width: 992px)
screen and (max-width: 991px)
screen and (max-width: 479px)
only screen and (max-width: 767px)
screen and (min-width: 768px)
screen and (max-width: 1920px)
screen and (max-width: 1440px)
(min-width: 991px) and (max-width: 1280px)
screen and (min-width: 991px)
screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
(min-width:768px)
screen and (min-width:1280px)Source: https://workleap.com/officevibe. 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://workleap.com/officevibe — .autoplay-progress #progress
--progress: 0;https://cdn.prod.website-files.com/66eab063c614790046e87eef/css/workleap.6708e4fbef7b294fa981a717.ef177fa60.opt.min.css — :root
--background-color--bg-default: var(--base-color-greyscale--true-white);
--_typography---paragraph-body--font: var(--_typography---body-font);
--content-colors--content-default: var(--base-color-greyscale--grey-100);
--\_typography---paragraph-body--line-height: 1.4;
--\_typography---paragraph-body--font-weight: 400;
--\_typography---paragraph-body--letter-spacing: 0px;
--\_typography---h1--bottom-margin: 0px;
--_typography---h1--font: var(--_typography---display-font);
--\_typography---h1--line-height: 1;
--\_typography---h1--font-weight: 400;
--\_typography---h1--letter-spacing: -.05em;
--\_typography---h2--bottom-margin: 0px;
--_typography---h2--font: var(--_typography---display-font);
--\_typography---h2--line-height: 1.1;
--\_typography---h2--font-weight: 400;
--\_typography---h2--letter-spacing: -.02em;
--\_typography---h3--bottom-margin: 0px;
--_typography---h3--font: var(--_typography---display-font);
--\_typography---h3--line-height: 1.1;
--\_typography---h3--font-weight: 400;
--\_typography---h3--letter-spacing: -.02em;
--\_typography---h4--bottom-margin: 0px;
--_typography---h4--font: var(--_typography---display-font);
--\_typography---h4--line-height: 1.1;
--\_typography---h4--font-weight: 400;
--\_typography---h4--letter-spacing: -.02em;
--\_typography---h5--bottom-margin: 0px;
--_typography---h5--font: var(--_typography---display-font);
--\_typography---h5--line-height: 1.1;
--\_typography---h5--font-weight: 400;
--\_typography---h5--letter-spacing: -.02em;
--\_typography---h6--bottom-margin: 0px;
--_typography---h6--font: var(--_typography---display-font);
--\_typography---h6--line-height: 1.1;
--\_typography---h6--font-weight: 400;
--\_typography---h6--letter-spacing: -.02em;
--\_typography---paragraph-body--bottom-margin: 0px;
--\_size---0rem: 0rem;
--\_size---1-5rem: 1.5rem;
--\_size---1-25rem: 1.25rem;
--\_size---2-5rem: 2.5rem;
--\_size---4rem: 4rem;
--\_size---0-5rem: .5rem;
--\_size---8rem: 8rem;
--\_size---12rem: 12rem;
--\_size---6rem: 6rem;
--\_size---3rem: 3rem;
--\_size---5rem: 5rem;
--\_size---0-25rem: .25rem;
--\_size---0-125rem: .125rem;
--\_size---1rem: 1rem;
--\_size---2rem: 2rem;
--content-colors--content-extralight: var(--base-color-greyscale--grey-40);
--content-colors--content-brand-default: var(--base-color-brand--brand-100);
--base-color-soft--soft-20: #f9f8f6;
--\_typography---paragraph-xsm--font-size: .75rem;
--content-colors--content-medium: var(--base-color-greyscale--grey-80);
--content-colors--content-light: var(--base-color-greyscale--grey-60);
--border-radius--border-radius-xxs: .5rem;
--base-color-semantic-colors--success-20: #e1f5eb;
--base-color-semantic-colors--success-100: #4abd80;
--brand-color-palette--leapin-blue: var(--base-color-brand--brand-100);
--border-radius--border-radius-sm: 1rem;
--\_layout---container-sm--max-width: 50rem;
--\_typography---paragraph-body--font-size: 1rem;
--\_typography---paragraph-sm--margin-bottom: 0px;
--\_typography---paragraph-sm--font-size: .875rem;
--\_typography---paragraph-sm--line-height: 1.4;
--\_typography---paragraph-sm--font-weight: 400;
--\_typography---paragraph-sm--letter-spacing: 0px;
--background-color--bg-soft: var(--base-color-soft--soft-40);
--\_components---input--margin-bottom: 0px;
--\_size---0-75rem: .75rem;
--stroke-colors--stroke-medium: var(--base-color-greyscale--grey-40);
--\_components---input--border-radius: 100px;
--background-color--bg-soft-light: var(--base-color-soft--soft-20);
--\_components---input--font: Arial,"Helvetica Neue",Helvetica,sans-serif;
--\_components---input--font-size: .875rem;
--\_components---input--line-height: 1.4em;
--\_components---input--font-weight: 400;
--\_components---input--letter-spacing: 0px;
--stroke-colors--stroke-medium-dark: var(--base-color-greyscale--grey-80);
--stroke-colors--stroke-brand-default: var(--base-color-brand--brand-100);
--\_size---4-5rem: 4.5rem;
--border-radius--border-radius-xs: .75rem;
--content-colors--content-default-inverted: var(--base-color-greyscale--true-white);
--border-radius--border-radius-m: 1.5rem;
--\_apps---typography--heading-font: Abcfavoritvariable,Arial,sans-serif;
--content-colors--content-brand-dark: var(--base-color-semantic-colors--info-120);
--base-color-greyscale--grey-100: #171417;
--\_typography---paragraph-md--font-size: clamp(1rem,.9286rem + .3571vw,1.25rem);
--\_typography---paragraph-md--line-height: 1.4;
--\_typography---paragraph-md--letter-spacing: 0px;
--\_layout---container-lg--max-width: 95rem;
--base-color-accent--accent-40: #ffcbae;
--\_components---button--vertical-padding: .7em;
--\_components---button--horizontal-padding: 2em;
--\_components---button--border-radius: 100px;
--background-color--bg-brand-default: var(--base-color-brand--brand-100);
--_components---button--font: var(--_typography---body-font);
--\_components---button--font-size: 1rem;
--\_components---button--line-height: 1.1em;
--\_components---button--font-weight: 500;
--\_components---button--letter-spacing: 0px;
--brand-color-palette--white: var(--base-color-greyscale--true-white);
--brand-color-palette--9-to-5-black: #111814;
--base-color-greyscale--true-white: white;
--stroke-colors--stroke-inverted: var(--base-color-greyscale--true-white);
--border-radius--border-radius-full: 100rem;
--brand-color-palette--boardroom-navy: #0c1754;
--\_apps---colors--primary: #2545ff;
--background-color--bg-dark: var(--brand-color-palette--boardroom-navy);
--stroke-colors--stroke-dark: var(--brand-color-palette--boardroom-navy);
--\_typography---paragraph-md--bottom-margin: 0px;
--\_typography---paragraph-md--font-weight: 400;
--\_size---3-5rem: 3.5rem;
--\_typography---paragraph-xsm--margin-bottom: 0px;
--\_typography---paragraph-xsm--line-height: 1.4;
--\_typography---paragraph-xsm--font-weight: 400;
--\_typography---paragraph-xsm--letter-spacing: 0px;
--\_typography---h0--bottom-margin: 0px;
--_typography---h0--font: var(--_typography---display-font);
--\_typography---h0--line-height: 1;
--\_typography---h0--font-weight: 400;
--\_typography---h0--letter-spacing: -.05em;
--\_components---input-label--font-size: .875rem;
--\_components---input-label--line-height: 1.4em;
--\_components---input-label--font-weight: 400;
--\_components---input-label--letter-spacing: 0px;
--\_size---6-5rem: 6.5rem;
--base-color-semantic-colors--blue-05: #c8d0ff;
--\_typography---eyebrow--margin-bottom: 0px;
--base-color-greyscale--grey-80: #484747;
--\_typography---eyebrow--font-weight: 400;
--\_typography---eyebrow--letter-spacing: 0em;
--brand-color-palette--secondary-ivory: #fdf9f5;
--\_layout---container--max-width: 80rem;
--stroke-colors--stroke-light: var(--base-color-greyscale--grey-20);
--stroke-colors--stroke-default: var(--base-color-greyscale--grey-60);
--content-colors--content-info-inverted: var(--base-color-semantic-colors--info-60);
--base-color-brand--brand-100: #2545ff;
--base-color-soft--soft-40: #f0e9e1;
--base-color-brand--brand-20: #dbf3ff;
--base-color-greyscale--grey-40: #a2a2a2;
--base-color-semantic-colors--danger-100: #fa7249;
--content-colors--content-medium-inverted: var(--base-color-soft--soft-40);
--background-color--bg-light: var(--base-color-greyscale--grey-00);
--border-radius--border-radius-tiny: .25rem;
--base-color-semantic-colors--danger-120: #9d3107;
--\_layout---spacing--margin-sm: 1em;
--\_components---card--border-radius: 0px;
--base-color-semantic-colors--info-120: #00248f;
--brand-color-palette--workin-ivory: #f5ebdf;
--base-color-soft--soft-60: #f4e6cd;
--base-color-semantic-colors--success-60: #a6e3c2;
--base-color-semantic-colors--success-120: #166638;
--\_typography---display-font: Abcfavoritvariable,Arial,sans-serif;
--base-color-accent--onboarding-orange: #ff5822;
--base-color-accent--feedback-yellow: #ffc13a;
--base-color-greyscale--grey-20: #e6e6e4;
--brand-color-palette--lilac: #d9d4ff;
--base-color-greyscale--grey-60: #676665;
--\_apps---colors--background: #e5e4e4;
--\_apps---colors--accent-foreground-dark: #f8f8f8;
--\_apps---colors--card: #fff;
--_typography---paragraph-md--font: var(--_typography---body-font);
--\_typography---body-font: "Inter hosted",sans-serif;
--brand-color-palette--orange: var(--base-color-accent--onboarding-orange);
--\_typography---highlight-font: Martinaplantijn,Georgia,sans-serif;
--\_apps---colors--primary-dark: #4172ff;
--base-color-brand--light-orange: #f4e6cd;
--base-color-accent--accent-120: #e4660c;
--base-color-accent--accent-100: #ff993a;
--base-color-greyscale--grey-00: #f9f8f6;
--base-color-semantic-colors--warning-120: #8b4a04;
--base-color-semantic-colors--warning-100: #f28107;
--base-color-semantic-colors--warning-60: #ffd77a;
--base-color-semantic-colors--warning-20: #fff1cc;
--base-color-semantic-colors--danger-60: #ffb08f;
--base-color-semantic-colors--danger-20: #ffe7d7;
--base-color-semantic-colors--info-100: #6e8bff;
--base-color-semantic-colors--info-80: #8fa5ff;
--base-color-semantic-colors--info-60: #acdcff;
--base-color-semantic-colors--info-20: #dbf3ff;
--content-colors--content-brand-medium: var(--base-color-semantic-colors--info-80);
--content-colors--content-accent-default: var(--base-color-accent--accent-120);
--content-colors--content-light-inverted: var(--base-color-soft--soft-60);
--content-colors--content-higlight-blue: var(--base-color-semantic-colors--info-20);
--\_size---5-5rem: 5.5rem;
--\_size---7rem: 7rem;
--\_size---7-5rem: 7.5rem;
--\_size---8-5rem: 8.5rem;
--\_size---9rem: 9rem;
--\_size---9-5rem: 9.5rem;
--\_size---10rem: 10rem;
--\_size---11rem: 11rem;
--\_typography---content-font: "Abcfavoritmono Book";
--\_layout---spacing--margin-xs: .5em;
--\_layout---spacing--margin-md: 2em;
--\_layout---spacing--margin-lg: 3em;
--\_layout---spacing--margin-xl: 6em;
--\_components---input-label--font: Arial,"Helvetica Neue",Helvetica,sans-serif;
--stroke-colors--stroke-accent-default: var(--base-color-greyscale--true-white);
--stroke-colors--stroke-brand-light: var(--base-color-brand--brand-20);
--stroke-colors--stroke-info: var(--base-color-semantic-colors--info-100);
--stroke-colors--stroke-success: var(--base-color-semantic-colors--success-100);
--stroke-colors--stroke-warning: var(--base-color-semantic-colors--warning-100);
--stroke-colors--stroke-danger: var(--base-color-semantic-colors--danger-100);
--_typography---paragraph-sm--font: var(--_typography---body-font);
--_typography---paragraph-xsm--font: var(--_typography---body-font);
--_typography---eyebrow--font: var(--_apps---typography--body-font);
--\_typography---eyebrow--line-height: 1.4;
--\_apps---charts--chart-1: #2545fe;
--\_apps---charts--chart-2: #507af5;
--\_apps---charts--chart-3: #1d30ec;
--\_apps---charts--chart-4: #182dc6;
--\_apps---charts--chart-5: #1200aa;
--\_apps---charts--chart-1-dark: #4172ff;
--\_apps---charts--chart-2-dark: #82b2ff;
--\_apps---charts--chart-3-dark: #3561ff;
--\_apps---charts--chart-4-dark: #6b9eff;
--\_apps---charts--chart-5-dark: #2e56f8;
--\_apps---colors--foreground: #0d0d0d;
--\_apps---colors--card-foreground: #060606;
--\_apps---colors--popover: #d7d7d7;
--\_apps---colors--popover-foreground: #060606;
--\_apps---colors--primary-foreground: #f5f8ff;
--\_apps---colors--secondary: #c6daff;
--\_apps---colors--secondary-foreground: #0a0d13;
--\_apps---colors--muted: #dedede;
--\_apps---colors--muted-foreground: #666263;
--\_apps---colors--accent: #cacaca;
--\_apps---colors--accent-foreground: #0d0d0d;
--\_apps---colors--destructive: #ea1f2b;
--\_apps---colors--border: #d1d1d1;
--\_apps---colors--input: #d4d4d4;
--\_apps---colors--ring: #3258da;
--\_apps---colors--background-dark: #171417;
--\_apps---colors--foreground-dark: #f9f8f9;
--\_apps---colors--card-dark: #2c292c;
--\_apps---colors--card-foreground-dark: #f9f8f9;
--\_apps---colors--popover-dark: #2c292c;
--\_apps---colors--popover-foreground-dark: #f9f8f9;
--\_apps---colors--primary-foreground-dark: #090d16;
--\_apps---colors--secondary-dark: #16285e;
--\_apps---colors--secondary-foreground-dark: #f5f8ff;
--\_apps---colors--muted-dark: #0e0b0e;
--\_apps---colors--muted-foreground-dark: #a5a2a5;
--\_apps---colors--accent-dark: #414141;Source: https://workleap.com/officevibe. 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 | Arial,sans-serif | body |
| font-family | var(--_typography---paragraph-body--font) | body |
| font-family | var(--_typography---h1--font) | h1 |
| font-family | var(--_typography---h2--font) | h2 |
| font-family | var(--_typography---h3--font) | h3 |
| font-family | var(--_typography---h4--font) | h4 |
| font-family | var(--_typography---h5--font) | h5 |
| font-size | 14px | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| font-size | 2em | h1 |
| font-size | 38px | h1 |
| font-size | 32px | h2 |
| font-size | 24px | h3 |
| font-size | 18px | h4 |
| font-weight | 600 | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| font-weight | 700 | h1,h2,h3,h4,h5,h6 |
| font-weight | var(--_typography---paragraph-body--font-weight) | body |
| font-weight | var(--_typography---h1--font-weight) | h1 |
| font-weight | var(--_typography---h2--font-weight) | h2 |
| font-weight | var(--_typography---h3--font-weight) | h3 |
| font-weight | var(--_typography---h4--font-weight) | h4 |
| line-height | 1.3 | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| line-height | 20px | body |
| line-height | 44px | h1 |
| line-height | 36px | h2 |
| line-height | 30px | h3 |
| line-height | 24px | h4 |
| line-height | 18px | h6 |
| letter-spacing | -.32px | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| letter-spacing | var(--_typography---paragraph-body--letter-spacing) | body |
| letter-spacing | var(--_typography---h1--letter-spacing) | h1 |
| letter-spacing | var(--_typography---h2--letter-spacing) | h2 |
| letter-spacing | var(--_typography---h3--letter-spacing) | h3 |
| letter-spacing | var(--_typography---h4--letter-spacing) | h4 |
| letter-spacing | var(--_typography---h5--letter-spacing) | h5 |
| letter-spacing | var(--_typography---h6--letter-spacing) | h6 |
| color | var(--content-colors--content-brand-default) | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| color | #2545ff | .navbar_dropdown-link:hover .navbar_title-wrapper |
| color | var(--brand-color-palette--leapin-blue) | .navbar_dropdown-link:hover .navbar_link-label,
.navbar-content_product-card:hover .navbar_link-label.cc-product |
| color | white | .navbar-content_product-card:hover .button |
| color | var(--content-colors--content-default-inverted) | #demo-button |
| background-color | transparent | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| background-color | var(--brand-color-palette--leapin-blue) | .navbar-content_product-card:hover .button |
| background-color | #0000 | a |
| border-radius | 3rem | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| border-radius | .5rem | .osano-cm-buttons**button:hover,.osano-cm-save.osano-cm-view**button.osano-cm-button:hover |
| border-radius | 0 | .webinar-hubspot-form-container input[type='email'],
.webinar-hubspot-form-container input[type='text'] |
| border-radius | var(--border-radius--border-radius-sm) | .text-rich-text img |
| border-radius | var(--_components---button--border-radius) | .button |
| border-radius | var(--border-radius--border-radius-full) | .button.is-subscribe:hover |
| border-radius | 100px | .button.u-noshrink.is-search:hover |
| border-radius | var(--border-radius--border-radius-xxs) | .navbar_dropdown-link |
| box-shadow | 0 0 0 2px #dbf3ff,0 0 0 4px #adc9ff,0 4px 8px 4px #2545ff33 | .navbar_link:focus-visible,.navbar_link[data-wf-focus-visible] |
| box-shadow | 0 8px 8px #2545ff1a,0 12px 24px #253ab10d,0 32px 40px #253ab10d | .navbar_dropdown-content |
| box-shadow | none | .navbar_dropdown-content.cc-resources |
| box-shadow | 0 32px 40px #253ab10d,0 8px 8px #2545ff1a,0 12px 24px #253ab10d | .navbar_dropdown-wrapper |
| box-shadow | 0 4px 8px #2545ff1a | .capabilities-card.cc-hoverable |
| box-shadow | 2px 2px 16px #2545ff1a,0 12px 24px #253ab10d | .capabilities-card.cc-hoverable:hover |
| box-shadow | 0 8px 50px #0000000d | .nav-menu-three |
| max-width | 720px | .text-rich-text.versus-body |
| max-width | 900px | .heading-style-h4.u-trusted_embed-wrapper |
| max-width | var(--_layout---container--max-width) | .navbar_container |
| max-width | 32rem | .navbar_dropdown-content.cc-solutions |
| padding | .5rem 1rem | .osano-cm-buttons**button,.osano-cm-save.osano-cm-view**button.osano-cm-button |
| padding | .75rem .5rem | .navbar_link, .navbar_dropdown-toggle |
| padding | 0 | button::-moz-focus-inner,input::-moz-focus-inner |
| padding | var(--_components---button--vertical-padding)var(--_components---button--horizontal-padding) | .button |
| gap | 8px | .osano-cm-dialogbuttons |
| gap | 32px | .webinar-hubspot-form-container form |
| transition | transform 0.3s ease-out | .button.is-cta .button_circle-wrapper #buttonArrow |
| transition | 0.3s ease-in-out | .capabilities-card .arrow |
| transition | 0.3s ease-out | .capabilities-card img |
| transition | all 300ms ease | .navbar-content\_product-card img |
| transition | transform .3s cubic-bezier(.215,.61,.355,1) | .swiper-rounded-arrow path |
| transition | all .3s cubic-bezier(.215,.61,.355,1) | a |
Source: https://workleap.com/officevibe. 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.
- 273 custom-property declarations found; 1152 relevant property declarations parsed.