


Source: https://www.monspark.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: Arial, sans-serif โ selector bodyfont-family: Inter, sans-serif โ selector bodyfont-family: Inter Display, sans-serif โ selector .button-animatedfont-family: ICONS SHARP, sans-serif โ selector .text-block-11-copyfont-family: Droid Sans, sans-serif โ selector .text-block-11-copy-copyfont-family: Arial, Helvetica Neue, Helvetica, sans-serif โ selector .text-block-11-copy-copy.text-xxsfont-family: ICONS ROUNDED, sans-serif โ selector .nav-link-icon-wrapfont-size: 2em โ selector h1font-size: 1em โ selector code, kbd, pre, sampfont-size: 14px โ selector bodyfont-size: 38px โ selector h1font-size: 32px โ selector h2font-size: 24px โ selector h3font-size: 18px โ selector h4font-size: 12px โ selector h6font-weight: bold โ selector h1, h2, h3, h4, h5, h6font-weight: 400 โ selector bodyfont-weight: 800 โ selector h1font-weight: 700 โ selector h2font-weight: 600 โ selector h6font-weight: 500 โ selector .title-xl.title-herofont-weight: 300 โ selector .sign-up-text-field.contact::placeholderline-height: 20px โ selector bodyline-height: 44px โ selector h1line-height: 36px โ selector h2line-height: 30px โ selector h3line-height: 24px โ selector h4line-height: 18px โ selector h6line-height: 1.333 โ selector bodyletter-spacing: -.02em โ selector h1letter-spacing: -.01em โ selector h2letter-spacing: 0 โ selector h5letter-spacing: -.03em โ selector .title-xlletter-spacing: .05em โ selector .title-xl.title-heroletter-spacing: normal โ selector .title-xl.title-hero.homeletter-spacing: -.025em โ selector .title-xsletter-spacing: -.005em โ selector .text-smcolor: #333 โ selector bodycolor: var(--text) โ selector bodycolor: var(--titles-links) โ selector acolor: var(--neutral-200) โ selector .font-titlebackground-color: #0000 โ selector abackground-color: #fff โ selector bodybackground-color: var(--background) โ selector bodyborder-radius: 999px โ selector .glowing-wrapper-button:afterborder-radius: 9999px โ selector .button-animatedborder-radius: .75em โ selector .button.pricing-buttonborder-radius: 8px โ selector .text-xs.careerborder-radius: 24px โ selector .text-2xl.blogsborder-radius: 16px โ selector .component-sectionborder-radius: .125em โ selector .book-titlebox-shadow: inset 0 0 100px 100px #0000 โ selector .buttonbox-shadow: inset 0 0 200px 200px #00000026 โ selector .button:hoverbox-shadow: inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 โ selector .button.pricing-buttonbox-shadow: 0 0 12px 2px #fff3, inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 โ selector .button.pricing-button:hoverbox-shadow: inset 0 2px 4px #ffffff1a โ selector .button.new-pricingbox-shadow: inset 0 2px 4px #ffffff4d โ selector .button.new-pricing.popularbox-shadow: inset 0 0 0 2px #0000 โ selector .component-sectionbox-shadow: inset 0 0 0 2px var(--accent) โ selector .component-section:hovermax-width: 20ch โ selector .title-sm._20chmax-width: 14ch โ selector .title-xl._12chmax-width: 56em โ selector .container-mdmax-width: 624px โ selector .column-md.column-md-heropadding: 0 โ selector button::-moz-focus-inner, input::-moz-focus-innerpadding: .75em 1.25em โ selector .button-animatedpadding: 8px 16px โ selector .text-xs.careerpadding: 24px โ selector .text-2xl.blogsgap: 8px โ selector #pci-announcement .pci-linktransition: 1s all โ selector .glowing-wrapper-button:aftertransition: opacity .3s, background-color .3s, color .3s โ selector atransition: color .2s cubic-bezier(.165, .84, .44, 1) โ selector .button-animatedtransition: background-color .3s, opacity .3s, box-shadow .3s, color .3s โ selector .buttontransition: box-shadow .3s, background-color .4s, color .3s โ selector .button.pricing-buttontransition: color .3s โ selector .text-sm.features-texttransition: box-shadow .2s, border-color .2s โ selector .component-sectiontransition: box-shadow .3s โ selector .text-field-rounded(min-width: 992px)
(max-width: 767px)
screen and (max-width: 1920px)
screen and (max-width: 1440px)
screen and (max-width: 479px)
screen and (max-width: 991px)
screen and (max-width: 767px)
(min-width: 768px)
screen and (min-width: 1440px)
screen and (min-width: 1920px)
Source: https://www.monspark.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://www.monspark.com/assets/css/monspark-f25a2f.webflow.shared.15e1b7bd4.css โ :root
--background: #0d1117;
--text: #a7b5c3;
--titles-links: #ccdae7;
--neutral-200: #a5b4c2;
--neutral-800: #171e25;
--neutral-700: #1e252c;
--primary: #0052cc;
--white: white;
--neutral-600: #272e35;
--red-600: #d31919;
--lime-500: #77bd0c;
--neutral-100: #bbc8d5;
--green-500: #17be55;
--gray-300: #c9d0da;
--purple-400: #b77cf1;
--purple-200: #e0caf8;
--purple-50: #f4eefa;
--black: #0d1117;
--neutral-400: #646f7c;
--red-500: #e23b3b;
--blue-300: #89bcf5;
--teal-200: #92f3e0;
--red-800: #961313;
--green-700: #117737;
--sky-500: #079de0;
--yellow-300: #f1dc39;
--purple-100: #eadcf8;
--teal-100: #c5faf1;
--blue-100: #d0e2f6;
--green-100: #cbf3d9;
--green-400: #3dd875;
--teal-400: #26d5bf;
--teal-50: #e9faf7;
--blue-50: #e2ecf8;
--green-50: #e3f6e9;
--red-50: #f6e0e0;
--yellow-50: #f5f2d4;
--slate-600: #3f4e61;
--slate-200: #cfd9e4;
--slate-50: #eff4f8;
--accent: #3aecba;
--slate-100: #e2e8ee;
--border: #21262d;
--neutral-500: #3f4852;
--green-300: #7beca4;
--blue-500: #3077eb;
--red-400: #ec6464;
--red-300: #f09898;
--red-200: #f1b5b5;
--red-100: #f1cfcf;
--green-200: #acf1c5;
--blue-600: #1d59db;
--blue-200: #b0cff7;
--amber-400: #f1b51a;
--neutral-900: #101720;
--slate-300: #bcc9d8;
--slate-400: #8597ad;
--slate-500: #5b6d83;
--slate-700: #2c3a4b;
--slate-800: #1d2736;
--slate-900: #131d31;
--red-700: #ac1515;
--red-900: #770505;
--orange-50: #f5e8d7;
--orange-100: #f5dfc1;
--orange-200: #f3ca9b;
--orange-300: #f0ad68;
--orange-400: #ee8733;
--orange-500: #ec6a10;
--orange-600: #db5008;
--orange-700: #b43b09;
--orange-800: #8a2d0f;
--orange-900: #72260c;
--yellow-100: #f3f1af;
--yellow-200: #f5ed7b;
--yellow-400: #eecc0b;
--yellow-500: #d3a707;
--yellow-600: #bb8b06;
--yellow-700: #96630b;
--yellow-800: #7e4c07;
--yellow-900: #6d3e0b;
--lime-50: #eef7da;
--lime-100: #e2f5bc;
--lime-200: #cff18f;
--lime-300: #aedf58;
--lime-400: #97db27;
--lime-600: #599208;
--lime-700: #467508;
--lime-800: #385a0c;
--lime-900: #2c460d;
--green-600: #0f9b42;
--green-800: #115f2f;
--green-900: #0f4c28;
--teal-300: #55e4d6;
--teal-500: #0eb2a0;
--teal-600: #089084;
--teal-700: #097068;
--teal-800: #0a5c57;
--teal-900: #0c534a;
--cyan-50: #e1fafc;
--cyan-100: #c1f3f8;
--cyan-200: #9bedf7;
--cyan-300: #5ce5f6;
--cyan-400: #1acee9;
--cyan-500: #07b4d1;
--cyan-600: #058aaa;
--cyan-700: #096f8b;
--cyan-800: #0f5a72;
--cyan-900: #114a5f;
--sky-50: #e7f2fa;
--sky-100: #d3e8f6;
--sky-200: #b5e6ff;
--sky-300: #73cbf5;
--sky-400: #31b3ec;
--sky-600: #037cbb;
--sky-700: #06689e;
--sky-800: #04547f;
--sky-900: #064264;
--blue-400: #559df5;
--blue-700: #1748d1;
--blue-800: #1335a7;
--blue-900: #0a2a88;
--indigo-50: #e6eaf6;
--indigo-100: #d5dcf5;
--indigo-200: #bcc6ee;
--indigo-300: #a5b3f7;
--indigo-400: #7f89ec;
--indigo-500: #6668eb;
--indigo-600: #524add;
--indigo-700: #4036be;
--indigo-800: #2e2799;
--indigo-900: #221f7e;
--violet-50: #efedfa;
--violet-100: #e4e0f5;
--violet-200: #d7d1f3;
--violet-300: #c0b3f3;
--violet-400: #a38aee;
--violet-500: #8d62ee;
--violet-600: #7a3ee0;
--violet-700: #6d2cd3;
--violet-800: #5e26b8;
--violet-900: #4b12a3;
--purple-300: #d0acf6;
--purple-500: #a355ee;
--purple-600: #982ff7;
--purple-700: #821eda;
--purple-800: #6f1ab6;
--purple-900: #5d1694;
--pink-50: #faedf4;
--pink-100: #f7dceb;
--pink-200: #f6c8e3;
--pink-300: #f39dcc;
--pink-400: #ee6db1;
--pink-500: #f34a9d;
--pink-600: #e22a7c;
--pink-700: #ce1562;
--pink-800: #a5144e;
--pink-900: #8b1344;
--rose-50: #fceced;
--rose-100: #f5d7d9;
--rose-200: #f3c3c9;
--rose-300: #f89aa6;
--rose-400: #ff7a8d;
--rose-500: #f14563;
--rose-600: #df2c53;
--rose-700: #c71742;
--rose-800: #ad113c;
--amber-50: #f5efd6;
--amber-100: #f3e6b1;
--amber-200: #f5dc7a;
--amber-300: #f1c73f;
--amber-500: #e49106;
--amber-600: #c96e05;
--amber-700: #a84b05;
--amber-800: #863707;
--amber-900: #722e07;
--rose-900: #97103a;
--gray-50: #eff3f7;
--gray-100: #ebeef3;
--gray-200: #dbdfe7;
--gray-400: #909aa8;
--gray-500: #636c7c;
--gray-600: #465363;
--gray-700: #313c4d;
--gray-800: #222d3b;
--gray-900: #1b2435;
--neutral-50: #dfebf7;
--neutral-300: #7c8c9b;
--navbar: #0d1117e0;
--navbar-shadow: #4047521a;
--hover: #475569;
--nav-link: #0d111740;
Source: https://www.monspark.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 | Arial, sans-serif | body |
| font-family | Inter, sans-serif | body |
| font-family | Inter Display, sans-serif | .button-animated |
| font-family | ICONS SHARP, sans-serif | .text-block-11-copy |
| font-family | Droid Sans, sans-serif | .text-block-11-copy-copy |
| font-family | Arial, Helvetica Neue, Helvetica, sans-serif | .text-block-11-copy-copy.text-xxs |
| font-family | ICONS ROUNDED, sans-serif | .nav-link-icon-wrap |
| font-size | 2em | h1 |
| font-size | 1em | code, kbd, pre, samp |
| font-size | 14px | body |
| font-size | 38px | h1 |
| font-size | 32px | h2 |
| font-size | 24px | h3 |
| font-size | 18px | h4 |
| font-size | 12px | h6 |
| font-weight | bold | h1, h2, h3, h4, h5, h6 |
| font-weight | 400 | body |
| font-weight | 800 | h1 |
| font-weight | 700 | h2 |
| font-weight | 600 | h6 |
| font-weight | 500 | .title-xl.title-hero |
| font-weight | 300 | .sign-up-text-field.contact::placeholder |
| line-height | 20px | body |
| line-height | 44px | h1 |
| line-height | 36px | h2 |
| line-height | 30px | h3 |
| line-height | 24px | h4 |
| line-height | 18px | h6 |
| line-height | 1.333 | body |
| letter-spacing | -.02em | h1 |
| letter-spacing | -.01em | h2 |
| letter-spacing | 0 | h5 |
| letter-spacing | -.03em | .title-xl |
| letter-spacing | .05em | .title-xl.title-hero |
| letter-spacing | normal | .title-xl.title-hero.home |
| letter-spacing | -.025em | .title-xs |
| letter-spacing | -.005em | .text-sm |
| color | #333 | body |
| color | var(--text) | body |
| color | var(--titles-links) | a |
| color | var(--neutral-200) | .font-title |
| background-color | #0000 | a |
| background-color | #fff | body |
| background-color | var(--background) | body |
| border-radius | 999px | .glowing-wrapper-button:after |
| border-radius | 9999px | .button-animated |
| border-radius | .75em | .button.pricing-button |
| border-radius | 8px | .text-xs.career |
| border-radius | 24px | .text-2xl.blogs |
| border-radius | 16px | .component-section |
| border-radius | .125em | .book-title |
| box-shadow | inset 0 0 100px 100px #0000 | .button |
| box-shadow | inset 0 0 200px 200px #00000026 | .button:hover |
| box-shadow | inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 | .button.pricing-button |
| box-shadow | 0 0 12px 2px #fff3, inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 | .button.pricing-button:hover |
| box-shadow | inset 0 2px 4px #ffffff1a | .button.new-pricing |
| box-shadow | inset 0 2px 4px #ffffff4d | .button.new-pricing.popular |
| box-shadow | inset 0 0 0 2px #0000 | .component-section |
| box-shadow | inset 0 0 0 2px var(--accent) | .component-section:hover |
| max-width | 20ch | .title-sm._20ch |
| max-width | 14ch | .title-xl._12ch |
| max-width | 56em | .container-md |
| max-width | 624px | .column-md.column-md-hero |
| padding | 0 | button::-moz-focus-inner, input::-moz-focus-inner |
| padding | .75em 1.25em | .button-animated |
| padding | 8px 16px | .text-xs.career |
| padding | 24px | .text-2xl.blogs |
| gap | 8px | #pci-announcement .pci-link |
| transition | 1s all | .glowing-wrapper-button:after |
| transition | opacity .3s, background-color .3s, color .3s | a |
| transition | color .2s cubic-bezier(.165, .84, .44, 1) | .button-animated |
| transition | background-color .3s, opacity .3s, box-shadow .3s, color .3s | .button |
| transition | box-shadow .3s, background-color .4s, color .3s | .button.pricing-button |
| transition | color .3s | .text-sm.features-text |
| transition | box-shadow .2s, border-color .2s | .component-section |
| transition | box-shadow .3s | .text-field-rounded |
Source: https://www.monspark.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.