Hoang Phuc Phan

Generated Oct 25, 2026

DESIGN.md for locket.com

locket.com12 colors5 componentsSF Pro Rounded

Remix

12 screenshots captured· locket.com

1 / 12 · Locket - Best friends first · Above the fold

Preview

the generated design system

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

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from locket.com

Primary

#1A1200

Primary CTA, brand accent, active state; Body copy

#C67700

Secondary accent / hero band

#FFB800

Inline link colour

#2468AB

Accent / decorative

#3C92DC

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#000000

Headings / primary text

#1D1D1F

Captions, secondary text

#6B6B6B

Tertiary / placeholder text

#F5F5F5

Neutral

#FFFBF1

Neutral

#0A0A0A

Neutral

Typography · SF Pro Rounded

body17px · 700 · 23.375px

body15px · 600 · 22.5px

link17px · 600 · 25.5px

nav-link17px · 700 · 22px

list-item16px · 400 · 24px

body19px · 700 · 28.5px

body18px · 700 · 26px

body20px · 700 · 25px

hero-display30px · 400 · 45px

h320px · 700 · 25px

body17px · 600 · 23.375px

body26px · 700 · 26px

caption12px · 600 · 12px

body24px · 400 · 36px

body22px · 400 · 33px

heading28px · 400 · 42px

body27px · 400 · 40.5px

body26px · 400 · 39px

h180px · 700 · 80px

h256px · 700 · 56px

h330px · 800 · 33px

body20px · 600 · 28px

button20px · 600 · 30px

label15px · 700 · 22.5px

body20px · 800 · 28px

body20.016px · 600 · 28.0224px

body16.992px · 700 · 25.488px

body19px · 600 · 26.125px

body22px · 700 · 25.3px

heading30px · 700 · 34.5px

heading26px · 700 · 26px

heading34.4275px · 900 · 37.1817px

h326px · 900 · 32.5px

button31.152px · 900 · 46.728px

display40px · 900 · 40px

hero-display63.75px · 700 · 63.75px

h116px · 400 · 24px

h236px · 700 · 40px

body24px · 700 · 28.8px

body14px · 500 · 20px

h140px · 700 · 40px

h240px · 700 · 50px

h328px · 700 · 35px

h420px · 700 · 25px

body20px · 600 · 26px

button15px · 700 · 20px

button20px · 700 · 26px

body18px · 600 · 24px

heading32px · 700 · 40px

heading28px · 600 · 35px

body13px · 600 · 18px

h148px · 700 · 52.8px

h221px · 700 · 25px

body19px · 400 · 27.0009px

caption14px · 400 · 20px

body20px · 500 · 32.5px

body19px · 600 · 27.0009px

body17px · 500 · 25px

body14px · 600 · 20px

Spacing

24px

16px

8px

40px

4px

12px

120px

20px

Elevation

rgba(0, 0, 0, 0.18) 0px 16px 50px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 5px 10px 0px, rgba(0, 0, 0, 0.03) 0px 19px 19px 0px, rgba(0, 0, 0, 0.02) 0px 43px 26px 0px, rgba(0, 0, 0, 0.01) 0px 76px 30px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 16px 50px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset

Components · 5

Remixes of locket.com

Latest remixes

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

Remix it