MOTHERHOUSE

ONLINE STORE

MOTHERHOUSE (mother-house.jp) lorem ipsum dolor sit amet consectetur adipiscing. Lato + lorem ipsum dolor sit amet consectetur adipiscing, font-feature-settings: normal (palt lorem), lorem ipsum dolor CTA #656565, lorem ipsum #edeadd lorem ipsum dolor sit. lorem ipsum dolor letter-spacing (3-5px). computed style lorem ipsum dolor.

lorem ipsum dolor sit amet

01 / COLORS

lorem ipsum dolor

Color Palette

PRIMARY

CTA Gray

#656565

CTA lorem ipsum / lorem ipsum dolor

Text Charcoal

#121212

lorem ipsum dolor / lorem ipsum dolor

ACCENT

Beige

#edeadd

lorem ipsum dolor sit / lorem ipsum

Blue Accent

#377dff

lorem ipsum dolor

TEXT

Text Primary

#121212

lorem ipsum dolor

Text Dark

#3a3a3a

lorem ipsum dolor

Text Medium

#353535

lorem ipsum

Text Body

#202020

lorem ipsum dolor

Text Secondary

#656565

lorem ipsum dolor / lorem ipsum dolor

Text Muted

#555555

lorem ipsum / lorem ipsum dolor

Text on Dark

#ffffff

CTA / lorem ipsum dolor sit amet consectetur

SURFACE

Surface White

#ffffff

lorem ipsum

Surface Light

#f2f2f2

lorem ipsum dolor

Surface Divider

#dadada

lorem ipsum dolor

Surface Card

#f5f5f5

lorem / lorem ipsum dolor

Surface Beige

#edeadd

lorem ipsum dolor sit

BORDER

Border Natural

#dbd9cd

lorem ipsum dolor sit / lorem ipsum

Border Store

#f8f8f8

“lorem ipsum”lorem ipsum (4px)

02 / TYPOGRAPHY

lorem ipsum dolor

Typography -- Lato + lorem ipsum dolor / palt lorem / lorem letter-spacing lorem

WOMEN

Lato + Yu Gothic / 40px / 700 / line-height: 1.8 / letter-spacing: 0.14em (5.6px)Category Overlay

ONLINE STORE

Lato + Arial / 26px / 400 / line-height: 1.19 / letter-spacing: 3pxHeading 2 (section)

SHOP & FACTORY

Lato + Arial / 24px / 400 / line-height: 1.25 / letter-spacing: 5pxHeading 2 (shop)

GOODS

Lato + Arial / 17px / 700 / line-height: 1.8 / letter-spacing: 0.14emCategory Label

NEW TOPICS

Lato + Arial / 12px / 400 / line-height: 1.0 / letter-spacing: 0.1emHeading 3

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

Lato + Yu Gothic / 14px / 400 / line-height: 1.75 / letter-spacing: normalBody

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

Lato + Yu Gothic / 15px / 500 / line-height: 1.47 / letter-spacing: normal / color: #656565Body (shop desc)

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit

Lato + Arial / 14px / 400 / line-height: 1.43 / letter-spacing: 0.6px / color: #656565Article Title

lorem

Lato / 13px / 400 / line-height: 1.8 / letter-spacing: 0.6pxNav Link

JEWELRY

Lato + Arial / 13px / 400 / line-height: 3.08 / letter-spacing: 2pxHeader Menu

MYPAGE

10px / 700 / line-height: 1.8 / letter-spacing: 0.6pxNav Label

lorem ipsum dolor sit amet

Lato + Arial / 12px / 600 / line-height: 1.8 / letter-spacing: 1.68px (0.14em)CTA Text

03 / PRODUCT

lorem ipsum

Product Page Sample -- Bags & Accessories from Developing Countries

BAGS

Zafar lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. A4 lorem ipsum dolor sit PC lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

CRAFTSMANSHIP

lorem ipsum dolor sit

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

lorem ipsum

04 / BUTTONS

lorem

Buttons -- CTA Gray #656565 / radius 2-3px / 12px SemiBold 600 / shadow lorem

lorem ipsum dolor sit amet

Primary CTA / filled #656565 / radius 3px / 600

Newsletter CTA / filled #656565 / radius 0 / 600

lorem ipsum dolor

Tab / border #dbd9cd / radius 5px / 400

lorem ipsum dolor

Tab / border #dbd9cd / radius 5px / 400

lorem ipsum (CTA Gray #656565)

lorem ipsum

Outline / 4px solid #f8f8f8 / radius 0 / 400

lorem ipsum

lorem / lorem + #656565 lorem ipsum

05 / CARDS

lorem ipsum

Product Cards -- shadow lorem / radius 0 / lorem ipsum

Product Image

BAGS

Zafar lorem ipsum dolor sit amet consectetur

¥59,400

Made in Bangladesh

Product Image

BAGS

Rinne lorem ipsum dolor

¥34,100

Made in Bangladesh

Product Image

JEWELRY

lorem ipsum dolor

¥16,500

Made in Indonesia

Product Image

GOODS

lorem ipsum dolor sit amet

¥12,100

Made in Nepal

06 / FORMS

lorem ipsum

Forms -- radius 3px / focus: border #121212

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 (--media-shadow-opacity: 0.0), lorem ipsum dolor sit

Level 0 -- White

lorem ipsum. lorem. #ffffff

Level 1 -- Light

lorem ipsum dolor. lorem. #f2f2f2

Level 2 -- Beige

lorem ipsum dolor. lorem. #edeadd

Level 3 -- Overlay

lorem ipsum dolor sit. rgba(255,255,255,0.3)