Landbot

Landbot

Intuitive Chatbot Builder
Visit
Landbot

Product Interfaces

0
No items found.
No items found.

๐Ÿ”’ Get SaaSFrame Pro to see 3 more product intefaces from Landbot

Emails

3

๐Ÿ”’ Get SaaSFrame Pro to see 0 more emails from Landbot

No items found.
No items found.
No items found.

Visual identity

Landbot โ€” design reference

Source: https://landbot.io/. 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: Dmsans,Arial,sans-serif โ€” selector body
  • font-family: DM Sans โ€” selector .hero-label-fn
  • font-family: Exo,sans-serif โ€” selector .stat-text-block
  • font-family: Avenir โ€” selector .italic-text-2
  • font-family: Gotham Rounded โ€” selector .italic-text-2
  • font-size: 1.625rem!important โ€” selector .path_modal**heading
  • font-size: 18px โ€” selector .askh-title
  • font-size: 2em โ€” selector h1
  • font-size: 14px โ€” selector body
  • font-size: 38px โ€” selector h1
  • font-size: 32px โ€” selector h2
  • font-size: 24px โ€” selector h3
  • font-weight: 700 โ€” selector h1,h2,h3,h4,h5,h6
  • font-weight: 500 โ€” selector .navbarc-menu
  • font-weight: 600 โ€” selector .heroeyebrow
  • font-weight: 800 โ€” selector .herobadge-title
  • line-height: 1.12!important โ€” selector .pathmodal**heading
  • line-height: 24px โ€” selector .askh-title
  • line-height: 20px โ€” selector body
  • line-height: 44px โ€” selector h1
  • line-height: 36px โ€” selector h2
  • line-height: 30px โ€” selector h3
  • line-height: 18px โ€” selector h6
  • letter-spacing: -1px โ€” selector h1
  • letter-spacing: -.5px โ€” selector h4
  • letter-spacing: .14em โ€” selector .hero**eyebrow
  • letter-spacing: .08em โ€” selector .hero**badge-sub
  • letter-spacing: -.024em โ€” selector .hero**title
  • letter-spacing: .1em โ€” selector .reviews**card-stars
  • letter-spacing: .07em โ€” selector .reviews**card-source
  • letter-spacing: -.022em โ€” selector .reviews**title-0

Colors and surfaces

  • color: #fff โ€” selector .path**card-icon:hover,.pathmodalclose:hover,.storymodalclose:hover
  • color: #333 โ€” selector body
  • color: var(--navy) โ€” selector h1
  • color: var(--dark-slate-blue-3) โ€” selector h2
  • color: var(--lb-navy) โ€” selector p
  • background-color: #636BFC โ€” selector .pathcard-icon:hover,.pathmodalclose:hover,.storymodal**close:hover
  • background-color: #0000 โ€” selector a
  • background-color: #fff โ€” selector body

Components and layout

  • border-radius: 26px โ€” selector .story_modal**card
  • border-radius: 0!important โ€” selector .path_modalcard,.story_modal**card
  • border-radius: 3px โ€” selector .path_modalcard::before,.story_modal**card::before
  • border-radius: 8px โ€” selector .margin-bottom.heading-h3.templates-whatsapp
  • border-radius: 6px โ€” selector .cta-book-a-demo-navbar-c.cta-large.edge-line
  • border-radius: var(--radius-4) โ€” selector .cta-book-a-demo-navbar-c.cta-large.edge-line.nav
  • border-radius: 999px โ€” selector .hero**thinking
  • box-shadow: 0 22px 44px -24px rgba(51,64,94,.38) โ€” selector [class_="path**card--"]:hover
  • box-shadow: 0 34px 60px -26px rgba(51,64,94,.30) โ€” selector .testimonials**slider .swiper-slide-active .testimonials**card
  • box-shadow: 0 50px 120px -30px rgba(0,0,0,.55) โ€” selector .storymodalcard
  • box-shadow: 0 1px 1px #33405e14,0 2px 2px 1px #33405e14 โ€” selector .margin-bottom.heading-h3.articles-whatsapp.elevation-1:hover
  • box-shadow: none โ€” selector .navbar-ccomponent
  • box-shadow: 0 2px 8px #0000001a โ€” selector .herothinking
  • box-shadow: 0 30px 60px -28px #00000047 โ€” selector .testimonialscard
  • box-shadow: 0 50px 120px #0000008c โ€” selector .pathmodalcard
  • max-width: 1000px โ€” selector .storymodal**card
  • max-width: 100%!important โ€” selector .pathmodalcard,.storymodal**card
  • max-width: 1440px โ€” selector .navbar-ccontainer
  • max-width: 190px โ€” selector .cta-primary-navbar-c.cta-medium
  • padding: 28px โ€” selector .sectionhomestorymodal
  • padding: 52px 56px โ€” selector .storymodal**card
  • padding: 0!important โ€” selector [class_="section\__home_path_modal_"], .section**home_story_modal
  • padding: calc(14px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))!important โ€” selector .path_modalcard,.story_modal**card
  • padding: 0 โ€” selector button::-moz-focus-inner,input::-moz-focus-inner
  • gap: 8px โ€” selector .lbp-lp-btn
  • gap: 48px โ€” selector .mcp-hero**grid
  • gap: 16px 6px โ€” selector .section**home\_stats
  • transition: transform .3s cubic-bezier(.22,1,.36,1) โ€” selector [class\*="why-teams**card--"]
  • transition: max-height .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin .4s ease โ€” selector [class\*="why-teams**card-body"], [class_="why-teams**card-stats"]
  • transition: transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease โ€” selector [class\*="path**card--"]
  • transition: background-color .15s ease,color .15s ease โ€” selector .path\_card-icon,.pathmodal**close,.story\_modal**close
  • transition: none โ€” selector [class_="why-teams\_\_card-body"], [class\*="why-teams\_\_card-stats"], .page-wrapper.new-home .home-faq**chevron
  • transition: color .2s cubic-bezier(.4,0,.2,.01) โ€” selector .navbar\_c-dropdown-toggle
  • transition: background-color .4s,border-color .4s,color .4s โ€” selector .hero**chan
  • transition: opacity .25s โ€” selector .hero\_\_chan-label

Responsive rules

(hover:hover)
(hover:none)
(max-width:767px)
(min-width:768px)
(prefers-reduced-motion:reduce)
(max-width:991.98px)
(max-width:991px)
screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
screen and (min-width:1280px)
screen and (min-width:1440px)
screen and (min-width:1920px)

Source: https://landbot.io/. 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://cdn.prod.website-files.com/5e1c4fb5db4d5243c0021d34/css/landbotio.6a4e739f3d91bac8eacf8ec7.d38b9ca7d.opt.min.css โ€” :root

--navy: #33405e;
--dark-slate-blue-3: #3a3d5c;
--lb-navy: #33405e;
--dark-lilac-landbot: #336;
--dark-slate-blue: #45496e;
--text-blue: #282d58;
--white-2: white;
--medium-violet-red-landbot: #c36;
--yellow-1: #ffc659;
--slate-grey: #667093;
--pink-snow: #faf4f7;
--lavender: #cbd1f8;
--pink-500: #ed3f78;
--deep-pink: #ec4187;
--kc-background: #f5f7fa;
--white: white;
--pink-600: #cb2e71;
--primary-purple: #636bfc;
--n-100: #9596a7;
--pink-601: #ff3f7b;
--midnight-blue: #171239;
--\_color-schemes---text--secondary: #5d6079;
--\_color-schemes---text--primary: #3a3d5c;
--orange-ug: #fc634b;
--small-text: #a0a5ce;
--black: black;
--purple-pu200: #ebecff;
--new-pink-soft: #bec1fe3d;
--teal-soft: #4fccc229;
--purple--900: #636bfc;
--box-shadow-color: #33405e14;
--\_color-schemes---brand--primary: #5a60f6;
--\_color-schemes---brand--color-1: #ff3f7b;
--\_color-schemes---text--on-brand-subtle: #5259e0;
--\_color-schemes---brand--primary-light: #9699fc;
--\_color-schemes---brand--border: #ebecff;
--\_color-schemes---surface--hover: #f7f7f8;
--\_ui-styles---radius--stroke--spacing--spacing-7: 2.5rem;
--\_color-schemes---text--on-dark-secondary: #c9cfe5;
--\_ui-styles---radius--medium: 1rem;
--\_color-schemes---green-accessible: #0d7f4f;
--\_color-schemes---brand--secondary: #33405e;
--\_color-schemes---surface--error: #ffe8ef;
--red-1: #fd0f15;
--\_color-schemes---surface--success: #def6df;
--\_ui-styles---text--on-dark: white;
--\_ui-styles---radius--stroke--spacing--spacing-5: 1.5rem;
--\_ui-styles---radius--stroke--spacing--spacing-6: 2rem;
--\_ui-styles---radius--stroke--spacing--spacing-4: 1rem;
--\_ui-styles---radius--stroke--spacing--spacing-2: .5rem;
--\_color-schemes---surface-hover: #f7f7f8;
--\_ui-styles---radius--stroke--spacing--spacing-9: 4rem;
--\_ui-styles---radius--stroke--spacing--spacing-3: .85rem;
--\_color-schemes---text-disabled: #9095a6;
--\_color-schemes---surface--hover-light-purple: #ebecff;
--lb-white: #fff;
--lb-purple: #636bfc;
--\_color-schemes---surface--brand-subtle: #ebecff;
--radius-4: .5rem;
--\_color-schemes---surface--brand-medium: #fafaff;
--lb-pink: #ff3f7b;
--\_color-schemes---surface--page: white;
--\_ui-styles---radius--pill: 9999px;
--\_color-schemes---tint--purple: #ebecff;
--\_color-schemes---brand--accent: #ff3f79;
--\_ui-styles---radius--4: .5rem;
--\_color-schemes---border--default: #e5e6ea;
--\_ui-styles---radius--5: .75rem;
--light-green-2: #71f270;
--\_ui-styles---radius--6: 1rem;
--\_ui-styles---radius--2: .125rem;
--green: #52cc57;
--\_color-schemes---surface--card: #fbfbfc;
--\_color-schemes---tint--pink: #ffeef4;
--\_color-schemes---tint--green: #e6f9f0;
--\_color-schemes---tint--navy: #e7ebf3;
--\_spacing---spacer-30: 1.875rem;
--\_spacing---spacer-26: 1.625rem;
--\_spacing---spacer-18: 1.125rem;
--\_spacing---spacer-16: 1rem;
--\_spacing---spacer-44: 2.75rem;
--\_spacing---spacer-20: 1.25rem;
--\_spacing---spacer-14: .875rem;
--\_spacing---28: 1.75rem;
--\_spacing---8: .5rem;
--\_spacing---38: 2.375rem;
--\_spacing---spacer-24: 1.5rem;
--\_spacing---spacer-34: 2.125rem;
--\_spacing---spacer-40: 2.5rem;
--\_spacing---12: .75rem;
--\_spacing---22: 1.375rem;
--\_spacing---32: 2rem;
--\_ui-styles---containers--extra-large: 75rem;
--dark-slate-blue-2: #5c6082;
--\_color-schemes---surface--dark: #1b2139;
--lb-orange: #f58b0b;
--lb-teal: #4fccc2;
--lb-light: #f4f5ff;
--\_ui-styles---containers--large: 48rem;
--\_typography---heading: Dmsans,Arial,sans-serif;
--\_ui-styles---radius--large: 2rem;
--\_typography---body: Dmsans,Arial,sans-serif;
--\_color-schemes---brand--gradient: #fffffffc;
--\_ui-styles---radius--small: .5rem;
--\_ui-styles---radius--3: .25rem;
--\_ui-styles---stroke--broder-width: 1px;
--\_ui-styles---stroke--divider-width: 1px;
--light-cyan: #e3faf5;
--\_ui-styles---radius--stroke--spacing--spacing-1: .25rem;
--cornsilk: #fff6dd;
--\_color-schemes---border--on-dark: white;
--gold: #f5d55e;
--deep-pink-2: #fe0089;
--light-green: #e4fff2;
--\_ui-styles---radius--stroke--spacing--spacing-8: 3.5rem;
--\_ui-styles---radius--stroke--spacing--spacing-10: 5rem;
--light-purp: #755b8f;
--\_ui-styles---radius--stroke--spacing--spacing-11: 0px;
--\_ui-styles---radius--stroke--spacing--spacing12: 8rem;
--midnight-purple: #410083;
--yellow-2: #fc3;
--200-neutral: var(--purple-pu200);
--soft-pink: #bec1fe;

Source: https://landbot.io/. 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-familyDmsans,Arial,sans-serifbody
font-familyDM Sans.hero-label-fn
font-familyExo,sans-serif.stat-text-block
font-familyAvenir.italic-text-2
font-familyGotham Rounded.italic-text-2
font-size1.625rem!important.path_modal**heading
font-size18px.askh-title
font-size2emh1
font-size14pxbody
font-size38pxh1
font-size32pxh2
font-size24pxh3
font-weight700h1,h2,h3,h4,h5,h6
font-weight500.navbarc-menu
font-weight600.heroeyebrow
font-weight800.herobadge-title
line-height1.12!important.pathmodal**heading
line-height24px.askh-title
line-height20pxbody
line-height44pxh1
line-height36pxh2
line-height30pxh3
line-height18pxh6
letter-spacing-1pxh1
letter-spacing-.5pxh4
letter-spacing.14em.hero**eyebrow
letter-spacing.08em.hero**badge-sub
letter-spacing-.024em.hero**title
letter-spacing.1em.reviews**card-stars
letter-spacing.07em.reviews**card-source
letter-spacing-.022em.reviews**title-0
color#fff.path**card-icon:hover,.pathmodalclose:hover,.storymodalclose:hover
color#333body
colorvar(--navy)h1
colorvar(--dark-slate-blue-3)h2
colorvar(--lb-navy)p
background-color#636BFC.pathcard-icon:hover,.pathmodalclose:hover,.storymodal**close:hover
background-color#0000a
background-color#fffbody
border-radius26px.story_modal**card
border-radius0!important.path_modalcard,.story_modal**card
border-radius3px.path_modalcard::before,.story_modal**card::before
border-radius8px.margin-bottom.heading-h3.templates-whatsapp
border-radius6px.cta-book-a-demo-navbar-c.cta-large.edge-line
border-radiusvar(--radius-4).cta-book-a-demo-navbar-c.cta-large.edge-line.nav
border-radius999px.hero**thinking
box-shadow0 22px 44px -24px rgba(51,64,94,.38)[class_="path**card--"]:hover
box-shadow0 34px 60px -26px rgba(51,64,94,.30).testimonials**slider .swiper-slide-active .testimonials**card
box-shadow0 50px 120px -30px rgba(0,0,0,.55).storymodalcard
box-shadow0 1px 1px #33405e14,0 2px 2px 1px #33405e14.margin-bottom.heading-h3.articles-whatsapp.elevation-1:hover
box-shadownone.navbar-ccomponent
box-shadow0 2px 8px #0000001a.herothinking
box-shadow0 30px 60px -28px #00000047.testimonialscard
box-shadow0 50px 120px #0000008c.pathmodalcard
max-width1000px.storymodal**card
max-width100%!important.pathmodalcard,.storymodal**card
max-width1440px.navbar-ccontainer
max-width190px.cta-primary-navbar-c.cta-medium
padding28px.sectionhomestorymodal
padding52px 56px.storymodal**card
padding0!important[class_="section\__home_path_modal_"], .section**home_story_modal
paddingcalc(14px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom))!important.path_modalcard,.story_modal**card
padding0button::-moz-focus-inner,input::-moz-focus-inner
gap8px.lbp-lp-btn
gap48px.mcp-hero**grid
gap16px 6px.section**home\_stats
transitiontransform .3s cubic-bezier(.22,1,.36,1)[class\*="why-teams**card--"]
transitionmax-height .45s cubic-bezier(.4,0,.2,1),opacity .4s ease,margin .4s ease[class\*="why-teams**card-body"], [class_="why-teams**card-stats"]
transitiontransform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease[class\*="path**card--"]
transitionbackground-color .15s ease,color .15s ease.path\_card-icon,.pathmodal**close,.story\_modal**close
transitionnone[class_="why-teams\_\_card-body"], [class\*="why-teams\_\_card-stats"], .page-wrapper.new-home .home-faq**chevron
transitioncolor .2s cubic-bezier(.4,0,.2,.01).navbar\_c-dropdown-toggle
transitionbackground-color .4s,border-color .4s,color .4s.hero**chan
transitionopacity .25s.hero\_\_chan-label

Source: https://landbot.io/. 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.
  • 123 custom-property declarations found; 5198 relevant property declarations parsed.

Stylesheet sources

1 linked stylesheets could not be retrieved; inventory is partial.