あなたと、
世界をもっとユニークに。
色COLORS
Brand
Brand Red
#df1b26
欧文見出し・NEW バッジ・現在位置ドット。面としては小さく、点で強く使う
Ink
#282828
基本テキスト色。純黒ではない。アウトライン CTA の枠線でもある
Neutral
Background
#ffffff
ページ地色
Gray
#999999
画像上のカテゴリラベル・非活性ドット
Surface
#f5f5f5
フッター・ユーティリティ面・入力欄の 2px 枠
Beige
#eae5df
コンセプトセクションの面。白地に温度を足す唯一のニュートラル
Border Light
#f1f2f3
ブランドチップの枠
Border
#dbdbdb
フッターのリンクボタンの枠
Component Tokens — 11 色 × 2 段（色鉛筆の色数をそのままトークンに）
yellow
#FFD72E / #FFBA00
orange
#F4A556 / #F77A1E
red
#E5838F / #C30018
pink
#E38DCC / #D60F82
purple
#9389ED / #785ED1
blue
#80A7FF / #415EFD
bluegreen
#52C196 / #088D6F
green
#8ED878 / #68C100
brown
#C1986F / #966200
khaki
#D5C441 / #B7A200
gray
#919FB2 / #6F7680

上段が --component-background-*（淡い面色）、下段が --component-primary-*（同色相の濃い文字・線色）。ブランドカラー 1 色で塗り固めないのが三菱鉛筆の設計。

組版TYPOGRAPHY
ニュースWHAT'S NEW
和文 Noto Sans JP 28px / 700 / lh 1.0 / ls 0.05em ＋ 欧文 Open Sans 16px / 400 / 色 #df1b26セクション見出し — 和文と欧文の 2 段組み
三菱鉛筆 企業情報
COMPANY INFO
和文 24px / 700 / lh 1.7 / ls 0.05em ＋ 欧文 Open Sans 16px / 500導線見出し — 欧文が黒のパターンもある
ブランド・シリーズでさがす
22px / 700 / lh 1.82 (40px) / ls 0.05em (1.1px)サブ見出し — 左に 3px の罫
「描くこと」には、違いを可視化して学び合い、本質を浮き彫りにする力がある。
Noto Serif JP 24px / 400 / lh 1.3 (31.2px) / ls normal読み物の見出し — UI はゴシック、コンテンツは明朝
すべての人は個性ある表現者であり、その違いこそが美しい。
さまざまなジャンルの創作や発信と、筆記具あるいは「書く・描く」ことの関係性を、インタビューの数だけ見つけていきます。
15px / 500 / lh 2.53 (38px) / ls normalリード文 — 極端に開いた行間。通常の本文に流用しない
三菱鉛筆の商品やサービスについて、よく寄せられたご質問に対する回答と、お問い合わせの窓口をご覧いただけます。本文は 14px / weight 500 / line-height 1.71 / letter-spacing 0.05em。1 行で置くラベルは line-height 1、折り返す本文は 1.7 以上、という二分法で組みます。
14px / 500 / lh 1.71 (24px) / ls 0.05em (0.7px)本文
COPYRIGHT MITSUBISHI PENCIL COMPANY, LIMITED All Rights Reserved.
Open Sans 12px / 400 / lh 1.0 / ls 0.05em (0.6px)フッターの著作権表記 — 欧文は Open Sans
検索
10px / 500 / lh 1.0 / ls 0.05em (0.5px)アイコン下のラベル — 最小サイズ
ニュースWHAT'S NEW
2026.06.30 プレスリリース
“自分らしさ”をテーマに表現する第5回アートコンテストを開催
「パラリンアート」のオフィシャルパートナーとして、本年も全国の障がい者を対象にしたアートコンテストを実施いたします。
2026.06.25 商品
『uniball ZENTO（ユニボール ゼント）スタンダードモデル 3色ボールペン』発売
「かく」ひと時を心地よく。やわらかい書き心地の『uniball ZENTO』スタンダードモデルから、3色ボールペンが登場。
2026.06.17 商品 NEW
『&knot』新発売
「Write it, wear it」書くことも、装うことも、もっと自由でいい。オフィスやお出かけ先などで、ふとした瞬間にサッとかける、カラビナ付き油性ボールペンが新登場。
もっとみる　→

主要 CTA は面色を持たない。1px solid #282828 のアウトライン矩形（radius 0）。赤は CTA ではなくバッジと欧文見出しに使う。

10億人の表現者
すべての人は個性ある表現者であり、その違いこそが美しい。
さまざまなジャンルの創作や発信と、筆記具あるいは「書く・描く」ことの関係性を、
インタビューの数だけ見つけていきます。
Interview
「描くこと」には、本質を浮き彫りにする力がある。
本園 大介さん（グラフィックレコーダー）
Interview
手を動かすことでしか、たどり着けない場所がある。
— さん（イラストレーター）
Interview
書く速度と、考える速度を揃えたい。
— さん（編集者）

インタビューカードには --component-primary-* の 11 色から 1 枚ずつ違う色を当てる。グラデーションにはしない。

ボタンとバッジBUTTONS & BADGES
もっとみる　→
Primary — 面色なし / 1px solid #282828 / radius 0
複数条件で詳しく商品を検索　→
Primary 幅広 — padding 16px 35px 16px 16px
三菱鉛筆オンラインショップ　↗
Secondary — 1px solid #dbdbdb
ジェットストリーム
Brand Chip — 1px solid #f1f2f3
商品 プレスリリース NEW Interview ボールペン ← 塗り（#282828）と枠（#df1b26）のペアで種別を出し分ける
商品カテゴリからさがす
ボールペン
多機能ペン・カスタマイズペン
シャープ
鉛筆・色鉛筆
ジェットストリーム ユニボール ワン uni クルトガ ポスカ
くわしくさがす　→
フォームFORMS
デフォルト — 2px solid #f5f5f5 / radius 0（細罫ではなく太めの薄い枠）
フォーカス — border #282828（2px のまま色だけ変える）
エラー — border #c30018（--component-primary-red。ブランドレッドより深い赤で通知と区別する）
Textarea も radius 0
奥行きELEVATION
Level 0
none
カード・ボタン・バッジすべて
Level 1
0 4px 16px rgba(40,40,40,.1)
固定ヘッダーのみ
Scrim
rgba(40,40,40,.25)〜.3
画像の上に文字を置くとき

奥行きは 白 #ffffff × 極薄グレー #f5f5f5 × ベージュ #eae5df の面のコントラストで作る。影を落とすのはヘッダーだけ。

レイアウトLAYOUT
XS 4
S 9
M 16
L 22
XL 45
XXL 80
Main Container 1168px（--conteint-width）
カードグリッド 3 カラム / gutter 24px

パディングに 4px 4px 5px 10px 40px 10px 15px のような上下非対称の値が現れる。和文の字面を補正するために下側を 1px 多く取る実装。

Generated from mpuni.co.jp DESIGN.md — awesome-design-md-jp / computed style 実測値（2026-08-16）
実サイトの書体は "Noto Sans JP"（和文・UI）／"Open Sans"（欧文ラベル）／"Noto Serif JP"（読み物見出し）の 3 系統で、すべて Google Fonts からそのまま読み込める。代替フォントは使っていない。
border-radius はカルーセルのドット（50%）を除きすべて 0。影はヘッダーの 1 つだけ。