the art of beauty

the art of skin perfection

shu uemura (shuuemura.jp) lorem ipsum dolor sit amet consectetur adipiscing. HelveticaNeueLTStd(Adobe Fonts, lorem ipsum dolor Inter lorem), weight 300 lorem ipsum dolor sit amet, radius 0px lorem ipsum dolor sit, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing. palt / letter-spacing lorem ipsum dolor. computed style lorem ipsum dolor.

SHOP NOW DISCOVER MORE
01 / COLORS
Color Palette
Brand Colors & Roles
Brand
Brand Black
#000000
Primary CTA / lorem ipsum / lorem ipsum dolor
Brand Blue-Gray
#27455c
lorem ipsum dolor / lorem ipsum dolor sit
Brand Gold
#d1a85d
lorem ipsum CTA / lorem ipsum dolor sit
Brand Red
#b80220
lorem ipsum CTA lorem ipsum / lorem ipsum dolor
Text
Text Primary
#000000
lorem / lorem ipsum dolor
Text Secondary
#333333
lorem ipsum / lorem
Text Tertiary
#4e4e4e
lorem ipsum / lorem ipsum dolor
Text Muted
#696969
lorem ipsum dolor / lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum dolor sit amet
Surface
Surface White
#ffffff
lorem ipsum
Surface Light
#f7f6f7
lorem ipsum / lorem ipsum dolor
Surface Dark
#171717
lorem ipsum / lorem ipsum dolor
Surface Blue-Gray
#27455c
lorem ipsum dolor sit
Cosmetic Accents
Warm Peach
#f8cfa9
lorem ipsum dolor / lorem ipsum dolor
Burgundy
#a4493d
lorem / lorem ipsum dolor
Mauve
#984856
lorem / lorem
02 / TYPOGRAPHY
Typography
HelveticaNeueLTStd (Adobe Fonts) -- Inter for preview / weight 300 airy aesthetic / NO palt, NO letter-spacing
the art of skin perfection
Inter (HelveticaNeueLTStd) / 36px / 300 / line-height: 1.4 / letter-spacing: normalH1 Hero
unlimited beauty
Inter (HelveticaNeueLTStd-Ex) / 34px / 400 / line-height: 1.12 / letter-spacing: normalH2 Hero Extended
lorem ipsum 8 lorem ipsum dolor sit
Inter (HelveticaNeueLTStd) / 24px / 300 / line-height: 1.4 / color: #333333H3 Large
lorem ipsum lorem ipsum dolor
Inter (HelveticaNeueLTStd) / 14px / 400 / line-height: 1.45 / letter-spacing: normalH3 Small / Content
lorem ipsum
Inter (HelveticaNeueLTStd) / 14px / 700 / line-height: 1.25 / letter-spacing: normalH4 Nav / Footer Heading
lorem ipsum dolor sit amet. lorem ipsum dolor 98% lorem ipsum dolor sit amet.
Inter (HelveticaNeueLTStd) / 18.72px / 400 / line-height: 1.5 / letter-spacing: normalBody Large (Hero)
lorem ipsum 8 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor.
Inter (HelveticaNeueLTStd) / 16px / 400 / line-height: 1.5 / letter-spacing: normalBody
lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
Inter (HelveticaNeueLTStd) / 14px / 300 / line-height: 1.45 / letter-spacing: normalBody Small
lorem 150mL / lorem ¥12,650
Inter (HelveticaNeueLTStd) / 12px / 300 / line-height: 1.3 / color: #4e4e4eCaption
lorem ipsum   lorem ipsum dolor   lorem ipsum dolor   lorem
Inter (HelveticaNeueLTStd) / 12px / 400-700 / line-height: 1.2 / letter-spacing: normalNav
ADD TO BAG
Inter (HelveticaNeueLTStd) / 14px / 400 / line-height: 1.2 / letter-spacing: normalButton
shop the collection
Inter (HelveticaNeueLTStd-Ex) / 26px / 400 / line-height: 1.15 / color: #b80220Button Red (Hero CTA)
03 / PRODUCT
Product
Product Page Sample
Cleansing

ultimate8 sublime beauty cleansing oil

lorem ipsum dolor 98% lorem. lorem ipsum dolor sit amet consectetur 8 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur.

ingredients
Key Ingredients

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

ADD TO BAG LIMITED EDITION
04 / BUTTONS
Buttons
ALL radius 0px -- completely square, sharp edges / weight 400
ADD TO BAG
Primary / filled #000 / radius 0 / 14px
VIEW ALL
Ghost / outline #000 / radius 0 / 14px
LIMITED EDITION
Gold / filled #d1a85d / radius 0 / 14px
SHOP
Header Compact / 12px / padding 4px 12px
shop the collection
Hero CTA / #b80220 / 26px / Extended
On Dark Surface
ADD TO BAG
White / #fff bg + #000 text
VIEW ALL
Ghost / outline white
LIMITED EDITION
Gold / #d1a85d on dark
05 / CARDS
Product Cards
No border-radius / No shadow / Flat luxury aesthetic
Product Image
CLEANSING

lorem ipsum 8 lorem ipsum lorem ipsum lorem ipsum dolor lorem

¥12,650
Product Image
FACE MAKEUP

lorem ipsum dolor lorem ipsum dolor lorem ipsum

¥7,150
Product Image
LIP COLOR

lorem ipsum lorem ipsum dolor lorem ipsum dolor

¥4,400
Product Image
TOOLS

lorem 55 lorem ipsum dolor lorem

¥6,600
06 / FORMS
Forms
radius 0px / focus: border #000000 / error: border #c0392b
Default
Please enter a valid phone number
Focus State
07 / ELEVATION
Depth & Elevation
Flat design -- NO box-shadows anywhere / Color contrast only
Level 0 -- White
Standard background. No shadow.
Level 1 -- Light
Card / section bg. #f7f6f7
Level 2 -- Blue-Gray
Hero section. #27455c
Level 3 -- Dark
Footer / product. #171717
08 / LAYOUT
Layout
Spacing scale & grid
4px
8px
12px
16px
20px
32px
40px
DARK #171717
BLUE-GRAY #27455c
LIGHT #f7f6f7