Design System

UNITED ARROWS Ltd. — Corporate Site

DESIGN.md から抽出したデザイントークンのカタログ。ウォームベージュの背景色、エディトリアルなタイポグラフィ、3つの書体システムを可視化。computed style 実測値に基づく。

Font substitution: 中ゴシックBBB / 見出ゴMB31 → Zen Kaku Gothic New  |  classico-urw → Cormorant Garamond  |  Manrope: native

01 / Colors

Color Palette

Brand / Accent
Terracotta
#b2542b
ブランドアクセント・スライダー
Accent Blue
#2c7ab9
リンク・フォーカス
Text
Text Primary
#000000
本文テキスト
Text Secondary
#6f6f6f
日付・補足テキスト
Text White
#ffffff
フッター・暗色面テキスト
Background / Surface
Page Background
#eeebea
ページ背景(ウォームベージュグレー)
Surface
#f2f1f0
タグ背景・セクション
Surface Mid
#e6e6e6
ホバー・区切り
Card Surface
#ffffff
カード背景
Border
#d0d0d0
ボーダー
Footer
#404040
フッター背景
Semantic
Error
#c53030
エラー・バリデーション
Focus
#2c7ab9
フォーカスリング

02 / Typography

Typography Hierarchy

Display Gothic
Zen Kaku Gothic New / 60px / 700 / line-height: 1.2 / letter-spacing: 0.02emH2 Hero (見出ゴMB31)
セクション見出し
Zen Kaku Gothic New / 50px / 500 / line-height: 0.9 / letter-spacing: -0.03emH2 Section
Editorial Serif Title
Cormorant Garamond / 40px / 400 / line-height: 1.2 / letter-spacing: -0.03emH3 English (classico-urw)
お知らせ見出し — Notice Heading
Zen Kaku Gothic New / 16px / 500 / line-height: 1.5 / letter-spacing: 0.02emH3 Notice
リード文テキスト。ファッションとクラフトマンシップの融合が生み出す、上質な日常のための提案。
Zen Kaku Gothic New / 26px / 500 / line-height: 1.85 / letter-spacing: 0.02emBody Lead
本文テキスト — ユナイテッドアローズは、豊かさ・上質感のある生活文化の提案を通じて、お客様の期待に応え続けてまいります。font-feature-settings は normal(palt なし)。ABCabc 123
Zen Kaku Gothic New / 16px / 500 / line-height: 1.875 / letter-spacing: 0.02em / palt: なしBody
STYLING FEATURE NEWS
Zen Kaku Gothic New / 12px / 500 / letter-spacing: 0.03em / bg: #f2f1f0 / radius: 2pxTag
2024.12.15
Manrope / 14px / 400 / color: #6f6f6fDate (large)
2024.12.15
Manrope / 10px / 500 / color: #6f6f6fDate (small)
フッターナビゲーション
Zen Kaku Gothic New / 12px / 500 / color: #ffffff / bg: #404040Footer Nav
UNITED ARROWS — 1,234,567
Cormorant Garamond / 英文セリフ + 数字表示

Editorial Sample

素材と向き合う

The Art of Material

カシミヤの手触り、リネンの透け感、シルクの光沢。一着の服は、素材との対話から始まる。

ユナイテッドアローズが大切にしているのは、素材そのものが持つ力を最大限に引き出すことです。産地を訪ね、織り手と語り、糸の一本一本に宿る物語を理解する。そうした積み重ねが、着る人の日常を少しだけ豊かにする一着へとつながっていきます。

継承と革新

伝統的な技法を守りながらも、現代の感性にフィットするデザインを追求する。それは矛盾ではなく、上質なものづくりに欠かせない両輪です。職人の手仕事が生み出すテクスチャーは、量産では決して再現できない豊かな表情を持っています。

Craftsmanship in Detail

The beauty lies not in decoration, but in the quiet confidence of well-chosen materials and precise construction. Each stitch, each seam speaks to a standard that values longevity over trend.

お知らせ

2025年春夏コレクションのルックブックを公開しました。今季のテーマは「境界を超える」。素材の可能性を拡張する新しい試みにご期待ください。

STYLING FEATURE CRAFTSMANSHIP

04 / Buttons

Button Variations

UNITED ARROWS コーポレートサイトは目立つ CTA を置かず、タグスタイルのボタンが中心。控えめで上品なインタラクションを特徴とする。

STYLING
Tag (default)
FEATURE
Tag (default)
NEWS
Tag (default)
NEW
Tag (accent)
VIEW MORE
Outline (dark)
PRIVACY POLICY
Footer link
Tag Spec
bg: #f2f1f0 / radius: 2px / padding: 2px 8px / font: 12px 500 / letter-spacing: 0.03em

05 / Cards

Card Components

Image
2024.12.15

2025年春夏コレクション ルックブック公開

素材の可能性を拡張する新しい試みを、全編撮り下ろしのビジュアルでお届けします。

FEATURE STYLING
Image
2024.11.28

職人の手仕事:岡山デニムの現在地

世界が認める日本のデニム。産地を訪ね、織り手と語り、その技術と哲学を探ります。

CRAFTSMANSHIP
Image
2024.11.10

サステナビリティレポート 2024 公開

環境配慮型素材の採用率、リサイクルプログラムの実績など、取り組みの進捗をご報告します。

NEWS

06 / Forms

Form Elements

Default — border: #d0d0d0, radius: 0
Focus — border: #2c7ab9
正しいメールアドレスを入力してください
Error — border: #c53030

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ
Elevation 1
カード・リスト
Elevation 2
ホバー・ドロップダウン
Elevation 3
モーダル・オーバーレイ
Focus Ring
#2c7ab9 + box-shadow

08 / Layout

Content Widths

Max Content 1200px
Main Content 960px
Article Body 640px
Form Max Width 420px
Key Characteristics
• ページ背景はウォームベージュグレー #eeebea — 白ではない
• 3書体システム: ゴシック(本文)/ ディスプレイゴシック(見出し)/ セリフ英文 / モノ数字
• 大見出しにネガティブ letter-spacing -0.03em
• font-feature-settings: normal(palt なし)
• テラコッタアクセント #b2542b はスライダー・ブランド要素に使用
• CTA は控えめなタグスタイル(radius: 2px)— ファッションブランドらしい抑制