D-BROS（ディーブロス） DESIGN.md

D-BROS（https://www.d-bros.jp/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

1. Visual Theme & Atmosphere

• デザイン方針: デザインオフィス DRAFT のプロダクトブランド。単一フォントスタック（Inter + Yu Gothic） と ビビッドマゼンタ（#fc00d5）のアクセント が特徴。全体を weight 300 の超軽量タイポグラフィで統一し、プロダクトの造形美をコンテンツに語らせるミニマルな設計。Tailwind CSS ベースのユーティリティ構成で、装飾を排したグラフィックデザイナー的美意識が貫かれている
• 密度: ゆったりとしたプロダクトショーケース型。マガジンセクションとプロダクト一覧を大きなビジュアルで展開。テキスト量を絞り、画像で語るアプローチ
• キーワード: Inter × Yu Gothic、マゼンタアクセント、weight 300 統一、Tailwind CSS、デザイナーズプロダクト
• 特徴: ビビッドマゼンタ #fc00d5 が唯一のアクセントカラー。"MORE" リンクやアイコンにのみ使用され、全体のモノトーン基調に強烈なコントラストを生む。ボタンは #333333 の角丸 5px で統一。全テキストが weight 300 という徹底した軽さが、DRAFT のデザイン哲学を体現

2. Color Palette & Roles

Primary（ブランドカラー）

D-BROS のカラーパレットはモノトーン＋単一アクセントの二極構成。

• Brand Black (#1a1a1a): 本文テキスト・見出し（rgb 26, 26, 26）
• Vivid Magenta (#fc00d5): アクセントカラー。"MORE" リンク・矢印アイコンに使用（rgb 252, 0, 213）

Text & Neutral

• Text Primary (#1a1a1a): 本文テキスト（rgb 26, 26, 26）
• Text Secondary (#666666): フッター補足テキスト（rgb 102, 102, 102）
• Text Muted (#333333): ナビゲーション（モバイル）（rgb 51, 51, 51）
• Text on Dark (#ffffff): ボタン上・ダークセクション
• Date Muted: opacity 40%（#1a1a1a に opacity-40 → 実効 rgba(26,26,26,0.4)）

Surface

• Surface White (#ffffff): 標準背景
• Surface Dark (#333333): CTA ボタン・カートボタン背景
• Surface Light (#e5e5e5): 区切り線・ボーダー（rgb 229, 229, 229）

Semantic

• 明示的な Success/Warning/Error カラーは抽出されていない。ECプラットフォーム（Shopify）のデフォルトに準拠と推定

3. Typography Rules

3.1 和文フォント

D-BROS は全テキストに Inter + Yu Gothic の単一フォントスタックを使用。

• Yu Gothic: YuGothic, "Yu Gothic Medium", "Yu Gothic" — Windows 環境では Medium 指定あり
• Inter が先頭に来るため、欧文グリフは Inter で表示される

3.2 欧文フォント

• Inter: 全テキスト共通。欧文部分をカバーし、Yu Gothic の和文グリフと組み合わせ

3.3 font-family 指定

css/* 全テキスト共通 */
font-family: Inter, YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;

フォールバックの考え方:

• Inter を先頭に配置し、欧文の統一感を確保
• Yu Gothic は Medium ウェイトを明示指定（Windows の細字問題対策）
• Tailwind CSS のデフォルト設定をカスタマイズした構成

3.4 文字サイズ・ウェイト階層

3.5 行間・字間

• 本文の行間 (line-height): 1.75（16px / 28px）— Tailwind の leading-relaxed 相当
• 見出しの行間: 1.5
• グローバル字間 (letter-spacing): 0.025em（0.4px at 16px）— 全テキストに均一適用
• ナビゲーション字間: 0.05em（tracking-wider）

ガイドライン:

• letter-spacing 0.025em がグローバルに適用されており、要素ごとの変化は最小限
• weight 300 と広めの line-height 1.75 の組み合わせで、軽やかで読みやすいテキスト
• 日付やラベルには opacity で視覚的階層を作る（opacity-40, opacity-60）

3.6 禁則処理・改行ルール

css/* Tailwind CSS デフォルト */
word-break: normal;
overflow-wrap: break-word;

3.7 OpenType 機能

• font-feature-settings: normal — palt・kern は未使用

3.8 縦書き

該当なし

4. Component Stylings

Buttons

Primary（ダークグレー）

• Background: #333333
• Text: #ffffff
• Padding: 8px 16px
• Border Radius: 5px
• Border: 1px solid transparent
• Font Size: 14px
• Font Weight: 300

Ghost（テキストリンク）

• Background: transparent
• Text: #1a1a1a
• Decoration: underline (hover)
• underline-offset: 4px

"MORE" Links

• Color: #fc00d5（ビビッドマゼンタ）
• Font Size: 16px
• Font Weight: 300
• 矢印アイコンも同色

Inputs

• Border: 0px solid #e5e5e5
• Background: transparent
• Font Size: 16px
• Font Weight: 300

Cards（プロダクト / マガジン）

• Background: #ffffff
• Border: なし
• Border Radius: なし
• Shadow: なし
• テキストは画像の下にフラットに配置

5. Layout Principles

Spacing Scale

Tailwind CSS のデフォルトスケールに準拠。

Container

• Max Width: 約 1280px
• Padding (horizontal): 16px（モバイル）〜 64px（デスクトップ）

Grid

• Columns: 1〜4（レスポンシブ）
• Gutter: 16〜24px

6. Depth & Elevation

D-BROS は完全なフラットデザイン。影・グラデーションは一切使用しない。

7. Do's and Don'ts

Do（推奨）

• 全テキストの font-weight を 300 に統一する
• アクセントカラー #fc00d5 は "MORE" リンクや矢印アイコンにのみ使用する
• letter-spacing 0.025em をグローバルに適用する
• ナビゲーションには tracking-wider（0.05em）を使用する
• 日付やラベルには opacity（40%〜60%）で視覚的階層を作る
• ボタンの角丸は 5px を統一する

Don't（禁止）

• font-weight 400 以上を本文に使用しない（ナビゲーションの 400 は例外）
• マゼンタ #fc00d5 をボタン背景やテキスト全体に使わない（アクセントとしてのみ）
• box-shadow を追加しない
• 追加のフォントファミリーを導入しない（Inter + Yu Gothic の単一スタックを維持）
• border-radius を 5px 以外に変更しない（ボタン以外は 0px）
• テキストカラーに純黒 #000000 を使用しない（#1a1a1a を使用）

8. Responsive Behavior

Breakpoints

Tailwind CSS デフォルトブレークポイントに準拠。

タッチターゲット

• ナビゲーション: padding 16px で十分なタッチ領域を確保

フォントサイズの調整

• 見出しサイズは Tailwind のレスポンシブユーティリティで段階的に縮小
• 本文 16px はすべての画面サイズで維持

9. Agent Prompt Guide

クイックリファレンス

Text Color: #1a1a1a
Accent: #fc00d5 (vivid magenta)
Button BG: #333333
Background: #ffffff
Border: #e5e5e5
Font: Inter, YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif
Body Size: 16px / Weight 300
Line Height: 1.75
Letter Spacing: 0.025em (global)
Border Radius: 5px (buttons only)

プロンプト例

D-BROS のデザインシステムに従って、プロダクト一覧ページを作成してください。
- フォント: Inter, YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif
- 全テキスト weight 300、letter-spacing 0.025em
- 本文 16px、line-height 1.75
- ボタン: #333333 背景、白テキスト、角丸 5px、padding 8px 16px
- "MORE" リンクはマゼンタ #fc00d5
- 日付は opacity-40 で薄く表示
- 影なし、完全フラットデザイン