SKIN CARE

lorem ipsum dolor sit amet

ORBIS(orbis.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. Open Sans + lorem ipsum dolor sit amet consectetur, font-feature-settings: normal(palt lorem), letter-spacing: normal, lorem ipsum dolor #231815 + lorem ipsum #fff7ed + lorem ipsum #ef857d lorem ipsum dolor, radius 0px lorem ipsum CTA + radius 40px pill lorem ipsum dolor. computed style lorem ipsum dolor.

lorem ipsum lorem ipsum dolor

01 / COLORS

lorem ipsum dolor

Color Palette

lorem ipsum

Brand Cream

#fff7ed

lorem ipsum dolor / lorem ipsum

Brand Coral

#ef857d

lorem ipsum dolor / lorem

CTA Brown-Gray

#5c5a5a

lorem ipsum CTA lorem / lorem ipsum

lorem ipsum & lorem ipsum dolor

Text Primary

#231815

lorem ipsum dolor(lorem ipsum dolor)

Text on CTA

#ffffff

CTA lorem ipsum dolor

Border

#e0e0e0

lorem ipsum / lorem ipsum

Border Tag

#cdcdcd

lorem pill lorem ipsum

lorem ipsum

Background

#ffffff

lorem ipsum

Surface

#f8f8f8

lorem ipsum dolor(lorem)

Surface Footer

#fafafa

lorem ipsum dolor

Surface Cream

#fff7ed

lorem ipsum dolor sit

lorem ipsum dolor

Success Green

#69b35e

lorem ipsum dolor

Gold Premium

#9d8735

lorem / lorem ipsum dolor

lorem ipsum(lorem ipsum dolor)

Tint Blue

#e5f0f5

lorem

Tint Green

#ebf6ef

lorem

Tint Pink

#f7e8ee

lorem

Tint Yellow-Green

#f7f9e1

lorem ipsum

02 / TYPOGRAPHY

lorem ipsum dolor

Typography -- Open Sans + lorem ipsum dolor / palt lorem / letter-spacing normal / lorem wt 500

lorem ipsum

Open Sans + YuGothic / 28px / 700 / line-height: 1.0Heading 2 (large)

lorem ipsum / lorem ipsum

Open Sans + YuGothic / 20px / 700 / line-height: 1.5Heading 1 (category)

lorem ipsum dolor lorem ipsum

Open Sans + YuGothic / 18px / 700 / line-height: 1.8Heading 3

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

Open Sans + YuGothic / 14px / 500 / line-height: 1.8Body

lorem ipsum dolor lorem lorem ipsum dolor sit

Open Sans + YuGothic / 14px / 500 / line-height: 1.5Product Name

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

Open Sans + YuGothic / 13px / 500 / line-height: 1.8Small

NEW

Open Sans + YuGothic / 12px / 700 / line-height: 1.0Nav Badge

Open Sans + YuGothic / 12px / 500 / line-height: 1.0Footer

03 / PRODUCT

lorem ipsum

Product Page Sample

SKIN CARE

lorem ipsum dolor lorem lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur. 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 adipiscing.

¥3,630 (lorem)

lorem ipsum dolor

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

lorem ipsum dolor lorem ipsum dolor

04 / BUTTONS

lorem

Buttons -- CTA radius 0px (sharp) / Tag radius 40px (pill) lorem ipsum

lorem ipsum dolor

Primary / filled #5c5a5a / radius 0 / 700

lorem ipsum

Secondary / outline #5c5a5a / radius 0 / 500

lorem

Tag / pill / bg #fff7ed / radius 40px

lorem ipsum dolor

Filter / outline #e0e0e0 / radius 0

lorem ipsum

Badge / #69b35e

MEMBER

Badge / #9d8735

lorem ipsum lorem ipsum dolor lorem ipsum lorem ipsum lorem ipsum dolor lorem

Tag Pill Row -- lorem ipsum dolor sit amet

05 / CARDS

lorem ipsum

Product Cards -- shadow lorem / radius 0 / lorem ipsum dolor sit amet

Product Image

lorem ipsum

lorem ipsum dolor lorem lorem ipsum dolor sit

¥3,630

Product Image

lorem ipsum

lorem ipsum dolor lorem ipsum

¥2,970

Product Image

MEMBER

lorem ipsum dolor

lorem ipsum lorem ipsum UV lorem ipsum dolor

¥2,640¥3,520

Product Image

lorem ipsum

lorem ipsum dolor sit lorem ipsum dolor

¥1,430

06 / FORMS

lorem ipsum

Forms -- radius 0px / focus: border #5c5a5a

lorem ipsum

lorem

lorem ipsum dolor

lorem ipsum(lorem ipsum)

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor

lorem

lorem ipsum dolor

07 / ELEVATION

lorem

Depth & Elevation -- lorem ipsum dolor sit amet consectetur

Level 0 -- White

lorem ipsum. lorem. #ffffff

Level 0 -- Surface

lorem ipsum dolor. #f8f8f8

Level 0 -- Cream

lorem ipsum dolor sit. #fff7ed

Level 1 -- Hover

lorem ipsum dolor sit