Design System Preview
pixiv.net — 日本語版

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

詳しく見る DESIGN.md を読む

01 / Colors

カラーパレット

Brand
pixiv Blue
#0096fa
ブランド・CTA
Blue Dark
#0069b5
ホバー・プレス
Text
Text Primary
#464a4d
本文テキスト
Text Secondary
#8c8c8c
補足テキスト
Text Disabled
#b8b8b8
無効・プレースホルダー
Semantic
Like / Bookmark
#ff4060
いいね・ブックマーク
Danger
#ff0000
エラー・削除
Warning
#f5a623
警告・注意
Success
#00c853
成功・完了
Surface & Background
Background
#eeeeee
ページ背景
Surface
#ffffff
カード・モーダル
Border
#d6d6d6
ボーダー・区切り線

タイポグラフィ階層

作品タイトル — Heading Large
24px / 700 / line-height: 1.5 / letter-spacing: normal / palt: なし作品詳細
セクション見出し — Heading 2
20px / 700 / line-height: 1.5 / letter-spacing: normalセクション
小見出し — Heading 3
16px / 700 / line-height: 1.5 / letter-spacing: normal
本文テキスト — イラスト、マンガ、小説の投稿・閲覧ができるクリエイターのためのプラットフォーム。創作活動を支え、世界中のファンと作品を共有できます。line-height: 22px (x1.57) のバランスの取れた行間。
14px / 400 / line-height: 22px (x1.57) / letter-spacing: normal / palt: なし段落テキスト
リンクテキスト — 14px アンカー
14px / 400 / line-height: 22px / color: #0096faa 要素
小サイズリンク — 12px アンカー
12px / 400 / line-height: 18px / color: #0096faa 要素 (small)
body デフォルト — 12px / 400 / 18px。pixiv の基本テキストサイズ。UI ラベルやメタ情報に使用。
12px / 400 / line-height: 18px (x1.5)body デフォルト
キャプション — 10px / 最小テキスト
10px / 400 / line-height: 14pxCaption

03 / Article — 作品キャプション組版

テキスト組版サンプル

イラストの投稿と公開について

pixiv はイラスト、マンガ、小説の投稿・閲覧ができるクリエイターのためのプラットフォームです。世界中のクリエイターとファンが作品を通じてつながることができます。

作品にはタグを設定でき、他のユーザーが検索やディスカバリーを通じて新しいクリエイターの作品に出会えます。タグの設定方法はこちらをご覧ください。

ブックマークやいいねを通じて、お気に入りの作品をコレクションしたり、クリエイターを応援することもできます。利用規約を確認する


ボタンバリエーション

Bookmark

05 / Cards — 作品カード

カードコンポーネント

1/3

夕焼けの街並みイラスト

オリジナル風景イラストです。夕暮れの光と影のコントラストを意識して描きました。

illustrator_a
1/1

キャラクターデザイン集

オリジナルキャラクターのデザインシート。衣装バリエーションと表情差分を含みます。

creator_b
1/8

背景美術メイキング

背景イラストの制作過程をまとめました。レイヤー構成とブラシ設定の解説付き。

artist_c

フォーム要素

デフォルト — border: #d6d6d6, radius: 4px, height: 36px
フォーカス — border: #0096fa (pixiv Blue)
エラー — border: #ff0000 (danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 1px 4px rgba(0,0,0,0.08) — カード
Level 2
0 2px 8px rgba(0,0,0,0.12) — ドロップダウン
Level 3
0 4px 16px rgba(0,0,0,0.16) — モーダル

スペーシングスケール

4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL

09 / Layout

コンテンツ幅

Max Container 1224px
Content Area 960px
Article / Caption 620px