Engineering for Nature

0 Clothing

Goldwin (goldwin.co.jp) から抽出したデザイントークンのカタログ。デュアルフォントシステム（Untitled Sans + 游ゴシック Medium）、font-feature-settings: "palt", "lnum" グローバル適用、letter-spacing 0.08em 全要素統一、font-weight 300（Light）本文、ダークチャコール #2a292f と白のモノトーンパレット、radius 0px のシャープコーナー CTA。computed style 実測値に基づく。

注文手続きへ お買い物を続ける
01 / Colors
カラーパレット
Color Palette -- モノトーン構成、ダークチャコール #2a292f が軸
Primary
Dark Charcoal
#2a292f
CTA背景・フッター背景・ナビオーバーレイ
Dark Charcoal 60%
rgba(42,41,47,0.6)
オーバーレイ・半透明背景
Text & Neutral
Text Primary
#1a1a1a
メインテキスト（ソフトブラック）
Text on Dark
#ffffff
ダーク背景上の白テキスト
Text Date
#b8b8b8
日付・補足テキスト
Surface
Surface White
#ffffff
標準ページ背景
Surface Light
#f5f5f5
セカンダリ背景面（最多出現）
Surface Brand Light
#f7f7f7
ブランドページフッター背景
Surface Dark
#2a292f
フッター・ナビ・CTAの背景
Border
Border Default
#d9d9d9
カテゴリメニュー・セカンダリボタン枠線
Border Light
#e9e9e9
セパレーター・区切り線
02 / Typography
タイポグラフィ
Typography -- Untitled Sans + 游ゴシック Medium / palt + lnum グローバル / letter-spacing 0.08em 統一 / weight 300 本文
0 Clothing
Inter (Untitled Sans) / 68px / 400 / line-height: 1.0 / letter-spacing: 0.08emDisplay (hero)
Fly Air Jacket
Inter (Untitled Sans) / 26px / 400 / line-height: 1.5 / letter-spacing: 0.08emHeading 2 (section)
ランキング
Noto Sans JP (游ゴシック Medium) / 24px / 300 / line-height: 1.5 / letter-spacing: 0.08emHeading 3 (ranking)
メニュー項目
Inter (Untitled Sans) / 20px / 300 / line-height: 1.2-1.6 / letter-spacing: 0.08em / color: #ffffffNav Menu
カテゴリ
Inter (Untitled Sans) / 14px / 700 / line-height: 1.2 / letter-spacing: 0.08em / color: #ffffffNav Title (footer)
メンズ
Inter (Untitled Sans) / 14px / 700 / line-height: 1.4 / letter-spacing: 0.08em / border: #d9d9d9Menu Item
¥38,500
Inter (Untitled Sans) / 14px / 300 / line-height: 1.4 / letter-spacing: 0.08em / font-feature-settings: "lnum"Price
GORE-TEX INFINIUM WINDSTOPPER を採用した軽量ジャケット。防風性と透湿性を高次元で両立し、トレイルランニングからタウンユースまで幅広いシーンに対応。裏地のマイクロメッシュが快適な着用感を実現する。
Noto Sans JP (游ゴシック Medium) / 12px / 300 / line-height: 1.5 / letter-spacing: 0.08emBody (store)
2026.05.09
Inter (GoldwinGrotesk) / 11px / 400 / line-height: 1.4 / letter-spacing: normal / color: #b8b8b8Caption (date, brand page)
03 / Product
プロダクト
Product Page Sample -- Outdoor Apparel
Jackets / Men

Fly Air Jacket

GORE-TEX INFINIUM WINDSTOPPER を採用した超軽量シェルジャケット。わずか 185g の軽さながら、冷風をシャットアウトし、高い透湿性でランニング中の蒸れを防ぐ。ミニマルなデザインはトレイルからタウンまでシームレスに対応する。

テクノロジー
Specification
素材GORE-TEX INFINIUM WINDSTOPPER
重量185g (Size M)
耐水圧20,000mm
透湿性40,000g/m2/24h
カラーBlack / Foggy Gray / Desert Clay

身体の動きを妨げない立体裁断と、レーザーカットによるシームレスな仕上げ。ポケットは胸元に1つ、止水ジッパーで防水性を確保。裾のドローコードで冷気の侵入を調整できる。パッカブル仕様で、付属のスタッフサックに収納可能。

カートに入れる サイズガイド
04 / Buttons
ボタン
Buttons -- radius 0px シャープコーナー / weight 400 / line-height 56px CTA
注文手続きへ
Primary CTA / filled #2a292f / radius 0px / lh 56px
お買い物を続ける
Secondary / outline #d9d9d9 / radius 0px / lh 56px
メンズ
Category Menu / border #d9d9d9 / 700 / 14px
Dark Background
ストア一覧
Footer Link / radius 6px / 500 / 14px
購入する
Inverted / 白背景 + #2a292f テキスト
05 / Cards
製品カード
Product Cards -- shadow なし / radius 0px / フラット / weight 300
Product Image
Jackets

Fly Air Jacket

¥38,500
3 Colors
Product Image
Pants

Ripstop Stretch Pants

¥25,300
2 Colors
Product Image
Fleece

Polartec Power Grid Hoodie

¥22,000
4 Colors
Product Image
T-Shirts

Merino Wool T-Shirt

¥13,200
5 Colors
06 / Forms
フォーム
Forms -- radius 0px / border #d9d9d9 / focus: border #2a292f / weight 300
Default
正しい電話番号を入力してください
Focus
07 / Elevation
奥行き
Depth & Elevation -- シャドウ一切なし。白 / ライトグレー / ダークの面切り替えで空間を表現
Level 1 -- White
通常面 / #ffffff / shadow: none
Level 2 -- Light
セカンダリ面 / #f5f5f5 / shadow: none
Level 3 -- Dark
ダーク面 / #2a292f / shadow: none
Level 4 -- Overlay
オーバーレイ / rgba(42,41,47,0.6)
08 / Layout
レイアウト
Layout -- Spacing Scale & Grid
16px (XS)
18px (S)
20px (M)
23px (L)
40px (XL)
DARK #2a292f
LIGHT #f5f5f5
WHITE #ffffff