Pricing

Sendinblue

sendinblue.com

More than Just Email Marketing‎

Mailing4 Websites
Search Sendinblue screensVisit website

Websites 4

All websites
Pro1 more websites from SendinblueUnlock every screen, flow and Figma design with SaaSFrame Pro.See plans
Index of all 4 Sendinblue websites examples

Design reference

Sendinblue — design reference

Source: https://www.brevo.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(--brand-typo_font-family--secondary_regular) — selector .enterprise body
  • font-family: var(--brand-typo_font-family--primary_semibold) — selector .enterprise h1,.enterprise h2,.enterprise h3,.enterprise h4,.enterprise h5
  • font-family: var(--brand-typo_font-family--primary_medium) — selector .dist_marketing-accordion**heading**J_Az3
  • font-family: var(--brand-typo_font-family--secondary_bold) — selector .Default_marketing-default-hero**text**n2eF4 b,.Default_marketing-default-hero**text**n2eF4 strong
  • font-size: var(--brand-typo_text-4-font-size) — selector .enterprise body
  • font-size: 56px — selector .enterprise h1
  • font-size: 80px — selector .enterprise h1.stats
  • font-size: 48px — selector .enterprise h2
  • font-size: 32px — selector .enterprise h4
  • font-size: 12px — selector .enterprise .text--12
  • font-size: 14px — selector .enterprise .text--14
  • font-size: 16px — selector .enterprise .text--16
  • font-weight: var(--brand-typo_font-weight--regular) — selector .enterprise body
  • font-weight: 700 — selector .enterprise h1,.enterprise h2,.enterprise h3,.enterprise h4,.enterprise h5
  • font-weight: 300 — selector .enterprise .text--regular
  • font-weight: 400 — selector .enterprise .text--medium
  • font-weight: 600 — selector .enterprise .text-bold
  • font-weight: 900 — selector .enterprise .text-bolder
  • font-weight: var(--brand-typo_font-weight--semibold,600) — selector .dist_marketing-accordion**heading**J_Az3
  • font-weight: 500 — selector .dist_marketing-header-mobile**list-item**iHRCD a:not([disabled])
  • line-height: var(--brand-typo_text-3-line-height) — selector .enterprise body
  • line-height: var(--brand-typo_heading-3-line-height,32px) — selector .dist_marketing-accordion**heading**J_Az3
  • line-height: var(--brand-typo_heading-4-line-height,40px) — selector .dist_marketing-accordion**heading**J_Az3
  • line-height: 24px — selector .styles_subtitle**HZ8fu
  • line-height: 70px — selector .styles_carbonOutputTitleZfk0h
  • line-height: 160% — selector .stylescarbonOutputTitleZfk0h

Colors and surfaces

  • color: var(--marketing-forest-green-600) — selector .enterprise a:hover,.enterprise a:hover.text--grey
  • color: #fff — selector .enterprise .text--white
  • color: var(--marketing-charcoal-grey-600) — selector .enterprise .text--grey
  • color: var(--marketing-forest-green-800) — selector .enterprise .text--gold:hover,.enterprise .text--grey.cursor-pointer:hover
  • color: var(--marketing-forest-green-600,#0b996e) — selector .distmarketing-accordionheadingJAz3
  • color: var(--marketing-charcoal-grey-900,#1b1b1b) — selector .distmarketing-accordion--isProductrbhd9 .distmarketing-accordionheadingJAz3,.distmarketing-accordion--isProductrbhd9 .distmarketing-accordionpanel9DiOL
  • color: var(--marketing-white,#fff) — selector .distmarketing-btn-lightQOvFK
  • color: var(--marketing-forest-green-800,#006a43) — selector .distmarketing-btn-lightQOvFK:not([disabled]).distmarketing-btn-light--selected0aX9p
  • background-color: #fff — selector .enterprise .aztec button>div
  • background-color: var(--marketing-black) — selector .enterprise .white button>div
  • background-color: var(--marketing-forest-green-800,#006a43) — selector .distmarketing-btn-lightQOvFK
  • background-color: var(--marketing-white,#fff) — selector .dist_marketing-btn-light**QOvFK:not([disabled]).dist_marketing-btn-light--selected**0aX9p
  • background-color: var(--marketing-charcoal-grey-900,#1b1b1b) — selector .distmarketing-btn-light--black9lWNH
  • background-color: var(--marketing-sky-blue-800,#2676c0) — selector .distmarketing-btn-light--sky-blueJ47rP
  • background-color: transparent — selector .distmarketing-btn-lightvariant-ghostjwpwh
  • background-color: var(--marketing-mint-green-100,#f9fff6) — selector .distmarketing-btn-lightvariant-ghostjwpwh:not([disabled]).distmarketing-btn-lightvariant-ghost--selectedGBnnK,.distmarketing-btn-lightvariant-ghostjwpwh:not([disabled]):active,.distmarketing-btn-lightvariant-ghostjwpwh:not([disab

Components and layout

  • border-radius: var(--brand-rounded-x4,1rem) — selector .distmarketing-btnT7nAD
  • border-radius: var(--brand-rounded-x3,.75rem) — selector .distmarketing-btn--sm2TIC
  • border-radius: var(--brand-rounded-x6,1.5rem) 0 — selector .paginationpaginationcategory-btnrhFu9
  • border-radius: var(--brand-rounded-x2,.5rem) — selector .distmarketing-document-card**DyR_6
  • border-radius: var(--brand-rounded-x1,.25rem) — selector .dist_marketing-document-card**DyR6:hover .distmarketing-document-card**icon**CwhIG
  • border-radius: var(--brand-spacing4,1rem) — selector .distmarketing-text-block**pvdPo
  • border-radius: var(--brand-rounded-x12,3rem) — selector .dist_marketing-testimonial**text--with_svgHj3k8
  • border-radius: var(--brand-rounded-x10,2.5rem) 0 — selector .distmarketing-testimonialtext--withoutsvg2MvHq
  • box-shadow: 0 4px 15px hsla(0,0%,51%,.2) — selector .enterprise .card-shadow
  • box-shadow: 0 2px 4px -2px rgba(27,27,27,.1),0 4px 8px -2px rgba(27,27,27,.14) — selector .distmarketing-btnT7nAD
  • box-shadow: none — selector .distmarketing-btn--disabledOxW56,.distmarketing-btnT7nAD:disabled
  • box-shadow: inset -1px -3px 7.8px 0 rgba(27,27,27,.25),inset 1px 3px 8px 0 hsla(0,0%,100%,.2),0 4px 8px -2px rgba(27,27,27,.14),0 2px 4px -2px rgba(27,27,27,.1) — selector .distmarketing-btn-lightQOvFK
  • box-shadow: inset -1px -3px 8px 0 rgba(27,27,27,.25),inset 1px 3px 8px 0 rgba(27,27,27,.25),0 4px 8px -2px rgba(27,27,27,.14),0 2px 4px -2px rgba(27,27,27,.1) — selector .distmarketing-btn-lightQOvFK:not([disabled]):active
  • box-shadow: 0 1px 2px 0 rgba(27,27,27,.08) — selector .distmarketing-btn-lightvariant-ghostjwpwh:not([disabled]).distmarketing-btn-lightvariant-ghost--selectedGBnnK,.distmarketing-btn-lightvariant-ghostjwpwh:not([disabled]):active,.distmarketing-btn-lightvariant-ghostjwpwh:not([disab
  • box-shadow: 0 0 0 1px var(--marketing-forest-green-800,#006a43),0 2px 4px 0 rgba(27,27,27,.1),0 4px 8px 0 rgba(27,27,27,.14) — selector .distmarketing-btn-lightvariant-secondaryewg7c:not([disabled]).distmarketing-btn-lightvariant-secondary--selectedE7dK,.distmarketing-btn-lightvariant-secondaryewg7c:not([disabled]):active,.distmarketing-btn-lightvariant-secondary
  • max-width: 1200px — selector .enterprise .container
  • max-width: 100% — selector .distmarketing-btnT7nAD
  • max-width: 20ch — selector .distmarketing-btn-ellipsisIeI9p
  • max-width: 300px — selector .distmarketing-headercontent-text--figureO8Ue
  • max-width: 1260px — selector .stylescontainerPSmH
  • max-width: 1536px — selector .distmarketing-containerHHue
  • max-width: 600px — selector .distmarketing-ctaheadinglP6DM,.distmarketing-ctasub-headingWtArf
  • max-width: 760px — selector .distmarketing-ctaheadinglP6DM,.distmarketing-ctasub-headingWtArf
  • padding: .625rem var(--brand-spacing4,1rem) — selector .distmarketing-btnT7nAD
  • padding: 0 — selector .distmarketing-btnsr-onlyTJDzR
  • padding: calc(var(--brand-spacing2, .5rem) - 2px) var(--brand-spacing4,1rem) — selector .distmarketing-btn--sm2TIC
  • padding: .5rem var(--brand-spacing4,1rem) — selector .distmarketing-btn--mdDSDPH
  • padding: calc(var(--brand-spacing5, 1.25rem) - 2px) var(--brand-spacing4,1rem) — selector .distmarketing-btn--lg09PM4
  • padding: var(--brand-spacing2,.5rem) — selector .dist\_marketing-btn--iconalone--sm5NbCU
  • padding: .625rem — selector .distmarketing-btn--iconalone--md5SCb9
  • padding: 1.25rem — selector .distmarketing-btn--iconalone--lgxZhma
  • gap: 10px — selector .paginationpaginationcategory-btnrhFu9
  • gap: var(--brand-spacing3,.75rem) — selector .distmarketing-document-cardDyR_6
  • gap: .125rem — selector .dist_marketing-document-cardcontentPIQen
  • gap: var(--brand-spacing_4,1rem) — selector .dist_marketing-document-cardheadingpQWFS
  • gap: var(--brand-spacing_2,.5rem) — selector .dist_marketing-testimonialtext--withoutsvg2MvHq
  • transition: .5s — selector .distmarketing-btnT7nAD
  • transition: all .3s — selector .distmarketing-btn-lightvariant-secondaryewg7c
  • transition: all .2s ease-in-out — selector .distmarketing-btn-iconendanimateSyCpE
  • transition: transform .2s ease-in-out — selector .distmarketing-btn-labelanimationV9nbv
  • transition: background .25s ease-in-out — selector .distmarketing-document-cardDyR_6
  • transition: transform .25s — selector .dist_marketing-document-cardcontentPIQen
  • transition: background .25s ease-in-out,border .25s ease-in-out — selector .dist_marketing-document-card**icon\__CwhIG
  • transition: transform .3s ease — selector .dist_marketing-text-block\_\_pvdPo svg

Responsive rules

(max-width:992px)
screen and (min-width:640px)
screen and (min-width:1024px)
screen and (min-width:1280px)
screen and (min-width:1420px)
screen and (min-width:1536px)
(min-width:640px)
(min-width:1024px)
(min-width:1120px)
(min-width:1200px)
(min-width:1280px)
(min-width:1350px)
(min-width:1536px)
screen and (max-width:1199px)
screen and (max-width:767px)
screen and (min-width:768px)
(min-width:786px)
screen and (min-width:575px)
(min-width:768px)
(min-width:1540px)

Tech stack