Help Scout

Help Scout — design reference

Source: https://www.helpscout.com/. 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--mono-code) — selector .Content code,.Content pre
• font-family: var(--font-family--sans) — selector footer.SiteFooter .SiteFooter--column a .Badge.status-badge
• font-family: var(--font-family--default) — selector .QuestionCardInput
• font-family: var(--font-family--hand) — selector .LpSection.use-equal-size-text .LpSection--subhead
• font-family: var(--font-family--mono) — selector .DelightLabsShareCarousel .BentoBoxBlock.uid--1AJfsy7j3GJfQ4OchCx6wj .BentoBoxBlock--Card p
• font-family: GT America,sans-serif — selector .PricingCalculator .left-card .plan-row .plan-select-wrapper .plan-select-display
• font-size: var(--font-size--3XL) — selector .Content h2
• font-size: var(--font-size--2XL) — selector .Content h3
• font-size: var(--font-size--XL) — selector .Content h4:not(.Accordion--title-button-h4)
• font-size: var(--font-size--L) — selector .Content h5
• font-size: var(--font-size--M) — selector .Content h6
• font-size: .9em — selector .Content p>code
• font-size: 13px — selector a.skip-to-content
• font-size: 11px — selector .SiteNav .subnav-drawer .subnav-drawer--items>li a p
• font-weight: var(--font-weight--text) — selector .Content p
• font-weight: var(--font-weight--medium) — selector .Content p b,.Content strong
• font-weight: var(--font-weight--semibold) — selector .SiteNav .subnav-drawer .subnav-drawer--items>li a
• font-weight: var(--font-weight--normal) — selector .SiteNav .subnav-drawer .subnav-drawer--features>li a span,.SiteNav .subnav-drawer .subnav-drawer--items>li a span
• font-weight: var(--font-weight--bold) — selector footer.SiteFooter .SiteFooter--column h4
• font-weight: 400 — selector .StaffingCalculatorFormResultsHeader h6
• font-weight: 500 — selector .StaffingCalculatorFormResultsHeader h6 strong
• line-height: var(--SiteNav--pill-height) — selector .SiteNav .hamburger-button,.SiteNav .nav-item>a,.SiteNav .nav-item>button
• line-height: 30px — selector .SiteNav .main-nav>.nav-item>a,.SiteNav .main-nav>.nav-item>button
• line-height: var(--line-height--tight) — selector footer.SiteFooter .SiteFooter--column a,footer.SiteFooter .SiteFooter--column h4,footer.SiteFooter .SiteFooter--column span:not(.Badge)
• line-height: var(--line-height--relaxed) — selector footer.SiteFooter .SiteFooter--column a,footer.SiteFooter .SiteFooter--column h4,footer.SiteFooter .SiteFooter--column span:not(.Badge)
• line-height: 1.125 — selector .AiCustomerFirst h1
• line-height: var(--line-height--blockquote) — selector .QuestionCard .QuestionCardContent,.QuestionCard .QuestionCardInput
• line-height: 48px — selector .ExportModalContent .actions .Button:last-of-type
• line-height: var(--JobTitleField--height) — selector .JobTitleField .field-wrapper input,.JobTitleField .field-wrapper span
• letter-spacing: .08em — selector footer.SiteFooter .SiteFooter--column a .Badge.status-badge
• letter-spacing: -.04em — selector .AiCustomerFirst h1
• letter-spacing: var(--letter-spacing--tight) — selector .AiCustomerFirst .text-container p
• letter-spacing: var(--letter-spacing--text) — selector .QuestionCard .QuestionCardContent,.QuestionCard .QuestionCardInput
• letter-spacing: -.02em — selector .FoundationsWebinarHeroContent h1
• letter-spacing: var(--letter-spacing--overline) — selector .InterviewBuilderContentBody h4
• letter-spacing: var(--letter-spacing--tighter) — selector .LpSection.use-equal-size-text p
• letter-spacing: var(--letter-spacing--widest) — selector .DelightLabsShareCarousel .BentoBoxBlock.uid--1AJfsy7j3GJfQ4OchCx6wj .BentoBoxBlock--Card h3

Colors and surfaces

• color: var(--Content--headlines-color) — selector .Content h1,.Content h2,.Content h3,.Content h4,.Content h5,.Content h6
• color: var(--Content--text-color) — selector .Content p
• color: var(--Content--link-color) — selector .Content a:not(.Cta),.Content button:not(.submit-button):not(.Accordion--title-button)
• color: var(--Content--link-color-hovered) — selector .Content a:not(.Cta):hover,.Content button:not(.submit-button):not(.Accordion--title-button):hover
• color: var(--Content--text-dark-color) — selector .Content p b,.Content strong
• color: var(--color--clay-1100) — selector .SiteNav .hamburger-button,.SiteNav .nav-item>a,.SiteNav .nav-item>button
• color: var(--color--charcoal-1100) — selector .SiteNav .subnav-drawer .subnav-drawer--items>li a
• color: var(--color--blue-600) — selector .SiteNav .subnav-drawer .subnav-drawer--items>li a:focus-within,.SiteNav .subnav-drawer .subnav-drawer--items>li a:hover
• background-color: transparent — selector .SiteNav .nav-item>a:before,.SiteNav .nav-item>button:before
• background-color: var(--color--clay-100) — selector .SiteNav .nav-item:focus-within>a:before,.SiteNav .nav-item:focus-within>button:before,.SiteNav .nav-item:hover>a:before,.SiteNav .nav-item:hover>button:before
• background-color: var(--color--blue-100) — selector .SiteNav .actions-nav .primary-action>a:before,.SiteNav .actions-nav .primary-action>button:before
• background-color: var(--color--blue-200) — selector .SiteNav .actions-nav .primary-action:focus-within>a:before,.SiteNav .actions-nav .primary-action:focus-within>button:before,.SiteNav .actions-nav .primary-action:hover>a:before,.SiteNav .actions-nav .primary-action:hover>button:before
• background-color: var(--color--clay-200) — selector .SiteNav.is-expanded .main-nav .nav-item.has-visible-drawer>button:before
• background-color: var(--color--basics-white) — selector footer.SiteFooter .SiteFooter--column a .Badge.status-badge
• background-color: var(--color--charcoal-200) — selector .Search--CloseButton:hover

Components and layout

• border-radius: var(--border-radius--S) — selector .Content code,.Content pre
• border-radius: 0 — selector .Content pre code
• border-radius: 30px — selector .SiteNav .nav-pill
• border-radius: 10px — selector .SiteNav .subnav-drawer .subnav-drawer--features>li.has-image a
• border-radius: var(--border-radius--M) — selector .Modal--Card
• border-radius: 50% — selector .StaffingCalculatorFormContent button:not(.submit-button)
• border-radius: 6px — selector .StaffingCalculatorHeroCalculatorContainer
• border-radius: 4px — selector .QuestionCard
• box-shadow: var(--elevation--L) — selector .SiteNav .nav-pill:focus-within,.SiteNav .nav-pill:hover,.SiteNav.is-minimized .nav-pill
• box-shadow: 0 -1px 0 0 var(--color--clay-200) — selector .SiteNav .subnav-drawer .subnav-drawer--features>li.last-text-only
• box-shadow: none — selector .SiteNav .subnav-drawer .subnav-drawer--features>li.last-text-only
• box-shadow: var(--focus-link--onCharcoal-1200) — selector footer.SiteFooter .SiteFooter--column a:focus-visible
• box-shadow: var(--elevation--L--on-dark) — selector .Modal--Card
• box-shadow: var(--elevation--XL) — selector .StaffingCalculatorHeroCalculatorContainer
• box-shadow: 0 3px 10px rgba(0,38,81,.05) — selector .QuestionCard
• box-shadow: var(--elevation--XS) — selector .QuestionCard
• max-width: 100% — selector .Content pre
• max-width: none — selector .ContentBreakout .container
• max-width: 38% — selector .RuhRohButtons .button
• max-width: max(837px,var(--container-width)/12_8 - var(--spacing--M)_4/12) — selector .CompanyPageHeroContent
• max-width: var(--text-max-width) — selector .CompanyPageHeroContent p
• max-width: 180px — selector .DEIPageBarChart\_\_title select
• max-width: 47px — selector .StaffingCalculatorFormContent button:not(.submit-button)
• max-width: 397px — selector .StaffingCalculatorFormResultsHeader h2,.StaffingCalculatorFormResultsHeader h6
• padding: var(--spacing--base-1) — selector .Content code,.Content pre
• padding: 0 var(--spacing--base-0-5) — selector .Content p>code
• padding: 0 — selector .Content pre code
• padding: .2em var(--spacing--XS) — selector a.skip-to-content
• padding: var(--spacing--S) — selector .SiteNav--mobile-logo
• padding: 0 calc(25px - var(--SiteNav--pill-gap)/2) 0 25px — selector .SiteNav .nav-pill
• padding: 0 calc(8.64px + var(--SiteNav--pill-gap)/2) — selector .SiteNav .hamburger-button,.SiteNav .nav-item>a,.SiteNav .nav-item>button
• padding: 13.5px 25px 18.5px — selector .SiteNav .subnav-drawer
• gap: 0 — selector .SiteNav .nav-pill
• gap: var(--SiteNav--pill-gap) — selector .SiteNav .nav-logo
• gap: 0 20px — selector .SiteNav .subnav-drawer .subnav-drawer--items
• gap: 0 13px — selector .SiteNav .subnav-drawer .subnav-drawer--items>li a
• gap: 20px — selector .SiteNav .subnav-drawer .subnav-drawer--features>li.has-image a
• gap: 8px — selector .SiteNav .subnav-drawer .subnav-drawer--features>li.text-only a div
• gap: 13px 20px — selector .SiteNav .product .subnav-drawer .subnav-drawer--items
• gap: 22px — selector .SiteNav .product .subnav-drawer .subnav-drawer--items>li a
• transition: var(--SiteNav--transition-opacity),var(--SiteNav--transition-translate) — selector a.skip-to-content
• transition: width var(--SiteNav--transition-length-transform) var(--SiteNav--easing) — selector .SiteNav .nav-logo
• transition: background-color .2s — selector .SiteNav .nav-item>a:before,.SiteNav .nav-item>button:before
• transition: margin-right var(--SiteNav--transition-length-transform) var(--SiteNav--easing),width var(--SiteNav--transition-length-transform) var(--SiteNav--easing) — selector .SiteNav .nav-logo
• transition: opacity var(--SiteNav--transition-length-opacity) var(--SiteNav--easing) — selector .SiteNav .nav-logo .nav-logo--mark
• transition: var(--SiteNav--transition-opacity) — selector .SiteNav .hamburger-button span
• transition: opacity .2s — selector .Modal--CloseButton .Icon
• transition: padding-bottom .125s ease-in-out — selector .AiCustomerFirst .text-container a

Responsive rules

(min-width:768px)
(max-width:767px)
(hover:hover)
(hover:hover)and (min-width:768px)
(max-width:479px)
(min-width:480px)
(min-width:1024px)
(min-width:1600px)
(min-width:1124px)
(min-width:560px)
(hover:none)
(min-width:768px)and (hover:none)
(min-width:1020px)
(max-width:768px)
(min-width:375px)
(min-width:445px)
(min-width:1200px)
(min-width:1220px)
(max-height:710px)
(prefers-contrast:more)
(min-width:708px)
(min-width:635px)
(min-width:2560px)
(min-width:1400px)
(prefers-reduced-motion:reduce)