decorative mode no.3 design products Inc. — Osaka

Design System Preview
graf

DESIGN.md から抽出したデザイントークンのカタログ。モノクロームの面、極細から太字までのウェイトレンジ、余白を活かしたミニマルな組版を可視化する。computed style 実測値(2026-06-23)に基づく。

View tokens graf-d3.com

01 / Colors

Color Palette

Brand / Core
Text / Logo Primary
#1f1f1f
ワードマーク・本文(白地)
Pure Black
#000000
アクセント・図版
Background (Main)
#ffffff
ページ背景・キャンバス
Dark Feature Sections(反転)
Charcoal 1
#1f1f1f
"Who we are" 背景
Charcoal 2
#2f2f2f
フィーチャー面(中)
Charcoal 3
#3f3f3f
フィーチャー面(淡)
Light on Dark / Neutral
Light 1
#f1f1f1
ダーク上の見出し・リンク
Light 2
#bcbcbc
ダーク上の本文
Mid Grey
#9c9c9c
補助・サブテキスト
Cream Accent
#fffbeb
唯一の暖色パネル
Overlays / Semantic(推奨補完値)
Light Chip / Overlay
rgba(255,255,255,0.05)
ダーク上のチップ地
Dark Overlay
rgba(0,0,0,0.04)
白地の薄い面・hover
Danger(推奨)
#c0392b
エラー(低彩度)

02 / Typography — 実測値

Typography

セクション大見出し — Furniture & Products
Inter / 32.4px / 700 / line-height: 1.1 / letter-spacing: normalSection H2
サブ見出し — 暮らしに寄り添う道具
Inter / 27px / 700 / line-height: 1.2 / letter-spacing: normalH3 large
小見出し — FUK テーブル / オーク材
Inter / 18px / 500-600 / line-height: 1.4 / letter-spacing: normalH3 small / card title
EXHIBITION — 極細ラベル ULTRALIGHT 200
Inter / 12.6px / 200 (ultralight) / line-height: 1.43 / normalSmall Label
本文テキスト — graf は、家具・プロダクト・食・デザイン・建築を横断するクリエイティブ・コレクティブです。つくることと暮らすことのあいだを行き来しながら、ものごとの新しい関係を探しています。ABCabc 0123
Inter + Noto Sans JP / 14.4px / 300 / line-height: 2.0 / normal — 非常にエアリーBody
本文(詰め)— 展示やワークショップを通じて、つくり手と使い手の距離を縮める試みを続けています。
Inter + Noto Sans JP / 14.4px / 400 / line-height: 1.5 / normalBody compact
リード — quiet, editorial, design-led(極細 weight 100)
Inter / 12.6px / 100 (thin) / line-height: 1.5 / color: #9c9c9cLead ultralight
Weight Ramp — 100 → 700(graf のシグネチャー)
graf — つくる 100 Thin
graf — つくる 200 ExtraLight
graf — つくる 300 Light
graf — つくる 400 Regular
graf — つくる 500 Medium
graf — つくる 700 Bold
Inter + Noto Sans JP / weight 100-700 を表現的に使い分ける

03 / Editorial — 白地組版

Furniture & Products

PRODUCT — Furniture
FUK テーブル
solid oak, hand-finished — Osaka, 2026

無駄をそぎ落とした構造と、手の跡を残した仕上げ。graf の家具は、長く使われることを前提に、修理しながら受け継いでいける強さを持っています。一枚の天板と細い脚が描くのは、空間に静けさをもたらすための余白です。

素材はオーク無垢材。経年で深まる色合いを愉しみながら、暮らしのなかで育てていく道具として設計されています。

View details Inquiry

Who we are

Furniture / Products Food Design Architecture
Philosophy — decorative mode no.3

graf は 1998 年に大阪で生まれた、デザインのクリエイティブ・コレクティブです。家具職人、プロダクトデザイナー、シェフ、アーティスト、建築家など、異なる専門を持つメンバーが集い、ひとつの「つくる」を分かち合っています。

ジャンルの境界を越えて、暮らしそのものをデザインの対象として捉えること。それが、わたしたちの変わらない態度です。

Read more →

graf kitchen

唯一の暖色アクセント #fffbeb は、特集や引用などごく限られた場面でのみ使います。モノクロームの静けさのなかに、ふっと温度が宿るような扱いが graf らしさです。


04 / Buttons — 低クローム

Buttons

View details
Primary — text link + hairline
black text / underline 1px
Inquiry
Outline
1px solid #1f1f1f / radius 2px
Contact
Solid(強調用のみ)
#1f1f1f / white / radius 2px
Furniture / Products
Nav Chip(実測・ダーク上)
rgba(255,255,255,0.05) / radius 1.8px / 3.6px 9px
Category
Chip(白地)
rgba(0,0,0,0.04) / radius 1.8px

05 / Cards — 罫線・影なし、余白で区切る

Work Cards

🪑
FURNITURE
FUK テーブル
solid oak / 2026
🍶
PRODUCT
片口とぐい呑み
porcelain / Arita
🍞
FOOD
graf kitchen
Nakanoshima, Osaka
🏛️
ARCHITECTURE
アトリエ改修計画
interior / 2025

06 / Forms

Forms

デフォルト — 下線スタイル / border-bottom 1px solid #1f1f1f
フォーカス — border-bottom #000000 + box-shadow 0 1px 0 #000000
正しい電話番号を入力してください
エラー — border-bottom 1px solid #c0392b
Textarea — background: rgba(0,0,0,0.04) / border: 1px solid rgba(0,0,0,0.12) / radius 2px

07 / Elevation — 基本フラット

Depth & Elevation

Level 0 — Flat
none
すべての要素の基本。影は使わない。
Soft(例外的)
0 2px 8px rgba(0,0,0,0.08)
ポップオーバー等のみ。多用しない。
奥行きはセクションコントラストで表現する
White #ffffff
Charcoal #1f1f1f
Cream #fffbeb

08 / Layout — 余白多め

Spacing & Layout

Spacing Scale (8px グリッド)
XS
4px
S
8px
M
16px
L
32px
XL
64px
XXL
128px
Border Radius Scale(ほぼ角)
None
0px — 画像・面
Chip
1.8px — チップ
XS
2px — ボタン・入力
Container Widths
Max Container 1200px
推奨最大コンテナ幅
Desktop Padding 32〜48px
水平パディング(デスクトップ)
Mobile Padding 20px
水平パディング(モバイル)