BETWEEN CITY
AND NATURE

都市と自然の間を旅する

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
自然のなかでの体験を、都市の日常に持ち帰る。and wander のものづくりは、その境界線を曖昧にすることから始まる。
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

山を歩き、街に戻る。その二つの世界を行き来するなかで見えてくる景色がある。and wander は、アウトドアの機能性とファッションの美意識を一枚の服に重ねる。

素材は pertex や eVent など最先端のテクニカルファブリックを採用しながらも、シルエットは都市で着ても違和感のない端正さを保つ。軽量で、コンパクトに収納でき、そして何より美しい。

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