DNP ブルー1色でブランドを立て、面は白と極薄のブルーグレーだけで構成する。オレンジは「お問合わせ」1箇所のための色。
<a> / <p> の computed に rgb(0, 0, 255) が出るが、これらは直下が <img> だけでテキストノードを持たないバナーリンク。文字が描画されないので画面には出ない。ブランドの青として採用してはいけない。見出しは DNP 自社書体の 秀英角ゴシック金 B JIS2004、本文は Noto Sans JP。すべてのスタックの先頭には約物半角の YakuHanJP が置かれる。字間は全要素 normal、palt は 0 件。
body 自体は font-size: 16px / line-height: 16px（＝1.0）というリセット値。行間は各コンポーネントが個別に持つので、body の値を本文の行間として引き継いではいけない。
日付カラムは #eeeff3 の帯、種別は #5365ac のバッジ。角丸はどこにも入れない。
「P&I」は Printing（印刷）と Information（情報）を掛け合わせた、DNPの強みを表す言葉です。150年近く積み上げてきた微細加工と表面処理の技術に、情報を安全に扱う仕組みを重ねることで、これまでになかった価値を生み出していきます。
本文の行間は 1.6、字間は入れません。日本語の可読性は字間ではなく行間と1行の長さで確保する、という方針が全ページで一貫しています。
すべて border-radius: 0。矢印・アイコン分の余白は padding の左右非対称で確保する。
Primary は padding: 12px 48px 12px 16px。右の 48px は矢印アイコンの領域。Accent は 12px 40px 12px 14px、Outline は 10px 25px 10px 20px。
Large Nav Card は padding: 25px 34px 25px 120px。左の 120px がアイコンの領域。
影を使わず、1px solid #666666 の枠だけで面を切る。
事業内容や数字など、会社の全体像を簡潔に紹介しています。
2026年10月、DNPは創業150周年を迎えます。
これまで「未来のあたりまえ」をつくってきたDNPの姿勢を紹介します。
多くのパートナーの皆さまとともに、新しい価値を創造していきます。
入力欄も角丸なし。面は #f9f9f9、枠は 1px solid #8c8c8c。
全角で入力してください
フォーカスリングは #1432aa
メールアドレスの形式が正しくありません
セレクトの面は #f9f9f9
このサイトは影を使わない。 DOM 全走査で見つかる box-shadow は白のインセット（実質リセット）だけ。層は面色と枠線で作る。
background: #f9f9f9; box-shadow: none;border: 1px solid #666666; box-shadow: none;background: #e6f1fb; box-shadow: none;コンテナ幅 1200px。おすすめコンテンツは4カラム、ニュースは日付カラム＋本文の2分割。
| Token | Value | 用途 |
|---|---|---|
| XS | 4px | バッジの縦 padding |
| S | 10px | チップ・ボタンの縦 padding |
| M | 16px | ボタンの左 padding |
| L | 20px | グリッドの gutter、カード内側 |
| XL | 25px | 大型ナビカードの縦 padding |
| XXL | 48px | ボタン右のアイコン領域 |
| Breakpoint | Width | 説明 |
|---|---|---|
| Mobile | ≤ 767px | 1カラム。ナビはドロワー |
| Tablet | 768–1279px | 2カラムまで縮退 |
| Desktop | ≥ 1280px | 4カラム / max-width 1200px |