Drip

Drip — design reference

Source: https://www.drip.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: "GT Walsheim",Tahoma,"Helvetica Neue",sans-serif — selector body
• font-family: "Styrene A",Verdana,"Helvetica Neue",sans-serif — selector .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6
• font-size: 100% — selector button,input,select,textarea
• font-size: 16px — selector body
• font-size: 1.728em — selector .h1,h1
• font-size: 48px — selector .h1--display,.mdi-48px.mdi:before,h1--display
• font-size: 69px — selector .h1--display,h1--display
• font-size: 1.44em — selector .h2,h2
• font-size: 1.2em — selector .h3,.large,h3
• font-weight: 400 — selector .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6
• line-height: normal — selector button,input
• line-height: 1.44 — selector body
• line-height: 1.23 — selector .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6
• line-height: 22px — selector .btn--sm
• line-height: 1 — selector .btn--icon
• line-height: 1.6 — selector .page-section--article-content li,.page-section--article-content ol,.page-section--article-content p,.page-section--article-content ul
• letter-spacing: 0 — selector .h1,.h2,h1,h2

Colors and surfaces

• color: currentColor — selector a
• color: rgba(0,0,0,.9) — selector .bullets--checklist>li strong,.bullets--numbered>li strong,body
• color: #a819a8 — selector a:focus,a:hover
• color: #f224f2 — selector .btn--underline:focus,.btn--underline:hover
• background-color: #fff — selector .btn--white:focus,.btn--white:hover
• background-color: transparent — selector .btn--underline:focus,.btn--underline:hover
• background-color: #f891f8 — selector .page-section--article-content .btn-magenta.btn--disabled,.page-section--article-content .btn-magenta[disabled]
• background-color: #fdeeff — selector .stat-card:first-child
• background-color: #e5fff2 — selector .stat-card:nth-child(2)

Components and layout

• border-radius: 100% — selector .btn--loading:after,.btn--loading:before
• border-radius: 500px — selector .btn--icon
• border-radius: 2px — selector .review**card
• box-shadow: 0 3px 5px -1px rgba(0,0,0,.15),0 5px 8px 0 rgba(0,0,0,.105),0 1px 14px 0 rgba(0,0,0,.09) — selector .form-card**card-container--has-shadow
• box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12) — selector .card
• box-shadow: none — selector .card\__container--resource .card
• box-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12) — selector .card--is-hoverable .card.card--has-focus,.card--is-hoverable .card:focus,.card--is-hoverable .card:hover,a.card.card--has-focus,a.card:focus,a.card:hover
• max-width: none !important — selector .dnd_area-row-0-force-full-width-section > .row-fluid
• max-width: 1096px !important — selector .dnd_area-row-1-max-width-section-centering > .row-fluid
• max-width: 1102px !important — selector .dnd_area-row-4-max-width-section-centering > .row-fluid
• max-width: 1100px !important — selector .dnd_area-row-10-max-width-section-centering > .row-fluid
• max-width: 1440px !important — selector .dnd_area-row-11-max-width-section-centering > .row-fluid
• max-width: 650px !important — selector .dnd_area-row-12-max-width-section-centering > .row-fluid
• max-width: 1280px !important — selector .dnd_area-row-14-max-width-section-centering > .row-fluid
• max-width: 640px — selector .hero-banner--two-column-full-width>.row-fluid>[class\*=span]:first-child:nth-last-child(2)
• padding: 0px — selector #hs_cos_wrapper_module_1686059582456 .btn-container
• padding: 0 — selector button::-moz-focus-inner,input::-moz-focus-inner
• padding: 2px 10px — selector .btn--sm
• padding: 7px — selector .btn--icon
• padding: 0 12px — selector .review**card-container
• gap: 0 40px — selector .nav**menu-product-container
• gap: 0 0 — selector .nav**menu-learn-container
• gap: 15px — selector .drip-hero**cta
• gap: 110px — selector .drip-hero
• gap: 24px — selector .drip-hero**mobile-icons
• gap: 10px — selector .homepage-hero-animation**cta
• gap: 5px — selector .homepage-hero-animation**cta-wrap
• transition: top .1s cubic-bezier(.33333, 0, .66667, .33333) .16s,transform .13s cubic-bezier(.215, .61, .355, 1) .25s — selector .nav--opened .nav**mobile-toggle-hamburger-inner:before
• transition: top .2s cubic-bezier(.33333, 0, .66667, .33333),opacity .1s linear .22s — selector .nav--opened .nav**mobile-toggle-hamburger-inner:after
• transition: transform .3s — selector .nav**main-container
• transition: opacity .15s — selector .nav**menu-back-btn
• transition: opacity .15s .15s — selector .nav--menu-active .nav**menu-back-btn
• transition: box-shadow .2s — selector .card--is-hoverable .card,.footer\_\_primary-cta-form,a.card

Responsive rules

(max-width: 568px)
(min-width:768px) 
(max-width: 580px) 
only screen and (max-width:767px) 
screen and (prefers-reduced-motion:reduce)
only screen and (min-width:960px)
only screen and (min-width:640px)
only screen and (min-width:767px)
(min-width:768px)
only screen and (max-width:639px)
only screen and (min-width:640px) and (max-width:959px)
only screen and (min-width:960px) and (max-width:1279px)
only screen and (min-width:1280px) and (max-width:1919px)
only screen and (min-width:1920px)
only screen and (min-width:1280px)
only screen and (min-width:320px)
only screen and (min-width:1080px)
(max-width:767px)
(min-width:768px) and (max-width:1139px)
(min-width:1280px)
screen and (min-width:1380px)
(min-width:640px)
(min-width:960px)
only screen and (min-width:688px)
only screen and (min-width:1032px)