Source: https://userbot.ai/. 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: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif — selector body
font-family: Metropolis,sans-serif — selector p
font-family: Font Awesome\ 5 Brands — selector header nav.main-navigation #main-menu .menu-holder ul li a[data-icon]:before
font-family: userbot — selector footer#page .top ul li a[data-icon]:after
font-family: feather — selector [class|=event-element] .description .address a:before
font-size: 1rem — selector body
font-size: 100% — selector a,body,div,footer,h1,h2,h3,h4,header,html,i,img,label,li,nav,p,section,span,strong,ul,video
font-size: 3rem — selector h1
font-size: 2.5rem — selector h2
font-size: 2rem — selector h3
font-size: 1.635rem — selector h4
font-size: 1.375rem — selector p.big
font-weight: 400 — selector body
font-weight: 600 — selector h1,h2,h3,h4
font-weight: 300 — selector p
font-weight: 500 — selector header nav.main-navigation #main-menu .menu-holder ul li a
font-weight: 700 — selector header nav.main-navigation #main-menu .lang-menu ul li a
font-weight: 600!important — selector \[class^=page-header]\[class_="--page"][class_=case-study] .page-header--case-study**container**paragraph>\* strong
font-weight: lighter — selector .form-lead**text-side ul li p
line-height: 1.5 — selector body
line-height: 1 — selector body
line-height: 1.29 — selector h1,h2,h3,h4
line-height: 1.4 — selector p
line-height: 29px — selector header nav.main-navigation #main-menu .menu-holder ul li a
line-height: 34px — selector header nav.main-navigation #main-menu .lang-menu ul li a
line-height: 1.6 — selector header nav.main-navigation #mobile-menu .mobile-wrap .primary-links ul.small li a
letter-spacing: -.025rem — selector \[class|=page-content]\[class_=-saas] section#specs[class|=ttabs-wrap] .wraps .ttabs .ttab .text span
letter-spacing: -.5px — selector [class_=team-element] .title h6
letter-spacing: 0 — selector [class_=team-element] .title h6
letter-spacing: -.2px — selector footer#page .bottom .wrap-sitemap .cols p

Colors and surfaces

color: #212529 — selector body
color: #00afd1 — selector a
color: #637178 — selector p
color: #fff — selector header nav.main-navigation #main-menu .menu-holder ul li a
color: #e9e6ff — selector header nav.main-navigation #main-menu .menu-holder ul li a[data-icon]:before
color: hsla(0,0%,100%,.75) — selector header nav.main-navigation #mobile-menu .mobile-wrap .primary-links ul.small li a
color: hsla(0,0%,100%,.7) — selector header nav.main-navigation #mobile-menu .mobile-wrap .info-wrap .services \[class|=service-element]\[class_=small] p
color: #f7f6ff — selector header nav.main-navigation #mobile-menu .footer ul li a i
background-color: #fff — selector body
background-color: transparent — selector a
background-color: #f5f7fa — selector header .wrap-menu #menu-responsive .menu-button .bar
background-color: #f7f6ff — selector body[class_=page-tpl-home] header:not(.fixed) .wrap-menu .primary-menu ul li[class_=hoverline] a:after
background-color: hsla(0,0%,100%,.25) — selector a[class_=hoverline]:after
background-color: #3122ab — selector \[class|=btn]\[class_=-big][class_=-colorone],\[class|=btn]\[class_=-big][class_=-secondary]
background-color: #00afd1 — selector \[class|=btn]\[class_=-big][class_=-colorone]
background-color: #f4f5f8 — selector \[class|=page-content]\[class_=-about] section#timeline:after

Components and layout

border-radius: 1px — selector header .wrap-menu #menu-responsive .menu-button .bar
border-radius: 0 150px 150px 0 — selector \[class|=page-content]\[class_=-home] section#essential:after
border-radius: 0 0 0 150px — selector \[class|=page-content]\[class_=-home] section#enterprise:after
border-radius: 7px — selector [class|=input-form] [class_=submit-wrap] button
border-radius: 5px — selector \[class|=btn]\[class_=-small]
border-radius: 50% — selector footer#page .top ul li a[data-icon]:before
border-radius: 20px — selector \[class|=page-content]\[class_=-about] section#cta [class|=ctabox-element] .wrap
border-radius: 150px — selector \[class|=page-content]\[class_=-consulting] section#ooo:after
box-shadow: 0 2px 17px 0 rgba(0,0,0,.19) — selector [class|=input-form] [class_=submit-wrap] button
box-shadow: 0 10px 20px transparent — selector \[class|=btn]\[class_=-line][class_=-white]
box-shadow: 5px 10px 20px 0 rgba(42,49,53,.19) — selector footer#page .top ul li a[data-icon]:before
box-shadow: 0 55px 60px 0 rgba(42,49,53,.05) — selector \[class|=page-content]\[class_=-consulting] section#intro:after
box-shadow: 0 4px 17px 0 rgba(0,0,0,.13) — selector \[class|=page-content]\[class_=-consulting] section#features video
box-shadow: none — selector button.mfp-arrow,button.mfp-close
box-shadow: 0 20px 30px 0 rgba(42,49,53,.05) — selector [class_=team-element] .title
box-shadow: 0 40px 60px 0 rgba(42,49,53,.06) — selector \[class|=imagehead-element]\[class_=title] [class_=header]
max-width: 70% — selector [class_=page-header][class_="--page"][class_="--home"] p,[class_=page-header][class_="--pagebig"][class_="--home"] p
max-width: 50% — selector \[class|=main-cta]\[class_=-double] .wrap .title
max-width: 540px — selector .container
max-width: 720px — selector .container
max-width: 960px — selector .container
max-width: 1140px — selector .container
max-width: 100% — selector body[class_=page-tpl-home] header:not(.fixed) .wrap-menu .primary-menu
max-width: 90% — selector [class_=page-header][class_="--landing"][class_="--home"] p,[class_=page-header][class_="--page"][class_="--home"] p,[class_=page-header][class_="--pagebig"][class_="--home"] p
padding: 0 — selector [type=button]::-moz-focus-inner,button::-moz-focus-inner
padding: 0 3px — selector header nav.main-navigation #mobile-menu .languages ul li a
padding: 0 7px — selector header nav.main-navigation #mobile-menu .footer ul li a
padding: 100px 0 — selector \[class|=page-content]\[class_=-home] section#services
padding: 50px 0 — selector \[class|=page-content]\[class_=-home] section#essential .row
padding: 10px 0 — selector \[class|=box-element]\[class_=-big] .description h3
padding: .375rem 0 .5rem — selector \[class|=box-element]\[class_=-big] .description p
padding: 2rem 1.875rem 1rem — selector [class|=service-element] h3
gap: 20px — selector [class_=page-header][class_="--page"][class_="--home"] .double-buttons .input-form--simple
gap: 10px — selector .show-products-section--minimal .show-products-section**content**navbar ul
gap: 50px — selector #features>.container .row,.section-features>.container .row
gap: 30px — selector .cards-section .row
gap: 4px — selector .cards-carousel-block**wrapper\_\_item div
transition: .4s ease — selector body,body.visible
transition: color .4s ease — selector header nav.main-navigation #main-menu .menu-holder ul li a
transition: padding-left .4s ease — selector header nav.main-navigation #main-menu .menu-holder ul li.submenu ul.sub-menu li a
transition: opacity .4s ease — selector header nav.main-navigation #mobile-menu .languages ul li a:hover
transition: margin .4s ease — selector header .wrap-menu #menu-responsive .menu-button .bar-1
transition: transform .4s cubic-bezier(.455,.03,.515,.955) — selector header .wrap-menu #menu-responsive .menu-button .bar-1
transition: transform .2s cubic-bezier(.455,.03,.515,.955) — selector header .wrap-menu #menu-responsive .menu-button:hover .bar-1
transition: margin .15s ease-out,opacity .15s ease-out,transform .15s ease-out .25s — selector header .wrap-menu #menu-responsive.open .menu-button .bar-1

Responsive rules

(prefers-reduced-motion: reduce) 
(min-width:576px)
(min-width:768px)
(min-width:992px)
(min-width:1200px)
print
screen and (max-width:576px)
screen and (max-width:414px)
(max-width:991px)
(max-width:767px)
screen and (max-width:375px)
(max-width:1199px)
screen and (min-width:991px)
(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi)
(-webkit-min-device-pixel-ratio:2),(-webkit-min-device-pixel-ratio:2) and (max-width:767px),(min-resolution:192dpi) and (max-width:767px)
screen and (min-width:768px)
screen and (max-width:350px)
screen and (max-width:991px)
screen and (max-width:1199px)
screen and (min-width:992px)
screen and (min-width:992px) and (max-width:1199px)
screen and (max-width:991px) and (max-width:1350px)
screen and (max-width:991px) and (max-width:576px)
screen and (max-width:991px) and (max-width:991px)
screen and (min-width:1280px) and (max-width:1439px)

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://userbot.ai/ — \*

--accent-color: #00afd1;

https://userbot.ai/ — :root

--ttabs-text-color: ;
--ttabs-secondary-text-color: ;

https://userbot.ai/wp-content/themes/userbot/assets/css/style.css?1.50 — @charset "UTF-8";:root

--accent-color: #00afd1;
--primary-color: #3122ab;
--border-color: #e7e3e4;
--border-radius: 24px;

Observed design values, with source selectors. Names shown are CSS properties, not invented official token names.

Property	Declared value	Selector
font-family	`-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif`	`body`
font-family	`Metropolis,sans-serif`	`p`
font-family	`Font Awesome\ 5 Brands`	`header nav.main-navigation #main-menu .menu-holder ul li a[data-icon]:before`
font-family	`userbot`	`footer#page .top ul li a[data-icon]:after`
font-family	`feather`	`[class\|=event-element] .description .address a:before`
font-size	`1rem`	`body`
font-size	`100%`	`a,body,div,footer,h1,h2,h3,h4,header,html,i,img,label,li,nav,p,section,span,strong,ul,video`
font-size	`3rem`	`h1`
font-size	`2.5rem`	`h2`
font-size	`2rem`	`h3`
font-size	`1.635rem`	`h4`
font-size	`1.375rem`	`p.big`
font-weight	`400`	`body`
font-weight	`600`	`h1,h2,h3,h4`
font-weight	`300`	`p`
font-weight	`500`	`header nav.main-navigation #main-menu .menu-holder ul li a`
font-weight	`700`	`header nav.main-navigation #main-menu .lang-menu ul li a`
font-weight	`600!important`	`\[class^=page-header]\[class_="--page"][class_=case-study] .page-header--case-studycontainerparagraph>\* strong`
font-weight	`lighter`	`.form-lead**text-side ul li p`
line-height	`1.5`	`body`
line-height	`1`	`body`
line-height	`1.29`	`h1,h2,h3,h4`
line-height	`1.4`	`p`
line-height	`29px`	`header nav.main-navigation #main-menu .menu-holder ul li a`
line-height	`34px`	`header nav.main-navigation #main-menu .lang-menu ul li a`
line-height	`1.6`	`header nav.main-navigation #mobile-menu .mobile-wrap .primary-links ul.small li a`
letter-spacing	`-.025rem`	`\[class\|=page-content]\[class_=-saas] section#specs[class\|=ttabs-wrap] .wraps .ttabs .ttab .text span`
letter-spacing	`-.5px`	`[class_=team-element] .title h6`
letter-spacing	`0`	`[class_=team-element] .title h6`
letter-spacing	`-.2px`	`footer#page .bottom .wrap-sitemap .cols p`
color	`#212529`	`body`
color	`#00afd1`	`a`
color	`#637178`	`p`
color	`#fff`	`header nav.main-navigation #main-menu .menu-holder ul li a`
color	`#e9e6ff`	`header nav.main-navigation #main-menu .menu-holder ul li a[data-icon]:before`
color	`hsla(0,0%,100%,.75)`	`header nav.main-navigation #mobile-menu .mobile-wrap .primary-links ul.small li a`
color	`hsla(0,0%,100%,.7)`	`header nav.main-navigation #mobile-menu .mobile-wrap .info-wrap .services \[class\|=service-element]\[class_=small] p`
color	`#f7f6ff`	`header nav.main-navigation #mobile-menu .footer ul li a i`
background-color	`#fff`	`body`
background-color	`transparent`	`a`
background-color	`#f5f7fa`	`header .wrap-menu #menu-responsive .menu-button .bar`
background-color	`#f7f6ff`	`body[class_=page-tpl-home] header:not(.fixed) .wrap-menu .primary-menu ul li[class_=hoverline] a:after`
background-color	`hsla(0,0%,100%,.25)`	`a[class_=hoverline]:after`
background-color	`#3122ab`	`\[class\|=btn]\[class_=-big][class_=-colorone],\[class\|=btn]\[class_=-big][class_=-secondary]`
background-color	`#00afd1`	`\[class\|=btn]\[class_=-big][class_=-colorone]`
background-color	`#f4f5f8`	`\[class\|=page-content]\[class_=-about] section#timeline:after`
border-radius	`1px`	`header .wrap-menu #menu-responsive .menu-button .bar`
border-radius	`0 150px 150px 0`	`\[class\|=page-content]\[class_=-home] section#essential:after`
border-radius	`0 0 0 150px`	`\[class\|=page-content]\[class_=-home] section#enterprise:after`
border-radius	`7px`	`[class\|=input-form] [class_=submit-wrap] button`
border-radius	`5px`	`\[class\|=btn]\[class_=-small]`
border-radius	`50%`	`footer#page .top ul li a[data-icon]:before`
border-radius	`20px`	`\[class\|=page-content]\[class_=-about] section#cta [class\|=ctabox-element] .wrap`
border-radius	`150px`	`\[class\|=page-content]\[class_=-consulting] section#ooo:after`
box-shadow	`0 2px 17px 0 rgba(0,0,0,.19)`	`[class\|=input-form] [class_=submit-wrap] button`
box-shadow	`0 10px 20px transparent`	`\[class\|=btn]\[class_=-line][class_=-white]`
box-shadow	`5px 10px 20px 0 rgba(42,49,53,.19)`	`footer#page .top ul li a[data-icon]:before`
box-shadow	`0 55px 60px 0 rgba(42,49,53,.05)`	`\[class\|=page-content]\[class_=-consulting] section#intro:after`
box-shadow	`0 4px 17px 0 rgba(0,0,0,.13)`	`\[class\|=page-content]\[class_=-consulting] section#features video`
box-shadow	`none`	`button.mfp-arrow,button.mfp-close`
box-shadow	`0 20px 30px 0 rgba(42,49,53,.05)`	`[class_=team-element] .title`
box-shadow	`0 40px 60px 0 rgba(42,49,53,.06)`	`\[class\|=imagehead-element]\[class_=title] [class_=header]`
max-width	`70%`	`[class_=page-header][class_="--page"][class_="--home"] p,[class_=page-header][class_="--pagebig"][class_="--home"] p`
max-width	`50%`	`\[class\|=main-cta]\[class_=-double] .wrap .title`
max-width	`540px`	`.container`
max-width	`720px`	`.container`
max-width	`960px`	`.container`
max-width	`1140px`	`.container`
max-width	`100%`	`body[class_=page-tpl-home] header:not(.fixed) .wrap-menu .primary-menu`
max-width	`90%`	`[class_=page-header][class_="--landing"][class_="--home"] p,[class_=page-header][class_="--page"][class_="--home"] p,[class_=page-header][class_="--pagebig"][class_="--home"] p`
padding	`0`	`[type=button]::-moz-focus-inner,button::-moz-focus-inner`
padding	`0 3px`	`header nav.main-navigation #mobile-menu .languages ul li a`
padding	`0 7px`	`header nav.main-navigation #mobile-menu .footer ul li a`
padding	`100px 0`	`\[class\|=page-content]\[class_=-home] section#services`
padding	`50px 0`	`\[class\|=page-content]\[class_=-home] section#essential .row`
padding	`10px 0`	`\[class\|=box-element]\[class_=-big] .description h3`
padding	`.375rem 0 .5rem`	`\[class\|=box-element]\[class_=-big] .description p`
padding	`2rem 1.875rem 1rem`	`[class\|=service-element] h3`
gap	`20px`	`[class_=page-header][class_="--page"][class_="--home"] .double-buttons .input-form--simple`
gap	`10px`	`.show-products-section--minimal .show-products-sectioncontentnavbar ul`
gap	`50px`	`#features>.container .row,.section-features>.container .row`
gap	`30px`	`.cards-section .row`
gap	`4px`	`.cards-carousel-block**wrapper\_\_item div`
transition	`.4s ease`	`body,body.visible`
transition	`color .4s ease`	`header nav.main-navigation #main-menu .menu-holder ul li a`
transition	`padding-left .4s ease`	`header nav.main-navigation #main-menu .menu-holder ul li.submenu ul.sub-menu li a`
transition	`opacity .4s ease`	`header nav.main-navigation #mobile-menu .languages ul li a:hover`
transition	`margin .4s ease`	`header .wrap-menu #menu-responsive .menu-button .bar-1`
transition	`transform .4s cubic-bezier(.455,.03,.515,.955)`	`header .wrap-menu #menu-responsive .menu-button .bar-1`
transition	`transform .2s cubic-bezier(.455,.03,.515,.955)`	`header .wrap-menu #menu-responsive .menu-button:hover .bar-1`
transition	`margin .15s ease-out,opacity .15s ease-out,transform .15s ease-out .25s`	`header .wrap-menu #menu-responsive.open .menu-button .bar-1`

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

Userbot

Marketing Pages

Product Interfaces

Emails

Userbot

User Onboarding

Userbot

Product Tour

Visual identity

Userbot — design reference

Typography

Colors and surfaces

Components and layout

Responsive rules

Evidence and limitations

Stylesheet sources