BEAUTY TECH BRAND

ONLINE SHOP

ReFa(refa.net)lorem ipsum dolor sit amet consectetur adipiscing. Figtree(lorem ipsum)lorem Noto Sans JP(lorem)lorem ipsum dolor sit amet consectetur, font-feature-settings: "palt" lorem ipsum dolor, letter-spacing 0.1em lorem ipsum, lorem ipsum dolor sit amet consectetur #231815 lorem ipsum dolor sit, pill lorem ipsum dolor CTA(radius 30px). computed style lorem ipsum dolor.

ONLINE SHOP lorem ipsum

01 / COLORS

Colors

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

BRAND

Brand Dark

#231815

lorem ipsum / lorem ipsum dolor / lorem ipsum. lorem ipsum dolor sit amet consectetur

On-dark Text

#ffffff

lorem ipsum / lorem ipsum dolor sit amet

NEUTRAL

Text Primary

#231815

lorem / lorem. lorem ipsum dolor sit amet

Surface Light

#ebeef0

lorem ipsum / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur

Background

#ffffff

lorem ipsum dolor

FUNCTIONAL

Overlay

rgba(35,24,21,.08)

lorem ipsum dolor sit / lorem ipsum dolor

02 / TYPOGRAPHY

Typography

lorem ipsum dolor — Figtree(lorem ipsum)+ Noto Sans JP(lorem)/ palt lorem ipsum dolor / letter-spacing 0.1em lorem ipsum

BEAUTECH DRYER

Figtree / 50px / 400 / line-height: 1.0 / letter-spacing: 5px (0.1em)Section Heading EN

CARAT RAY FACE

Figtree / 30px / 400 / line-height: 1.0 / letter-spacing: 3px (0.1em)Sub Heading EN

lorem lorem ipsum dolor lorem ipsum

Noto Sans JP / 24px / 400 / line-height: 1.86 / letter-spacing: 2.4px (0.1em)Brand Name JP

lorem ipsum

Noto Sans JP / 14px / 400 / line-height: 1.86 / letter-spacing: 1.4px (0.1em)Category Label

ReFa BEAUTECH DRYER PRO

Noto Sans JP / 12px / 700 / line-height: 1.0 / letter-spacing: 1.2px (0.1em)Product Name

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

Noto Sans JP / 14px / 400 / line-height: 1.86 / letter-spacing: 1.4pxBody

SKINCARE / HAIRCARE / BODYCARE

Figtree / 12px / 400 / line-height: 1.86 / letter-spacing: 1.2pxNav Label EN

BEAUTY TECH BRAND

Noto Sans JP / 12px / 700 / line-height: 1.67 / letter-spacing: 1.2pxHero Slider Label

※lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet.

Noto Sans JP / 10px / 400 / line-height: 1.6 / letter-spacing: 2px (0.2em)Small / Legal

03 / PRODUCT

Product

lorem ipsum dolor sit amet — Product Page Sample

HAIRCARE

BEAUTECH DRYER

ReFa lorem ipsum dolor lorem ipsum lorem

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

TECHNOLOGY

lorem ipsum

“lorem ipsum GPS lorem ipsum”lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem: 1.9 m³/min
lorem: 440g
lorem ipsum: 1.8m

ONLINE SHOP lorem ipsum dolor

04 / BUTTONS

Buttons

lorem — pill lorem(border-radius 30px)/ lorem ipsum dolor / lorem ipsum dolor

ONLINE SHOP

Outline CTA / border #231815 / radius 30px / Figtree 12px

lorem ipsum

Text Link / border-bottom / Noto Sans JP 14px

DARK BACKGROUND

ONLINE SHOP

Outline CTA / border #fff / lorem ipsum

lorem ipsum dolor

Text Link / white / lorem ipsum

05 / CARDS

Cards

lorem ipsum — Product Cards / #ebeef0 lorem / shadow lorem / lorem ipsum

Product Image

HAIRCARE

ReFa BEAUTECH DRYER PRO

¥53,900

Product Image

SKINCARE

ReFa CARAT RAY FACE

¥44,000

Product Image

BODYCARE

ReFa LUMI STOP

¥26,400

Product Image

SKINCARE

ReFa FINE BUBBLE S

¥55,000

06 / FORMS

Forms

lorem ipsum — border 1px / radius 2px / focus: border #231815

DEFAULT

lorem

lorem ipsum dolor

lorem ipsum(lorem ipsum)

lorem ipsum dolor sit amet consectetur

FOCUS STATE

lorem

lorem ipsum dolor

07 / ELEVATION

Elevation

lorem — Depth & Elevation / lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing

Level 0 -- White

lorem ipsum dolor. lorem. #ffffff

Level 1 -- Surface Light

lorem / lorem ipsum dolor. #ebeef0

Level 2 -- Hover Shadow

lorem ipsum dolor sit(lorem). rgba(35,24,21,0.08)

Level 3 -- Brand Dark

lorem ipsum / lorem ipsum dolor. #231815