MailerLite

MailerLite — design reference

Source: https://www.mailerlite.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-size: 100% — selector button,input,optgroup,select,textarea
• font-size: 2.25rem — selector h1,.h1
• font-size: 3rem — selector h1,.h1
• font-size: 4rem — selector h1,.h1
• font-size: 1.875rem — selector h2,.h2
• font-size: 1.5rem — selector h3,.h3
• font-weight: 700 — selector h1,.h1
• font-weight: 600 — selector h5,.h5
• font-weight: 500!important — selector button.type-white-link,a.type-white-link
• font-weight: 400 — selector .bfcm25-title span
• line-height: 1 — selector h1,.h1
• line-height: 1.25 — selector h2,.h2
• line-height: 1.25rem — selector .text h5
• line-height: 1rem — selector button.size-xs,a.size-xs
• line-height: 1.6 — selector .code-samples pre[class_=language-],.code-samples code[class_=language-]
• line-height: 2rem — selector .blog .intro p
• line-height: 4rem — selector .blog .intro p:first-child:first-letter
• letter-spacing: -.025em — selector h1,.h1
• letter-spacing: .025em — selector button.type-return,a.type-return

Colors and surfaces

• color: #9de7c3 — selector .lite-description a
• color: #6f6f6f — selector .lite-description p:first-child
• color: #000 — selector .lite-description li p:first-child
• color: rgb(7 155 84 / var(--tw-text-opacity)) — selector .text a:hover
• color: rgb(255 255 255 / var(--tw-text-opacity)) — selector .dark .text a:hover
• color: rgb(0 0 0 / var(--tw-text-opacity)) — selector button.type-white,a.type-white
• color: rgb(255 255 255 / var(--tw-text-opacity))!important — selector button.type-white-link,a.type-white-link
• background-color: transparent — selector button,[type=button],[type=reset],[type=submit]
• background-color: rgb(0 0 0 / var(--tw-bg-opacity)) — selector button.type-black,a.type-black
• background-color: rgb(38 38 38 / var(--tw-bg-opacity)) — selector button.type-black:hover,a.type-black:hover
• background-color: rgb(255 255 255 / var(--tw-bg-opacity)) — selector button.type-white,a.type-white
• background-color: rgb(209 213 219 / var(--tw-bg-opacity)) — selector button.type-white:hover,a.type-white:hover
• background-color: rgb(9 194 105 / var(--tw-bg-opacity)) — selector button.type-primary,a.type-primary
• background-color: rgb(7 155 84 / var(--tw-bg-opacity)) — selector button.type-primary:hover,a.type-primary:hover
• background-color: var(--btn-hover-color)!important — selector button.type-custom-color:hover,a.type-custom-color:hover

Components and layout

• border-radius: .375rem — selector button.type-black,a.type-black
• border-radius: 0 — selector .code-samples**panel pre[class\*=language-]
• border-radius: .25rem — selector .blog pre
• box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow) — selector button:focus,a:focus
• max-width: 1536px — selector .container
• max-width: 640px — selector .container
• max-width: 768px — selector .container
• max-width: 1024px — selector .container
• max-width: 1280px — selector .container
• padding: 0 — selector button,input,optgroup,select,textarea
• padding: .5rem 1rem — selector button.size-xs,a.size-xs
• padding: .75rem 1.5rem — selector button.size-small,a.size-small
• padding: 1rem 2rem — selector button.size-large,a.size-large
• padding: 1rem 3.5rem 1rem 1rem — selector .code-samples**panel pre[class\*=language-]
• padding: 1rem 1.5rem — selector .blog pre
• padding: 1em — selector pre code.hljs
• gap: .25rem — selector .code-samples**tabs
• gap: 1rem — selector .code-samples**links
• gap: .5rem — selector .code-samples\_\_link
• gap: 4rem — selector .gap-16
• gap: 3rem — selector .gap-12
• gap: 2.5rem — selector .gap-10
• gap: .625rem — selector .gap-2.5
• gap: 2rem — selector .gap-8

Responsive rules

(min-width: 768px)
(min-width: 1024px)
(min-width: 1280px)
(max-width: 768px)
(min-width: 640px)
(forced-colors: active)
(max-width: 1024px)
(min-width: 1536px)
(prefers-reduced-motion: no-preference)