PRODUCT DESIGN BY DRAFT

D-BROS DESIGN SYSTEM

D-BROS（d-bros.jp）から抽出したデザイントークンのカタログ。Inter + Noto Sans JP（Yu Gothic 代替）の単一フォントスタック、全テキスト weight 300、letter-spacing 0.025em グローバル適用、ビビッドマゼンタ #fc00d5 のアクセント、完全フラットデザイン。computed style 実測値に基づく。

ONLINE STORE MAGAZINE
01 / COLORS
Color Palette
Monochrome + single accent magenta
Primary
Brand Black
#1a1a1a
本文テキスト・見出し
Vivid Magenta
#fc00d5
MORE リンク・矢印アイコン
Text & Neutral
Text Primary
#1a1a1a
本文テキスト
Text Muted
#333333
ナビゲーション（モバイル）
Text Secondary
#666666
フッター補足テキスト
Text on Dark
#ffffff
ボタン上・ダークセクション
Surface
Surface White
#ffffff
標準背景
Surface Dark
#333333
CTA ボタン・カートボタン背景
Border / Divider
#e5e5e5
区切り線・ボーダー
Hierarchy (Opacity)
opacity-60
rgba(26,26,26,0.6)
セクションラベル
opacity-40
rgba(26,26,26,0.4)
日付・タイムスタンプ
02 / TYPOGRAPHY
Typography
Inter + Noto Sans JP / weight 300 / letter-spacing 0.025em global
MAGAZINE
Inter + Noto Sans JP / 28px / 300 / line-height: 1.5 / letter-spacing: 0.025emHeading 1 (hero)
FLOWER VASE
Inter + Noto Sans JP / 22px / 300 / line-height: 1.5 / letter-spacing: 0.025emHeading 2 (section)
フラワーベース「HOPE FOREVER BLOSSOMING」
Inter + Noto Sans JP / 14px / 300 / line-height: 1.625 / letter-spacing: 0.025emHeading 3 (card)
D-BROS は DRAFT のプロダクトブランドとして、グラフィックデザインの力をプロダクトに落とし込む活動を続けています。花瓶、ステーショナリー、テーブルウェアなど、日常に寄り添うデザインプロダクトを展開。
Inter + Noto Sans JP / 16px / 300 / line-height: 1.75 / letter-spacing: 0.025emBody
NEWS
Inter + Noto Sans JP / 12px / 300 / line-height: 1.625 / letter-spacing: 0.025em / opacity: 0.6Section Label
2026.05.01
Inter + Noto Sans JP / 12px / 300 / line-height: 1.625 / letter-spacing: 0.025em / opacity: 0.4Date / Caption
ONLINE STORE
Inter + Noto Sans JP / 16px / 400 / line-height: 1.75 / letter-spacing: 0.05emNav
MORE →
Inter + Noto Sans JP / 16px / 300 / letter-spacing: 0.025em / color: #fc00d5MORE Link (accent)
03 / PRODUCT
Product
Product Page Sample
FLOWER VASE

HOPE FOREVER BLOSSOMING

ビニール素材の花瓶「HOPE FOREVER BLOSSOMING」。水を入れると自立し、一輪の花を美しく際立たせるフラワーベース。グラフィックデザイナーならではの平面から立体への発想転換が、D-BROSの代名詞ともいえるプロダクトを生み出しました。

デザインについて
CONCEPT

花を生けるという行為をもっと身近に、もっと自由に。割れない花瓶、場所を取らない花瓶、贈り物にできる花瓶。従来の花瓶の概念を覆すアプローチで、日常に花のある暮らしを提案します。軽量で持ち運びやすく、使わないときはフラットに収納できます。

CART に入れる MORE
04 / BUTTONS
Buttons
Primary #333333 / radius 5px / weight 300 / MORE links in magenta #fc00d5
CART に入れる
Primary / #333333 / radius 5px / 300
詳細を見る
Ghost / transparent / underline hover / 300
MORE
MORE Link / #fc00d5 / 300
Button States
Default
通常
Hover
ホバー（opacity 0.7）
Disabled
非活性（opacity 0.5）
05 / CARDS
Cards
Completely flat / no shadow / no border-radius / image + text
Product Image
FLOWER VASE

HOPE FOREVER BLOSSOMING

¥1,100
Product Image
STATIONERY

ダイアリー 2026

¥2,200
Product Image
TABLEWARE

プレート セット

¥3,300
Product Image
MAGAZINE
2026.04.15

デザインの力で日常を変える

MORE
06 / FORMS
Forms
Border #e5e5e5 / focus: border #1a1a1a / radius 5px
Default
正しい電話番号を入力してください
Focus
07 / ELEVATION
Depth & Elevation
Completely flat -- no shadows, no gradients
Level 0 -- Flat
全要素共通。影なし
Surface White
#ffffff / 標準背景
Surface Dark
#333333 / ボタン背景
Border
#e5e5e5 / 区切り線のみ
08 / LAYOUT
Layout
Tailwind spacing scale / max-width 1280px
4px
8px
16px
24px
32px
48px
64px
WHITE #fff
LIGHT #fafafa
DARK #333