Teachable

Teachable — design reference

Source: https://www.teachable.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: Arial,sans-serif — selector body
• font-family: var(--font-family--body) — selector body
• font-family: var(--font-family--heading) — selector h1
• font-size: 2em — selector h1
• font-size: 14px — selector body
• font-size: 38px — selector h1
• font-size: 32px — selector h2
• font-size: 24px — selector h3
• font-size: 18px — selector h4
• font-size: 12px — selector h6
• font-weight: 700 — selector h1,h2,h3,h4,h5,h6
• font-weight: var(--font-weight--normal) — selector body
• font-weight: var(--_typography---h1--h1-font-weight) — selector h1
• font-weight: var(--_typography---h2--h2-font-weight) — selector h2
• font-weight: var(--_typography---h3--h3-font-weight) — selector h3
• font-weight: var(--font-weight--xbold) — selector h4
• font-weight: var(--_typography---h5--h5-font-weight) — selector h5
• line-height: 20px — selector body
• line-height: 44px — selector h1
• line-height: 36px — selector h2
• line-height: 30px — selector h3
• line-height: 24px — selector h4
• line-height: 18px — selector h6
• line-height: var(--_typography---body--body-line-height) — selector body
• letter-spacing: var(--_typography---body--body-letter-spacing) — selector body
• letter-spacing: var(--_typography---h1--h1-letter-spacing) — selector h1
• letter-spacing: var(--_typography---h2--h2-letter-spacing) — selector h2
• letter-spacing: var(--_typography---h3--h3-letter-spacing) — selector h3
• letter-spacing: var(--_typography---h5--h5-letter-spacing) — selector h5
• letter-spacing: var(--_typography---h6--h6-letter-spacing) — selector h6

Colors and surfaces

• color: var(--neutral--black) — selector [text-selection='reverse'] ::selection
• color: #333 — selector body
• color: var(--_theme---text-color--text-dark) — selector body
• color: var(--_theme---link-color--primary) — selector a
• background-color: var(--neutral--white) — selector [text-selection='reverse'] ::selection
• background-color: #0000 — selector a
• background-color: #fff — selector body

Components and layout

• border-radius: var(--_sizes---border-radius--medium) — selector .container-large.is-beige
• border-radius: var(--_sizes---border-radius--full) — selector .button-sso
• border-radius: .3rem — selector .home-hero-tabs_ui-img-wrp-1
• border-radius: .2rem — selector .home-hero-tabs_ui-img-wrp-1
• 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
• max-width: var(--_sizes---container--small) — selector .container-small
• max-width: var(--_sizes---container--large) — selector .container-large
• max-width: var(--_sizes---container--medium) — selector .container-medium
• max-width: 75rem — selector .container-medium.is-keep-more
• padding: 0 — selector button::-moz-focus-inner,input::-moz-focus-inner
• padding: var(--_layout---spacing--large) — selector .container-large.is-beige
• padding: 1rem 1.5rem — selector .button-sso
• padding: .5rem 1.25rem — selector .button-sso.is-small
• gap: 8px — selector .slider-component .swiper-pagination
• gap: 0rem — selector .nav_menu
• transition: transform 0.2s ease — selector .arrow-btn .arrow-btn\_icon

Responsive rules

screen and (max-width: 991px) 
screen and (max-width:1920px) 
screen and (max-width:991px) 
screen and (max-width: 1145px) 
(max-width: 1320px) 
(max-width: 992px) 
screen and (min-width: 992px) 
screen and (max-width:991px)
screen and (max-width:767px)
screen and (max-width:479px)
(min-width:768px)