Segment

Segment — design reference

Source: https://www.twilio.com/en-us/segment. 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: var(--font-family-text) — selector .search-results-body**no-results-cards--card h1
• font-family: var(--font-family-mono) — selector .code-snippet pre[class_=language-].line-numbers
• font-family: var(--font-family-default) — selector .card-event .card-title
• font-family: TwilioSansText,sans-serif — selector .product-recommendertake-look-btn
• font-family: TwilioSansMono,sans-serif — selector .product-recommender-modalproduct-card-link
• font-family: Whitney SSm,sans-serif — selector .cmp-quizheading
• font-size: 1em — selector code[class=language-],pre[class=language-]
• font-size: 3.2rem — selector .h1,h1
• font-size: 4.8rem — selector .h1,h1
• font-size: 2.8rem — selector .h2,h2
• font-size: 4rem — selector .h2,h2
• font-size: 2.4rem — selector .h3,h3
• font-size: 1.8rem — selector .h4,h4
• font-size: 2rem — selector .h4,h4
• font-weight: 700 — selector .h1,h1
• font-weight: 600 — selector .h6,h6
• font-weight: 500 — selector .alert-cmp a.alert-cmplink
• font-weight: var(--font-weight-semi-bold) — selector .ais-Hits-title
• font-weight: var(--font-weight-medium) — selector .button
• font-weight: var(--font-weight-book) — selector .twilio-catalog-similar-integrations .integration-cardbeta-tag
• font-weight: 400 — selector .twilio-catalog-introductionsdescription p
• font-weight: var(--font-weight-titles) — selector .search-results-bodyno-results-cards--card h1
• line-height: 1.5 — selector code[class=language-],pre[class=language-]
• line-height: 4.4rem — selector .h1,h1
• line-height: 6rem — selector .h1,h1
• line-height: 3.6rem — selector .h2,h2
• line-height: 5.2rem — selector .h2,h2
• line-height: 3.2rem — selector .h3,h3
• line-height: 2.8rem — selector .h4,h4
• line-height: 2.4rem — selector .h5,h5
• letter-spacing: -.03em — selector .h1,h1
• letter-spacing: -.02em — selector .h2,h2
• letter-spacing: -.04em — selector .search-results-bodyno-results-cards--card h1
• letter-spacing: .01em — selector .cmp-events-listcontrolstags-displayitem
• letter-spacing: .02em — selector .footer-title
• letter-spacing: -.08rem — selector .landing-hero-componentheadline h1
• letter-spacing: -.1rem — selector .landing-hero-componentheadline h1
• letter-spacing: -.03rem — selector .platform-storyintro-title

Colors and surfaces

• color: #fff — selector code[class_=language-],pre[class\*=language-]
• color: rgb(var(--accordion-text-color)) — selector .accordion-v2**subtitle,.accordion-v2**title
• color: rgb(var(--color-white)) — selector .alert-cmp**richtext .richtext a
• color: rgb(var(--color-blue-30)) — selector .alert-cmp**richtext .richtext a:hover
• color: rgb(var(--color-blue-200)) — selector .alert-cmp a.alert-cmp**link:focus,.alert-cmp a.alert-cmp**link:hover
• color: rgb(var(--color-blue-500)) — selector .alert-cmp a.alert-cmp**link:active
• color: rgb(var(--banner-component-eyebrow-color)) — selector .cmp-banner-hero**polygon**headline\_\_eyebrow
• background-color: rgb(var(--color-gray-50)) — selector padding-left: 24px; @media screen and (max-width: 991px)
• background-color: transparent — selector .card-video .play-icon
• background-color: rgb(var(--color-twilio-red)) — selector .cmp-banner-hero:before
• background-color: rgb(var(--button-background)) — selector .button[class_=button-]
• background-color: currentColor — selector .button-icon.console-arrow:after
• background-color: rgb(var(--color-blue-500)) — selector .button.hybrid:hover .button-text .hybrid**icon
• background-color: rgb(var(--color-blue-800)) — selector .button.hybrid:active .button-text .hybrid**icon,.button.hybrid:focus-visible .button-text .hybrid**icon
• background-color: rgb(var(--color-gray-40)) — selector .button.hybrid[disabled] .button-text .hybrid**icon

Components and layout

• border-radius: .5em — selector pre[class_=language-]
• border-radius: var(--radius-2x-large) — selector .button
• border-radius: var(--radius-base) — selector .button.link
• border-radius: 100% — selector .button.hybrid .button-text .hybrid**icon
• border-radius: var(--radius-large) — selector .twilio-catalog-similar-integrations .integration-card
• border-radius: .5rem — selector .twilio-catalog-similar-integrations .integration-card**beta-tag
• border-radius: var(--radius-extra-large) — selector .twilio-catalog-search-results a.ais-Hits-links
• box-shadow: inset 1px 1px .5em #000 — selector pre[class_=language-]
• box-shadow: none — selector background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--s
• box-shadow: inset 0 0 0 var(--border-light) rgb(var(--button-border)) — selector .button[class_=button-]
• box-shadow: 0 3rem 6rem -2.4rem rgba(0,0,0,.1) — selector .twilio-catalog-similar-integrations .integration-card
• box-shadow: 0 .3rem .6rem rgba(0,0,0,.02),0 1rem 1.9rem rgba(7,14,74,.09),0 4.1rem 1.6rem -3.9rem rgba(53,36,70,.05) — selector .twilio-catalog-similar-integrations .integration-card:hover
• box-shadow: 0 0 0 .1rem rgb(var(--color-gray-60)) — selector .filter-category-select-box**container .filter-category-select-box:focus
• box-shadow: var(--shadow-large) — selector .card-event:before
• box-shadow: inset 0 -.1rem 0 rgb(var(--color-gray-100)) — selector .lnav-container
• max-width: 100% — selector align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg
• max-width: calc(100% - var(--spacing-size-3)) — selector .twilio-catalog-similar-integrations .integration-card**image img
• max-width: 13.6rem — selector .twilio-catalog-similar-integrations .integration-card**image img
• max-width: 92.8rem — selector .twilio-catalog-search .catalog-hero-title h1,.twilio-catalog-search .catalog-hero-title p
• max-width: 3.2rem — selector .code-snippet-button svg
• max-width: 140rem — selector .landing-hero-component**content
• max-width: 99.6rem — selector .landing-hero-component**headline
• max-width: 63.3rem — selector .landing-hero-component**card
• padding: 24px — selector padding: 0; @media screen and (min-width: 992px)
• padding: 1em — selector pre[class_=language-]
• padding: 0 — selector background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--s
• padding: var(--button-padding-y,var(--spacing-size-1)) var(--button-padding-x,var(--spacing-size-4)) — selector .button[class_=button-]
• padding: .4rem — selector .button-icon.console-arrow:before
• padding: 1.8rem — selector .twilio-catalog-similar-integrations .integration-card
• padding: .5rem .8rem .4rem — selector .twilio-catalog-similar-integrations .integration-card**beta-tag
• padding: var(--spacing-size-3) — selector .twilio-catalog-similar-integrations .integration-card**arrow
• gap: 16px — selector padding: 24px; height: fit-content; .layout-column
• gap: var(--spacing-size-1) — selector .search-results-total p
• gap: var(--spacing-size-3) — selector .cmp-banner-hero**polygon**headline
• gap: .6rem — selector .cmp-blog-search-results-total p
• gap: var(--spacing-size-1,.8rem) — selector .breadcrumb-nav--spaced
• gap: .3rem — selector .button-icon.console-arrow
• gap: var(--spacing-size-2) — selector .button.button-product-recommender .button-text
• gap: 3rem — selector .twilio-catalog-similar-integrations .integration-card
• transition: fill .3s ease-in-out — selector .play-icon-svg path
• transition: background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out,-webkit-box-shadow .3s ease-in-out — selector .button
• transition: background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out — selector .button
• transition: background-color .3s ease-in-out,color .3s ease-in-out,border-color .3s ease-in-out,box-shadow .3s ease-in-out,-webkit-box-shadow .3s ease-in-out — selector .button
• transition: -webkit-transform .3s ease-in-out — selector .button-icon.console-arrow:after,.button-icon.console-arrow:before
• transition: transform .3s ease-in-out — selector .button-icon.console-arrow:after,.button-icon.console-arrow:before
• transition: transform .3s ease-in-out,-webkit-transform .3s ease-in-out — selector .button-icon.console-arrow:after,.button-icon.console-arrow:before
• transition: height .3s ease-in-out,width .3s ease-in-out,opacity .3s ease-in-out — selector .button.button-product-recommender:before

Responsive rules

screen and (max-width: 991px) 
screen and (min-width: 992px) 
(max-width: 991px) 
(min-width:62em)
(min-width:48em)
(max-width:61.98em)
(min-width:30em)
(max-width:47.98em)
(prefers-reduced-motion:reduce)
(max-width:29.98em)
(max-width:83.98em)
print
(min-width:100em)
(min-width:84em)
(min-width:48em)and (max-width:61.98em)
(min-width:62em)and (max-width:83.98em)
print and (min-width:62em)
(min-width:62em)and (min-width:48em)
(width <= 30em)
(width > 30em)
(prefers-reduced-motion)
(hover:hover)and (pointer:fine)
(prefers-reduced-motion:reduce)and (min-width:62em)
(min-width:62em)and (height <= 48em)
(min-width:84em)and (height <= 52em)