E-commerce

Glossier

glossier.com5 colors5 componentsApercuMulti-page · 2 screens

Glossier

Remix Visit

Remix

Visit

2 screenshots captured· glossier.com

1 / 2 · Glossier · 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 glossier.com

Primary

#000000

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

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#FAF2F4

Alternating section band

#666666

Body copy

#E8E8E8

Neutral

Typography · ApercuGoogle Fonts

hero-display32px · 500 · 35px

h220px · 400 · 28px

h314px · 400 · 19.6px

h412px · 400 · 20.4px

button14px · 400 · 19.6px

input14px · 400

list-item12px · 400 · 20px

nav-link14px · 400 · 20px

heading12px · 400 · 20.4px

caption12px · 400 · 20.4px

caption12px · 400 · 19.6px

body14px · 400 · 16.1px

caption12px · 400 · 16.8px

button14px · 400 · 0.03px

body14px · 400 · 20.4px

button12px · 400 · 19.6px

caption12px · 700 · 16px

Typography · Apercu MonoGoogle Fonts

code12px · 400 · 16.8px

Spacing

8px

12px

16px

24px

32px

36px

40px

56px

Components · 5

Remixes of Glossier

Latest remixes

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

Remix it