Fresh Handmade Cosmetics

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Product Colors (with shades)
Rose Jam
#fd726f / #ff9d9d / #feeeee
lorem ipsum dolor / lorem ipsum dolor
Sleepy
#bd8dc8 / #a971b7 / #dabbe1
lorem ipsum dolor sit amet
Twilight
#ec58a5 / #f49fcb / #ffdde9
lorem ipsum / lorem ipsum dolor
Good Karma
#ffa379 / #ffcdb6 / #fef3ee
lorem ipsum dolor sit amet
Intergalactic
#00b7d5 / #6bcada / #c5e6ec
lorem ipsum / lorem ipsum dolor
Magnaminty
#a2c9a4 / #c2e1c4 / #e0ede0
lorem ipsum dolor / lorem ipsum
Product Colors (single)
Rosy Cheeks
#d7aea9
lorem ipsum dolor sit amet
Skin Drink
#f4d9b9
lorem ipsum dolor sit
Synaesthesia
#061455
lorem ipsum dolor
Whoosh
#ffff54
lorem ipsum dolor
Ultrabland
#fcf0e3
lorem ipsum dolor
Natural Tones
Oat
#e9e4c0
Peace
#d5d0b8
Porridge
#bab69a
Buttermilk
#fbf9ef
lorem ipsum dolor sit
Neutrals (Dark Scale)
Black
#000000
lorem ipsum
Liquorice
#212121
lorem ipsum
Charcoal
#333333
Slate
#464646
Smoke
#5e5e5e
Shadow
#757575
lorem ipsum
Stone
#8f8f8f
Silver
#cbcbcb
Cloud
#f4f2f4
Dove
#fafbfc
White
#ffffff
lorem ipsum dolor
Semantic & Brand
Amber
#e95708
lorem ipsum dolor sit
Club Green
#0db14b
Lush Club
Club Yellow
#ffe838
Lush Club
Error
#eb0000
Error Dark
#ff7024
Success
#138645
Success Dark
#0b5d45
Focus
#535afa
Focus Alt
#7b7afa
02 / Typography

lorem ipsum dolor sit

Fresh Handmade Cosmetics
Caveat / 40px / 700 / line-height: 1.1Display
lorem ipsum dolor — H2 Large
Inter / 30px / 700 / line-height: 1.33 / letter-spacing: -0.5pxlorem ipsum dolor
lorem ipsum dolor sit — H2 Medium
Inter / 20px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — H3
Inter / 18px / 700 / line-height: 1.56lorem / lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. Inter 16px / 400 / line-height 1.5 lorem ipsum. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit. ABCabc 123
Inter / 16px / 400 / line-height: 1.5Base Body
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. line-height: 1.71 lorem ipsum dolor sit.
Inter / 14px / 400 / line-height: 1.71Body Small
Badge / Country Label
Inter / 12px / 700 / letter-spacing: 1px / uppercaselorem / lorem
font-family: SFMono-Regular, Menlo, Monaco, Consolas;
Monospace / lorem / lorem ipsum dolor
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

Bath Bomb Vegan Self-Preserving

Handmade with Love

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. Intergalactic lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. Twilight lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur. Whoosh lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

Rose Jam
Intergalactic
Sleepy
04 / Buttons

lorem ipsum dolor sit

lorem
Search (pill)
lorem ipsum
Category pill
lorem ipsum dolor
Category pill
lorem ipsum dolor
Category pill
lorem ipsum
Register (radius: 40px)
Cookie lorem
Ghost / Cookie
lorem ipsum dolor
Primary CTA
Lush Club lorem
Club Green
lorem ipsum
Amber CTA
lorem ipsum
Disabled

Note: ALL buttons are pill / rounded (radius: 23px-9999px). Square buttons are never used.

05 / Cards

lorem ipsum dolor sit

Rose Jam
Bath Bomb

lorem ipsum dolor lorem ipsum

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.

¥790
Intergalactic
Bath Bomb

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.

¥890
Sleepy
Body Lotion

lorem ipsum lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

¥1,580
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: var(--shadow) #757575, bg: var(--liquorice), radius: 8px
lorem ipsum --- border: var(--focus) #535afa, ring: rgba(83,90,250,0.25)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border: var(--error) #eb0000, ring: rgba(235,0,0,0.2)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem
Level 1
0 2px 8px rgba(0,0,0,0.3)
Level 2
0 4px 16px rgba(0,0,0,0.4)
Focus Ring
var(--focus) #535afa

Dark theme: lorem ipsum dolor. lorem ipsum dolor bg difference (liquorice vs black) lorem.

08 / Layout

lorem ipsum & lorem ipsum dolor

Max Content 1200px
Product Grid 1000px
Article / Content 620px
Card Min Width 280px
Spacing Scale
4px
8px
12px
16px
20px
24px
32px
48px
64px