MonSpark

MonSpark

All In One Website Monitoring
Visit
MonSpark

Marketing Pages

3
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available

๐Ÿ”’ Get SaaSFrame Pro to see 0 more marketing pages from MonSpark

Product Interfaces

18
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available
Abstract geometric logo composed of four colorful rounded shapes in red, pink, purple, blue, and green arranged in a stylized 'F'.
Figmaย fileย available

๐Ÿ”’ Get SaaSFrame Pro to see 15 more product intefaces from MonSpark

No items found.
MonSpark Steps Section
MonSpark Feature Section
MonSpark Clients Logo Section

Visual identity

MonSpark โ€” design reference

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.

Typography

  • font-family: Arial, sans-serif โ€” selector body
  • font-family: Inter, sans-serif โ€” selector body
  • font-family: Inter Display, sans-serif โ€” selector .button-animated
  • font-family: ICONS SHARP, sans-serif โ€” selector .text-block-11-copy
  • font-family: Droid Sans, sans-serif โ€” selector .text-block-11-copy-copy
  • font-family: Arial, Helvetica Neue, Helvetica, sans-serif โ€” selector .text-block-11-copy-copy.text-xxs
  • font-family: ICONS ROUNDED, sans-serif โ€” selector .nav-link-icon-wrap
  • font-size: 2em โ€” selector h1
  • font-size: 1em โ€” selector code, kbd, pre, samp
  • font-size: 14px โ€” selector body
  • font-size: 38px โ€” selector h1
  • font-size: 32px โ€” selector h2
  • font-size: 24px โ€” selector h3
  • font-size: 18px โ€” selector h4
  • font-size: 12px โ€” selector h6
  • font-weight: bold โ€” selector h1, h2, h3, h4, h5, h6
  • font-weight: 400 โ€” selector body
  • font-weight: 800 โ€” selector h1
  • font-weight: 700 โ€” selector h2
  • font-weight: 600 โ€” selector h6
  • font-weight: 500 โ€” selector .title-xl.title-hero
  • font-weight: 300 โ€” selector .sign-up-text-field.contact::placeholder
  • line-height: 20px โ€” selector body
  • line-height: 44px โ€” selector h1
  • line-height: 36px โ€” selector h2
  • line-height: 30px โ€” selector h3
  • line-height: 24px โ€” selector h4
  • line-height: 18px โ€” selector h6
  • line-height: 1.333 โ€” selector body
  • letter-spacing: -.02em โ€” selector h1
  • letter-spacing: -.01em โ€” selector h2
  • letter-spacing: 0 โ€” selector h5
  • letter-spacing: -.03em โ€” selector .title-xl
  • letter-spacing: .05em โ€” selector .title-xl.title-hero
  • letter-spacing: normal โ€” selector .title-xl.title-hero.home
  • letter-spacing: -.025em โ€” selector .title-xs
  • letter-spacing: -.005em โ€” selector .text-sm

Colors and surfaces

  • color: #333 โ€” selector body
  • color: var(--text) โ€” selector body
  • color: var(--titles-links) โ€” selector a
  • color: var(--neutral-200) โ€” selector .font-title
  • background-color: #0000 โ€” selector a
  • background-color: #fff โ€” selector body
  • background-color: var(--background) โ€” selector body

Components and layout

  • border-radius: 999px โ€” selector .glowing-wrapper-button:after
  • border-radius: 9999px โ€” selector .button-animated
  • border-radius: .75em โ€” selector .button.pricing-button
  • border-radius: 8px โ€” selector .text-xs.career
  • border-radius: 24px โ€” selector .text-2xl.blogs
  • border-radius: 16px โ€” selector .component-section
  • border-radius: .125em โ€” selector .book-title
  • box-shadow: inset 0 0 100px 100px #0000 โ€” selector .button
  • box-shadow: inset 0 0 200px 200px #00000026 โ€” selector .button:hover
  • box-shadow: inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 โ€” selector .button.pricing-button
  • box-shadow: 0 0 12px 2px #fff3, inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000 โ€” selector .button.pricing-button:hover
  • box-shadow: inset 0 2px 4px #ffffff1a โ€” selector .button.new-pricing
  • box-shadow: inset 0 2px 4px #ffffff4d โ€” selector .button.new-pricing.popular
  • box-shadow: inset 0 0 0 2px #0000 โ€” selector .component-section
  • box-shadow: inset 0 0 0 2px var(--accent) โ€” selector .component-section:hover
  • max-width: 20ch โ€” selector .title-sm._20ch
  • max-width: 14ch โ€” selector .title-xl._12ch
  • max-width: 56em โ€” selector .container-md
  • max-width: 624px โ€” selector .column-md.column-md-hero
  • padding: 0 โ€” selector button::-moz-focus-inner, input::-moz-focus-inner
  • padding: .75em 1.25em โ€” selector .button-animated
  • padding: 8px 16px โ€” selector .text-xs.career
  • padding: 24px โ€” selector .text-2xl.blogs
  • gap: 8px โ€” selector #pci-announcement .pci-link
  • transition: 1s all โ€” selector .glowing-wrapper-button:after
  • transition: opacity .3s, background-color .3s, color .3s โ€” selector a
  • transition: color .2s cubic-bezier(.165, .84, .44, 1) โ€” selector .button-animated
  • transition: background-color .3s, opacity .3s, box-shadow .3s, color .3s โ€” selector .button
  • transition: box-shadow .3s, background-color .4s, color .3s โ€” selector .button.pricing-button
  • transition: color .3s โ€” selector .text-sm.features-text
  • transition: box-shadow .2s, border-color .2s โ€” selector .component-section
  • transition: box-shadow .3s โ€” selector .text-field-rounded

Responsive rules

(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.

PropertyDeclared valueSelector
font-familyArial, sans-serifbody
font-familyInter, sans-serifbody
font-familyInter Display, sans-serif.button-animated
font-familyICONS SHARP, sans-serif.text-block-11-copy
font-familyDroid Sans, sans-serif.text-block-11-copy-copy
font-familyArial, Helvetica Neue, Helvetica, sans-serif.text-block-11-copy-copy.text-xxs
font-familyICONS ROUNDED, sans-serif.nav-link-icon-wrap
font-size2emh1
font-size1emcode, kbd, pre, samp
font-size14pxbody
font-size38pxh1
font-size32pxh2
font-size24pxh3
font-size18pxh4
font-size12pxh6
font-weightboldh1, h2, h3, h4, h5, h6
font-weight400body
font-weight800h1
font-weight700h2
font-weight600h6
font-weight500.title-xl.title-hero
font-weight300.sign-up-text-field.contact::placeholder
line-height20pxbody
line-height44pxh1
line-height36pxh2
line-height30pxh3
line-height24pxh4
line-height18pxh6
line-height1.333body
letter-spacing-.02emh1
letter-spacing-.01emh2
letter-spacing0h5
letter-spacing-.03em.title-xl
letter-spacing.05em.title-xl.title-hero
letter-spacingnormal.title-xl.title-hero.home
letter-spacing-.025em.title-xs
letter-spacing-.005em.text-sm
color#333body
colorvar(--text)body
colorvar(--titles-links)a
colorvar(--neutral-200).font-title
background-color#0000a
background-color#fffbody
background-colorvar(--background)body
border-radius999px.glowing-wrapper-button:after
border-radius9999px.button-animated
border-radius.75em.button.pricing-button
border-radius8px.text-xs.career
border-radius24px.text-2xl.blogs
border-radius16px.component-section
border-radius.125em.book-title
box-shadowinset 0 0 100px 100px #0000.button
box-shadowinset 0 0 200px 200px #00000026.button:hover
box-shadowinset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000.button.pricing-button
box-shadow0 0 12px 2px #fff3, inset -1px 4px 3px -1px #3842524d, inset 0 0 100px 100px #0000.button.pricing-button:hover
box-shadowinset 0 2px 4px #ffffff1a.button.new-pricing
box-shadowinset 0 2px 4px #ffffff4d.button.new-pricing.popular
box-shadowinset 0 0 0 2px #0000.component-section
box-shadowinset 0 0 0 2px var(--accent).component-section:hover
max-width20ch.title-sm._20ch
max-width14ch.title-xl._12ch
max-width56em.container-md
max-width624px.column-md.column-md-hero
padding0button::-moz-focus-inner, input::-moz-focus-inner
padding.75em 1.25em.button-animated
padding8px 16px.text-xs.career
padding24px.text-2xl.blogs
gap8px#pci-announcement .pci-link
transition1s all.glowing-wrapper-button:after
transitionopacity .3s, background-color .3s, color .3sa
transitioncolor .2s cubic-bezier(.165, .84, .44, 1).button-animated
transitionbackground-color .3s, opacity .3s, box-shadow .3s, color .3s.button
transitionbox-shadow .3s, background-color .4s, color .3s.button.pricing-button
transitioncolor .3s.text-sm.features-text
transitionbox-shadow .2s, border-color .2s.component-section
transitionbox-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.

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.
  • 192 custom-property declarations found; 2633 relevant property declarations parsed.

Stylesheet sources