Userbot

Userbot — design reference

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)