
Source: https://emailoctopus.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.
font-family: var(--font-montserrat) โ selector bodyfont-family: var(--font-nohemi) โ selector .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _))font-family: var(--font-nohemi)!important โ selector .emailoctopus-form-wrapper .btn-primaryfont-size: 100% โ selector button,input,optgroup,select,textareafont-size: .96875rem โ selector bodyfont-size: var(--text-h2-article) โ selector .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _))font-size: var(--text-h3) โ selector .legal-terms h2font-size: max(var(--text-h4),1.25rem) โ selector .legal-terms h3font-size: 1.5rem โ selector .text-2xlfont-weight: 400 โ selector bodyfont-weight: 700 โ selector .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _))font-weight: 500 โ selector .prose :where([style_="--text-small"]):not(:where([class~=not-prose],[class~=not-prose] _))font-weight: 500!important โ selector .emailoctopus-form-wrapper .btn-primaryline-height: 1.5 โ selector bodyline-height: 1.05 โ selector .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _))line-height: 1.25 โ selector .prose :where([style_="--text-lead"],[style_="--text-large"]):not(:where([class~=not-prose],[class~=not-prose] _))line-height: 2rem โ selector .text-2xlline-height: 2.25rem โ selector .text-3xlline-height: 2.5rem โ selector .text-4xlline-height: 1 โ selector .text-5xlcolor: rgb(117 63 0/var(--tw-text-opacity,1)) โ selector .text-[#753F00]color: rgb(225 231 195/var(--tw-text-opacity,1)) โ selector .text-[#E1E7C3]color: rgb(255 131 120/var(--tw-text-opacity,1)) โ selector .text-[#FF8378]color: var(--background-black) โ selector .text-background-blackcolor: var(--cta-green) โ selector .text-cta-greencolor: var(--cta-purple) โ selector .text-cta-purplecolor: var(--otto-purple) โ selector .text-otto-purplebackground-color: transparent โ selector button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])background-color: var(--background-150) โ selector bodybackground-color: var(--background-700) โ selector body:is([data-theme=dark],[data-theme=dark] _):not([data-theme=light] \*)background-color: var(--cta-purple)!important โ selector .emailoctopus-form-wrapper .btn-primarybackground-color: var(--cta-purple-hover)!important โ selector .emailoctopus-form-wrapper .btn-primary:hoverbackground-color: var(--cta-purple-pressed)!important โ selector .emailoctopus-form-wrapper .btn-primary:activebackground-color: var(--cta-green)!important โ selector .form-dark .emailoctopus-form-wrapper .btn-primarybackground-color: var(--secondary-radiant-green-100)!important โ selector .form-dark .emailoctopus-form-wrapper .btn-primary:hoverborder-radius: 100px!important โ selector .emailoctopus-form-wrapper .btn-primarybox-shadow: none!important โ selector .emailoctopus-form-wrapper .btn-primary:focusbox-shadow: none โ selector width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radiumax-width: 80rem โ selector .containermax-width: 100%!important โ selector .form-container,.inline-containermax-width: 320px!important โ selector .emailoctopus-form-wrapper .btn-primarypadding: 0 โ selector button,input,optgroup,select,textareapadding: 0 30px!important โ selector .emailoctopus-form-wrapper .btn-primarygap: .125rem โ selector .gap-0.5gap: .25rem โ selector .gap-1gap: .375rem โ selector .gap-1.5gap: 2.5rem โ selector .gap-10gap: .5rem โ selector .gap-2gap: .75rem โ selector .gap-3gap: 1rem โ selector .gap-4gap: 1.25rem โ selector .gap-5transition: background-color .2s ease!important โ selector .emailoctopus-form-wrapper .btn-primary(max-width:35.9375rem)
(min-width:26.25rem)
(min-width:36rem)
(min-width:50.0625rem)
(min-width:70rem)
(min-width:75.0625rem)
(min-width:37.5rem)
(min-width:87.5rem)
(max-width:50rem)
(max-width:69.9375rem)
(max-width:75rem)
Source: https://emailoctopus.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://emailoctopus.com/ โ .\__variable_aca2bd
--font-montserrat: "Montserrat","Montserrat Fallback",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;https://emailoctopus.com/ โ .\__variable_469434
--font-nohemi: "nohemi",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;https://emailoctopus.com/ โ :root
--primary: #6e54d7;
--primary-700: #2b0642;
--primary-600: #3c2668;
--primary-500: #52447f;
--primary-400: #8377af;
--primary-350: #b5a6d7;
--primary-325: #cdbeeb;
--primary-300: #e6d6fe;
--primary-250: #eee4ff;
--primary-200: #f5efff;
--primary-100: #faf7ff;
--secondary-salmon: #ff8378;
--secondary-salmon-700: #290b1a;
--secondary-salmon-600: #4c150c;
--secondary-salmon-500: #754748;
--secondary-salmon-400: #c18e8e;
--secondary-salmon-300: #d6beca;
--secondary-salmon-200: #ede4e9;
--secondary-salmon-100: #f5f0f3;
--secondary-radiant-green: #e1f99d;
--secondary-radiant-green-700: #0b290e;
--secondary-radiant-green-600: #20490d;
--secondary-radiant-green-500: #617246;
--secondary-radiant-green-400: #b7c18e;
--secondary-radiant-green-300: #e1e7c3;
--secondary-radiant-green-200: #f2f4e6;
--secondary-radiant-green-100: #f7f9f1;
--secondary-pink: #fd9de7;
--secondary-pink-700: #290b24;
--secondary-pink-600: #470e40;
--secondary-pink-500: #866299;
--secondary-pink-400: #b38dc3;
--secondary-pink-300: #ffd6e2;
--secondary-pink-200: #ffedf2;
--secondary-pink-100: #fff5f8;
--secondary-radiant-blue: #1542de;
--secondary-radiant-blue-700: #0f0b29;
--secondary-radiant-blue-600: #0f0e44;
--secondary-radiant-blue-500: #4d618c;
--secondary-radiant-blue-400: #8598cd;
--secondary-radiant-blue-300: #cad5f3;
--secondary-radiant-blue-200: #eaeefa;
--secondary-radiant-blue-100: #f4f7fd;
--secondary-mint: #5eddaf;
--secondary-mint-700: #062321;
--secondary-mint-600: #0b443d;
--secondary-mint-500: #137f6a;
--secondary-mint-400: #87ccad;
--secondary-mint-300: #9ff7d9;
--secondary-mint-200: #c5fae8;
--secondary-mint-100: #ebfdf7;
--typography-800: #0c0c0d;
--typography-700: #2b0642;
--typography-600: #3c2668;
--typography-500: #52447f;
--typography-400: #8377af;
--typography-300: #e6d6fe;
--typography-200: #f5efff;
--typography-100: #ffffff;
--background: #6e54d7;
--background-800: #0c0c0d;
--background-700: #2b0642;
--background-600: #3c2668;
--background-500: #52447f;
--background-400: #8377af;
--background-300: #e6d6fe;
--background-250: #eee4ff;
--background-200: #f5efff;
--background-150: #faf7ff;
--background-100: #ffffff;
--background-darken: #00000033;
--background-black: #000000;
--cta-purple: #6e54d7;
--cta-purple-hover: #3c2668;
--cta-purple-pressed: #2b0642;
--cta-green: #e1f99d;
--cta-green-hovered: #20490d;
--cta-green-pressed: #0b290e;
--otto-purple: #6e54d7;
--otto-purple-dark: #2b0642;
--otto-purple-light: #f5efff;
--otto-green: #e1f99d;
--otto-green-light: #e1e7c3;
--otto-pink: #ffd6e2;
--otto-salmon: #ff8378;
--otto-blue: #8598cd;
--otto-mint: #c5fae8;
--shape-green: #e1f99d;
--shape-green-light: #e1e7c3;
--shape-pink: #fd9de7;
--shape-pink-light: #ffd6e2;
--shape-salmon: #ff8378;
--shape-blue: #1542de;
--shape-blue-light: #8598cd;
--shape-mint: #5eddaf;
--shape-mint-light-1: #9ff7d9;
--shape-mint-light-2: #c5fae8;
--gradient-dark-violet: radial-gradient(144.74% 143.46% at 103.26% 102.88%,#e6d6fe 0%,#6e54d7 53.77%,#2b0642 100%);
--gradient-dark-violet-2: linear-gradient(0deg,rgba(0,0,0,0.2),rgba(0,0,0,0.2)),linear-gradient(284deg,#806adc 24.86%,#1c0b29 99.09%);
--gradient-dark-violet-3: radial-gradient(171.82% 167.57% at 122.9% 117.59%,#ffd6e2 0%,#6e54d7 53.77%,#2b0642 100%);
--gradient-violet-dark: linear-gradient(285deg,#1c0b29 55.01%,#806adc 97.1%);
--gradient-dark-pink: radial-gradient(144.74% 143.46% at 103.26% 102.88%,#ffd6e2 0%,#6e54d7 53.77%,#2b0642 100%);
--gradient-dark-green: radial-gradient(144.74% 143.46% at 103.26% 102.88%,#e1e7c3 0%,#6e54d7 53.77%,#2b0642 100%);
--gradient-dark-mint: radial-gradient(144.74% 143.46% at 103.26% 102.88%,#c5fae8 0%,#6e54d7 53.77%,#2b0642 100%);
--gradient-light-violet: radial-gradient(153.48% 148.38% at 100% 109.62%,#aa9aec 0%,#e6d6fe 75.23%,#faf7ff 100%);
--gradient-light-green: radial-gradient(158.61% 158.2% at 112% 111.73%,#e1e7c3 0%,#e6d6fe 75.23%,#faf7ff 100%);
--gradient-light-pink: radial-gradient(158.61% 158.2% at 112% 111.73%,#ffd6e2 0%,#e6d6fe 75.23%,#faf7ff 100%);
--gradient-light-mint: radial-gradient(158.61% 158.2% at 112% 111.73%,#c5fae8 0%,#e6d6fe 75.23%,#faf7ff 100%);
--text: inherit;
--text-h1: 2.75rem;
--text-h1-smaller: 2.75rem;
--text-h2: 2rem;
--text-h2-article: 2rem;
--text-h3: 1.5rem;
--text-h4: 1rem;
--text-h5: 1rem;
--text-h6: 1rem;
--text-lead: 1.125rem;
--text-large: 1rem;
--text-small: 0.875rem;
--header-height: 70px;
--header-height: 77px;
--text-h3: 1.75rem;
--text-h4: 1.5rem;
--header-height: 120px;
--text-h1: 4rem;
--text-h1-smaller: 62px;
--text-h2: 3rem;
--text-h2-article: 2.75rem;
--text-h3: 2.25rem;
--text-h4: 1.75rem;
--text-h5: 1.125rem;
--text-lead: 1.5rem;
--text-large: 1.0625rem;
--text-h1: 4.5rem;
--text-h2-article: 3.375rem;
--swiper-theme-color: #007aff;
--swiper-navigation-size: 44px;https://emailoctopus.com/ โ .swiper-lazy-preloader-white
--swiper-preloader-color: #fff;https://emailoctopus.com/ โ .swiper-lazy-preloader-black
--swiper-preloader-color: #000;
Source: https://emailoctopus.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-montserrat) | body |
| font-family | var(--font-nohemi) | .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _)) |
| font-family | var(--font-nohemi)!important | .emailoctopus-form-wrapper .btn-primary |
| font-size | 100% | button,input,optgroup,select,textarea |
| font-size | .96875rem | body |
| font-size | var(--text-h2-article) | .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _)) |
| font-size | var(--text-h3) | .legal-terms h2 |
| font-size | max(var(--text-h4),1.25rem) | .legal-terms h3 |
| font-size | 1.5rem | .text-2xl |
| font-weight | 400 | body |
| font-weight | 700 | .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _)) |
| font-weight | 500 | .prose :where([style_="--text-small"]):not(:where([class~=not-prose],[class~=not-prose] _)) |
| font-weight | 500!important | .emailoctopus-form-wrapper .btn-primary |
| line-height | 1.5 | body |
| line-height | 1.05 | .prose :where(h2.article-title):not(:where([class~=not-prose],[class~=not-prose] _)) |
| line-height | 1.25 | .prose :where([style_="--text-lead"],[style_="--text-large"]):not(:where([class~=not-prose],[class~=not-prose] _)) |
| line-height | 2rem | .text-2xl |
| line-height | 2.25rem | .text-3xl |
| line-height | 2.5rem | .text-4xl |
| line-height | 1 | .text-5xl |
| color | rgb(117 63 0/var(--tw-text-opacity,1)) | .text-[#753F00] |
| color | rgb(225 231 195/var(--tw-text-opacity,1)) | .text-[#E1E7C3] |
| color | rgb(255 131 120/var(--tw-text-opacity,1)) | .text-[#FF8378] |
| color | var(--background-black) | .text-background-black |
| color | var(--cta-green) | .text-cta-green |
| color | var(--cta-purple) | .text-cta-purple |
| color | var(--otto-purple) | .text-otto-purple |
| background-color | transparent | button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) |
| background-color | var(--background-150) | body |
| background-color | var(--background-700) | body:is([data-theme=dark],[data-theme=dark] _):not([data-theme=light] \*) |
| background-color | var(--cta-purple)!important | .emailoctopus-form-wrapper .btn-primary |
| background-color | var(--cta-purple-hover)!important | .emailoctopus-form-wrapper .btn-primary:hover |
| background-color | var(--cta-purple-pressed)!important | .emailoctopus-form-wrapper .btn-primary:active |
| background-color | var(--cta-green)!important | .form-dark .emailoctopus-form-wrapper .btn-primary |
| background-color | var(--secondary-radiant-green-100)!important | .form-dark .emailoctopus-form-wrapper .btn-primary:hover |
| border-radius | 100px!important | .emailoctopus-form-wrapper .btn-primary |
| box-shadow | none!important | .emailoctopus-form-wrapper .btn-primary:focus |
| box-shadow | none | width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radiu |
| max-width | 80rem | .container |
| max-width | 100%!important | .form-container,.inline-container |
| max-width | 320px!important | .emailoctopus-form-wrapper .btn-primary |
| padding | 0 | button,input,optgroup,select,textarea |
| padding | 0 30px!important | .emailoctopus-form-wrapper .btn-primary |
| gap | .125rem | .gap-0.5 |
| gap | .25rem | .gap-1 |
| gap | .375rem | .gap-1.5 |
| gap | 2.5rem | .gap-10 |
| gap | .5rem | .gap-2 |
| gap | .75rem | .gap-3 |
| gap | 1rem | .gap-4 |
| gap | 1.25rem | .gap-5 |
| transition | background-color .2s ease!important | .emailoctopus-form-wrapper .btn-primary |
Source: https://emailoctopus.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.