Design System Preview

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。CSS Custom Properties および computed style 実測値に基づく。

View DESIGN.md
01 / Colors

Color Palette

Text
Text
#3a3a3a
--color-text
Body Text
#333232
--color-body-text
Overlay Title
#ffffff
画像上テキスト
Blankstate
rgba(51,50,50,0.35)
空状態テキスト
Background
Background
#ffffff
--color-bg
Background Alt
rgba(51,50,50,0.05)
--color-bg-alt
Video BG
#f2f2f2
動画プレースホルダー
Button
Primary
#3a3a3a
--color-btn-primary
Primary Darker
#212121
ホバー時
Primary Text
#ffffff
ボタンテキスト
Border
Border
#ebebeb
--color-border
Form Border
#cccccc
--color-border-form
Form Darker
#b3b3b3
フォーカス時
Semantic
Sale
#ea0606
唯一のアクセントカラー
Image Overlay
#685858
画像オーバーレイ
02 / Typography

Type Hierarchy

NEW IN
28px / 400 / line-height: 1.0 / letter-spacing: normal新着セクション
COLLECTION HEADING
20px / 700 / line-height: 1.0 / letter-spacing: 0.03emコレクション見出し
一般見出し — Heading 2
20px / 400 / line-height: 1.0 / letter-spacing: normal一般見出し
VIEW MORE
16px / 400 / line-height: 1.0 / letter-spacing: normalナビリンク
2026.05.22 THU
14px / 400 / line-height: 1.0 / letter-spacing: normal日付
Navigation Link
13px / 400 / line-height: 1.0 / letter-spacing: 0.03emナビゲーション
サブヘッダー — Subheading (h3)
12px / 400 / line-height: 1.3 / letter-spacing: 0.03emサブヘッダー
¥38,500 (tax included)
12px / 400 / line-height: 1.4 / letter-spacing: normal価格表示
Footer text — Copyright / Legal
10px / 400 / line-height: 1.6 / letter-spacing: normalフッター
03 / Product

Product Cards

Product Image
HYKE
CREW NECK L/S TEE
¥16,500
Product Image
HYKE
MILITARY SHIRT JACKET
¥79,200
Product Image
HYKE
WIDE TAPERED PANTS
¥44,000
Product Image
HYKE
PERTEX SHIELD HOODED COAT
¥92,400¥132,000
04 / Buttons

Button Variations

Add to Cart
Primary
View More
Outline
Size S
Small / Filter
VIEW MORE
Text Link
05 / Cards

Card Components

News

2026 SPRING SUMMER COLLECTIONの全ルックを公開しました。オンラインストアにて順次展開いたします。

Read More

Stockist

全国の取扱店舗一覧を更新しました。お近くの店舗でHYKEのコレクションをご覧いただけます。

Read More

About

コンテンポラリーなデザインと確かな品質。日常に溶け込むタイムレスなワードローブを提案します。

Read More
06 / Forms

Form Elements

Default — border: #cccccc
Focus — border: #b3b3b3
Please enter a valid email address.
Error — border: #ea0606
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。border: 1px solid #ebebeb のみ。HYKE の全要素がこのレベル
Form Border
border: 1px solid #cccccc — フォーム入力欄
Background Alt
rgba(51,50,50,0.05) — 微かなグレー背景による区分け
Image Overlay
#685858 — 画像上テキストの可読性確保
08 / Layout

Layout & Grid

Product Grid — 2 columns Full width
Content Area ~960px (estimated)
Navigation Height 56px
Font Size Tokens
65px
mega
35px
h1
26px
header
20px
h2
17px
h4
15px
base
14px
h6
13px
small