Livestorm

Livestorm — design reference

Source: https://livestorm.co/. 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: Object Sans,Object Sans fallback — selector body
• font-family: Inter,Inter fallback,sans-serif — selector .page .hero .assets .badges-and-polls .polls .poll .title[data-v-53e5f057]
• font-size: .75rem — selector .breadcrumb .item a[data-v-12f20a63],.breadcrumb .item p[data-v-12f20a63]
• font-size: 100% — selector button,input,optgroup,select,textarea
• font-size: 1.125rem — selector body
• font-size: 1.5rem — selector .text-2xl
• font-size: 2rem — selector .text-3xl
• font-size: 2.5rem — selector .text-4xl
• font-weight: 400 — selector body
• font-weight: 500 — selector .logo .context-menu .item .tag[data-v-347e9e45]
• font-weight: 600 — selector .button.text[data-v-8d76430c] i
• font-weight: 500!important — selector .content-card .body .h2[data-v-3e37d385]
• line-height: 1rem — selector .breadcrumb .item a[data-v-12f20a63],.breadcrumb .item p[data-v-12f20a63]
• line-height: 1.75rem — selector body
• line-height: 2rem — selector .text-2xl
• line-height: 1 — selector .text-7xl
• line-height: 1.5rem — selector .text-base
• line-height: 1.25rem — selector .text-sm
• line-height: 1.2 — selector .logo .context-menu .item .tag[data-v-347e9e45]
• letter-spacing: -.032px — selector .page .hero .assets .badges-and-polls .polls .poll .title[data-v-53e5f057]
• letter-spacing: -.048px — selector .page .hero .assets .badges-and-polls .polls .poll .title[data-v-53e5f057]
• letter-spacing: -.007px — selector .page .hero .assets .questions .head .h6[data-v-53e5f057]
• letter-spacing: -.009px — selector .page .hero .assets .questions .head .h6[data-v-53e5f057]
• letter-spacing: .002px — selector .page .hero .assets .questions .body .question .upvotes p[data-v-53e5f057]
• letter-spacing: .003px — selector .page .hero .assets .questions .body .question .upvotes p[data-v-53e5f057]
• letter-spacing: -.002px — selector .page .hero .assets .questions .body .question .message p[data-v-53e5f057]

Colors and surfaces

• color: rgb(206 208 208/var(--tw-text-opacity,1)) — selector .breadcrumb.dark .item a[data-v-12f20a63],.breadcrumb.dark .item i[data-v-12f20a63],.breadcrumb.dark .item p[data-v-12f20a63]
• color: rgb(255 255 255/var(--tw-text-opacity,1)) — selector .breadcrumb.dark .item a[data-v-12f20a63]:hover,.breadcrumb.dark .item p[data-v-12f20a63]
• color: rgb(93 109 121/var(--tw-text-opacity,1)) — selector .breadcrumb.light .item a[data-v-12f20a63],.breadcrumb.light .item i[data-v-12f20a63],.breadcrumb.light .item p[data-v-12f20a63]
• color: rgb(11 84 254/var(--tw-text-opacity,1)) — selector .breadcrumb.light .item a[data-v-12f20a63]:hover
• color: rgb(18 38 43/var(--tw-text-opacity,1)) — selector .breadcrumb.light .item p[data-v-12f20a63]
• color: #121a2f85 — selector .text-[#121A2F85],.text-[#121A2F]/[0.52]
• color: #121a2fb8 — selector .text-[#121A2F]/[0.72]
• background-color: transparent — selector button,input:where([type=button]),input:where([type=reset]),input:where([type=submit])
• background-color: rgb(255 255 255/var(--tw-bg-opacity,1)) — selector body
• background-color: rgb(9 19 22/var(--tw-bg-opacity,1)) — selector body.dark

Components and layout

• border-radius: 2rem — selector picture[data-v-9a1665df]
• border-radius: .75rem — selector .logo .context-menu[data-v-347e9e45]
• border-radius: 6px — selector .logo .context-menu .item .tag[data-v-347e9e45]
• border-radius: .5rem — selector .navigation .menu .items .item .pane .inner .content.product .aside .integrations .button[data-v-900b72a7]
• box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow) — selector .logo .context-menu[data-v-347e9e45]
• box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000) — selector .alert button[data-v-6628e674]:focus
• max-width: 640px — selector .container
• max-width: 768px — selector .container
• max-width: 1024px — selector .container
• max-width: 1328px — selector .container
• max-width: 1441px — selector .container
• max-width: 1920px — selector .container
• padding: 0 — selector button,input,optgroup,select,textarea
• padding: .25rem 6px — selector .logo .context-menu .item .tag[data-v-347e9e45]
• gap: .25rem — selector .navigation .menu .items .item .pane .inner .content.enterprise .aside .card p[data-v-900b72a7]
• gap: .5rem — selector .navigation .menu .items .item .pane .inner .content.resources .main .section[data-v-900b72a7]
• gap: .75rem — selector .navigation .menu .items .item .pane .inner .content.resources .main .section .list .item[data-v-900b72a7]
• gap: 1rem — selector .page .hero .assets[data-v-53e5f057]
• gap: 10.59px — selector .page .hero .assets .badges-and-polls .polls[data-v-53e5f057]

Responsive rules

(min-width:768px)
(min-width:640px)
(min-width:1024px)
(min-width:1328px)
(min-width:1441px)
(min-width:1920px)
screen and (max-width:768px)
(min-width:768px)and (max-height:767px)
(min-width:768px)and (min-height:768px)
(min-width:400px)