Marketing

Loops

loops.so15 colors6 componentsInterMulti-page · 12 screens

Loops is the email platform for SaaS teams and their agents. Send marketing, product, and transactional email from one contact record. Start for free.

Remix Visit

Remix

Visit

12 screenshots captured· loops.so

1 / 12 · Loops | Email Platform for SaaS: Marketing & Transactional · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from loops.so

Primary

#FDFDFC

Primary CTA, brand accent, active state; Headings / primary text

#9E9EFF

Brand hue used alongside the achromatic primary

#0000EE

Inline link colour

#2D2725

Accent / decorative

#78716C

Accent / decorative

#FC7432

Accent / decorative

#7D1B0C

Accent / decorative

Neutral

#191918

Default page background

#0E0B0C

Card / panel background

#FFF4EC

Body copy

#EEEEEC

Captions, secondary text

#E6E1DE

Tertiary / placeholder text

#222222

Label colour on brand surfaces

#3B3A37

1px borders and dividers

#B5B3AD

Neutral

Typography · Inter

body14px · 400

body14px · 400 · 21px

caption12px · 400 · 17.04px

body15px · 400 · 22.5px

nav-link16px · 500 · 24px

caption12px · 600 · 16.8px

body14px · 500 · 20px

body13px · 400 · 16.9px

body16.8px · 400 · 28.56px

caption13px · 400 · 18px

body13px · 400 · 18.85px

body14px · 600 · 21px

body13px · 500 · 19.5px

body16px · 400 · 24px

nav-link14px · 500

body20px · 400 · 28px

body18px · 550 · 24px

body17px · 400 · 27.2px

button14px · 500 · 20px

body15px · 600 · 22.5px

body14px · 600 · 21px

body13px · 500 · 13px

input13px · 400 · 15.6px

body15px · 400 · 22.5px

heading18px · 400 · 22.5px

body15px · 500 · 21px

body20px · 600 · 24px

button13px · 500 · 15.6px

h315px · 500 · 22px

link12px · 400

list-item12px · 400

body16px · 400 · 26.4px

body20px · 500 · 28px

body16px · 500 · 24px

h136px · 600 · 40px

h224px · 600 · 31.9999px

h314px · 500 · 20px

body18px · 400 · 28px

link14px · 400 · 20px

button14px · 400 · 24px

caption14px · 400 · 16px

heading16px · 600 · 24px

body14px · 400 · 20px

body16px · 600 · 28px

body16px · 500 · 24px

button14px · 500 · 24px

button12px · 600 · 16px

caption12px · 500 · 16px

Typography · sans-serif

button12px · 400

link12px · 400

Typography · Georgia

body22px · 400 · 24.2px

Typography · ui-sans-serif

body14px · 400 · 23.8px

link14px · 400 · 16.8px

body13.5px · 500

button14px · 500 · 16.8px

body15px · 400 · 21.75px

body14px · 500

body15px · 500 · 17.25px

button13.44px · 650 · 15.456px

Typography · Newsreader

h140px · 500 · 44px

h124px · 500 · 28.8px

h224px · 500 · 28.8px

h144px · 500 · 47.52px

h244px · 500 · 48px

heading25.28px · 500 · 29.072px

display44px · 500 · 44px

heading36px · 400 · 36px

h225.28px · 500 · 29.072px

heading30px · 500 · 33px

body20px · 600 · 25px

Typography · ui-serif

h330px · 400 · 33.6px

Typography · Didot

heading34px · 400 · 31.28px

Typography · ui-monospace

code15.5px · 400 · 27.59px

code15.04px · 400 · 20.304px

Typography · Newsreader Variable

h221.6px · 400 · 30.24px

Spacing

8px

12px

20px

16px

24px

32px

4px

48px

Elevation

rgba(28, 25, 23, 0.04) 0px 2px 3px 0px, rgba(28, 25, 23, 0.16) 0px 8px 18px -8px

rgba(33, 32, 28, 0.04) 0px 1px 2px 0px

rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(33, 32, 28, 0.08) 0px 4px 10px 0px, rgba(33, 32, 28, 0.08) 0px 2px 4px -1px, rgba(33, 32, 28, 0.05) 0px 0px 0px 1px

Components · 6

Remixes of Loops

Latest remixes

No public remixes yet. Be the first to make one.

Remix it