Design System Preview
BAYCREW'S STORE

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


01 / Colors

カラーパレット

Brand Accent
Accent Cyan
#00a6dd
アクティブ状態・リンク
Monochrome Scale
Black
#000000
本文・見出し
Dark Gray
#333333
検索ボタン・バッジ
Footer Text
#555555
フッター情報
Sub Text
#666666
ラベル・レコメンド
Muted
#999999
日付・非アクティブ
Border
#cccccc
区切り線・枠
Surface Footer
#f0f0f0
フッター背景
White
#ffffff
ページ背景
Semantic(推奨補完値)
Danger / Sale
#cc0000
セール・エラー
Success
#2d8c3c
在庫あり・完了
Warning
#cc8800
残りわずか

02 / Typography — 実測値

タイポグラフィ階層

BAYCREW'S STORE — Logo / h1
18px / 400 / line-height: 1.5 / letter-spacing: 0.15emロゴ・h1
RANKING — Section Heading EN (h2)
18px / 400 / line-height: 2.39英語セクション見出し
新着アイテム — 日本語セクション見出し (h2)
16px / 400 / line-height: 1.375 / letter-spacing: 1.2px (0.075em)日本語見出し
WOMEN / MEN — Gender Navigation
14px / 400 / line-height: 2.0 / active: #00a6dd, inactive: #999性別ナビ
本文テキスト — 12px ベースの高密度な商品情報テキスト。weight 400 のヒラギノ角ゴ Pro で組まれた、装飾を排したユーティリタリアンなタイポグラフィ。palt や letter-spacing の調整は一切行われていない。
12px / 400 / line-height: 1.83 / letter-spacing: normal / palt: なし本文
フッターテキスト — Footer Body (14px)
14px / 400 / line-height: 1.57 / color: #555フッター
インフォメーションタイトルリンク — Info Link
12px / 400 / line-height: 1.83 / color: #00a6dd情報リンク
2026.06.10 — Date / Muted Text
12px / 400 / line-height: 1.83 / color: #999日付
PICK UP / RECOMMEND — Recommendation Label
10px / 400 / line-height: 1.0 / color: #666レコメンドラベル
Copyright © BAYCREW'S CO.,LTD. ALL RIGHTS RESERVED.
10px / 400 / line-height: 2.2 / color: #555コピーライト
1
Arial 10.2px / 700 — サイト内で唯一の bold 要素ページャードット

記事ページの組版サンプル

2026 Summer Collection — 夏の新作アイテム

2026.06.10

今季のテーマは、洗練されたリラクシングスタイル。上質な素材感と計算されたシルエットで、日常の装いに心地よい緊張感を。JOURNAL STANDARD と IENA のデザイナーが語る、今シーズンのキーピース。

コーディネートのポイント

リネンブレンドのワイドパンツにオーバーサイズのシャツを合わせた、ジェンダーレスなスタイリング。足元はレザーサンダルでリラックス感をプラス。アクセサリーはシルバーのバングルをひとつだけ。引き算の美学で、素材の良さを引き立てます。

特集ページを見る


04 / Buttons

ボタン・インタラクティブ要素

Buttons
Search Submit
Footer Link
Danger(推奨)
Gender Toggle
Active
Inactive
Pager Dots
1
Active
2
Inactive
3
Inactive
4
Inactive
5
Inactive

05 / Cards — 商品カード

プロダクトカード

IMAGE
3:4
JOURNAL STANDARD
リネンブレンド オーバーサイズシャツ
¥14,300
IMAGE
3:4
IENA
コットンボイル ティアードスカート
¥18,700
IMAGE
3:4
Deuxieme Classe
シルクカシミヤ ニットカーディガン
¥23,100¥33,000
IMAGE
3:4
EDIFICE
SOLOTEX ストレッチ テーパードパンツ
¥16,500

06 / Forms

フォーム要素

Search Input + Button
デフォルト — border: #cccccc, radius: 0px, height: 28px
Input States
デフォルト — border: #cccccc
フォーカス — border: #00a6dd
正しいメールアドレスを入力してください
エラー — border: #cc0000

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし(支配的)
Level 1
ホバー時カード
Level 2
ドロップダウン
Level 3
モーダル

08 / Layout

スペーシング・レイアウト

Spacing Scale
4px
8px
16px
24px
32px
48px
Content Widths
Main Container 960px
Article Content 620px
Product Grid (4col) 960px
Grid
1
2
3
4
4-column grid / gap: 16px — 商品一覧レイアウト