BETWEEN CITY
AND NATURE

lorem ipsum dolor sit amet

01 / Colors

Color Palette

Core
Brand Dark
#161616
Primary BG
Charcoal
#222222
Secondary Dark
Surface Dark
#1a1a1a
Card / Section BG
Mid Gray
#333333
Border / Subtle
Text
White
#ffffff
Primary Text
Light Gray
#eeeeee
Border / Surfaces
Muted
#999999
Secondary Text
Semantic
Success
#4a9a4a
In stock / Complete
Danger
#cc3333
Error / Sold out
Warning
#cc9933
Limited / Caution
Overlay
rgba(0,0,0,0.75)
Modal Overlay
02 / Typography

Type Hierarchy

BETWEEN CITY AND NATURE
H2 Hero / 60px / 700 / line-height: normal / letter-spacing: 0.01emHero
pertex wind jacket
H3 Large / 36px / 700 / line-height: 1.2 / letter-spacing: 0.01emProduct
Collection
H2 Section / 34px / 700 / line-height: 1.0 / letter-spacing: 0.01emSection Title
lorem ipsum dolor sit, lorem ipsum dolor sit. and wander lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
P Body / 22px / 400 / line-height: 1.8 / letter-spacing: 0.03emEditorial
Body text at 15px. The standard reading size across the site. Helvetica Neue leads the font stack with Japanese fallback. ABCabc 123
Body / 15px / 400 / line-height: normal / letter-spacing: 0.04em
NAVIGATION LINK
H3 Nav / 14px / 700 / letter-spacing: 0.04em / uppercaseNav
Small text for captions and metadata
P Small / 13px / 400 / line-height: 1.0 / letter-spacing: 0.04em
Footer caption text with wide tracking for elegance and readability at small sizes
P Caption / 11px / 400 / line-height: 1.6 / letter-spacing: 0.09emFooter
Small base 10px — the smallest text used on site
Small Base / 10px / 400 / line-height: normal
03 / Lookbook

Wandering Between
Two Worlds

lorem ipsum, lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing elit. and wander lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.

lorem pertex lorem eVent lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor sit, lorem ipsum dolor sit.

and wander was founded in 2011 by Keita Ikeuchi and Mihoko Mori, both formerly of ISSEY MIYAKE. The brand redefines outdoor wear through the lens of contemporary fashion.

04 / Buttons

Button Variants

View Collection
Primary CTA (underline)
Shop Now
Secondary (border)
Size Guide
Text Link (muted)
View Collection
Shop Now
Inverted (on white bg)
05 / Cards

Product Cards

Jacket

pertex wind jacket

¥38,500
Bag

mesh daypack

¥22,000
Pants

light hike pants

¥28,600
06 / Forms

Form Elements

Default: border #333333, bg #222222, radius 0
Focus: border #ffffff
Error: border #cc3333
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none / border only
Level 1
0 1px 4px rgba(255,255,255,0.05)
Level 2
0 4px 16px rgba(255,255,255,0.08)
and wander is an entirely flat brand. Elevation is not used in production. These subtle light-on-dark glows are provided as theoretical levels only.
08 / Layout

Grid System

2 Column
1 / 2
2 / 2
3 Column (Product Grid)
1 / 3
2 / 3
3 / 3
4 Column (Lookbook)
1 / 4
2 / 4
3 / 4
4 / 4
Content Widths
Full Width 100%
Content Max 1080px
Editorial 680px
Form / Narrow 400px
Generated from andwander.com DESIGN.md — awesome-design-md-jp