YOSHIDA & Co.

1935 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, PORTER / LUGGAGE LABEL / B lorem YOSHIDA / PORTER CLASSIC lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

COLORS

PRIMARY
PORTER Black
#000000
Gray Dark
#333333
Gray Mid
#444444
Gray
#666666
SURFACE
Mid Gray (CTA)
#b4b4b4
Light Gray
#dddddd
Pale Gray
#f2f2f2
Section
#f0f0f0
Input
#efefef
White
#ffffff
ACCENT (rare)
PORTER Orange
#ff9e5e

TYPOGRAPHY

lorem Noto Sans JP 12px / line-height 1.5. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit Helvetica Neue 700 lorem ipsum dolor. letter-spacing lorem normal.

Display H2 / 39px / 700 / Helvetica
CATEGORY
Hero / 17px / 700 / 1.5
RECOMMEND for YOU
Sub / 15px / 400 / 1.5
lorem ipsum dolor, lorem ipsum dolor
Body / 12px / 400 / 1.5
1935 lorem ipsum / lorem ipsum dolor sit amet consectetur, “lorem ipsum”lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Card Caption / 12px / 500 / 1.3
PORTER / EXTREME RUCKSACK
Card Sub / 11px / 400 / 1.5
lorem ipsum dolor sit amet consectetur
Brand Tag / 10px / 700 / 1.2
PORTER / EXTREME
Category EN / 10px / 700 / muted
RUCKSACK
Price / 10px / 700 / 1.35
¥57,200
JOURNAL

PRODUCTS

No.32

BUS GIRL Episode — 1962 lorem TANKER lorem ipsum

1983 lorem ipsum dolor TANKER lorem ipsum dolor sit, 1962 lorem ipsum dolor sit amet consectetur adipiscing. MA-1 lorem ipsum dolor sit amet consectetur adipiscing, lorem / lorem ipsum dolor sit amet, lorem PORTER lorem ipsum dolor sit amet.

No.31

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur

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

BUTTONS

PRIMARY (mid gray, square)
lorem ipsum lorem ipsum dolor
SECONDARY
lorem lorem ipsum
CATEGORY TAGS
lorem ipsum dolor lorem ipsum dolor lorem ipsum lorem / lorem lorem ipsum / lorem ipsum
SEARCH BAR

PRODUCTS

CATALOG GRID — lorem ipsum 4–5 lorem / lorem ipsum
PORTER / EXTREME
RUCKSACK
RUCKSACK
¥57,200
PORTER / TANKER
SHOULDER BAG (S)
SHOULDER
¥19,800
PORTER CLASSIC / SUPER NYLON
3WAY BRIEFCASE
BUSINESS
¥77,000
B lorem YOSHIDA
PORTER × BEAMS / TOTE BAG
TOTE
¥27,500
LUGGAGE LABEL / LINER
DAYPACK
DAYPACK
¥38,500

CATEGORIES

GRAY LABEL GRID — lorem ipsum dolor
lorem ipsum dolor lorem ipsum dolor lorem ipsum lorem lorem ipsum / lorem ipsum lorem ipsum / lorem ipsum lorem ipsum / lorem lorem ipsum / lorem

FORMS

lorem ipsum dolor sit amet consectetur

ELEVATION

lorem ipsum dolor sit amet consectetur. lorem #fff / #f0f0f0 / #dddddd / #333 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

Level 0 — Flat
Level 1 — Sticky

LAYOUT

12 lorem ipsum dolor sit amet. max-width 1280px, lorem ipsum 4–8px lorem, lorem ipsum dolor sit.