Curiosity is Life

好奇心を人生に — 文具から家具・空間・通販まで、コクヨは「学ぶ・働く・暮らす」の体験すべてに、好奇心を育む道具と場をデザインします。


01 / Category Tiles — KOKUYO の象徴

カテゴリパネル(OKLCH カラーシステム)

Stationery

毎日のものから、一生もの。

Furniture

行動を探求し、家具を究める。

Space

場の変化で、組織を動かす。

Mail Order

便利を超えて、はじまる。

About

領域・社員・歴史のこと

Magazine

ワクワクを探して


02 / Colors — OKLCH 色空間で統一

カラーパレット

Brand Category
--brand_blue
#5dadd1
文具 / oklch(0.79 0.14 221)
--brand_green
#3eb088
家具 / oklch(0.73 0.17 159)
--brand_pink
#e08bbf
空間 / oklch(0.84 0.12 337)
--brand_red
#e76654
通販 / oklch(0.72 0.16 20)
Surface Pastel
--sand
#ecf5d5
ヒーロー黄緑面
--cloud
#dde5e7
企業情報パネル
--lemon
#f0e89a
マガジン
--cream
#f0e9d4
クリーム面
--mint
#9fd9c1
アクセント
--violet
#c5a5e0
アクセント
--apricot
#f5b896
アクセント
--sea
#7ec5d4
アクセント
Text & Surface
--black100
#313131
本文 / oklch(0.27 0 0)
--gray_text
#7a7a7a
補助テキスト
--gray_line
#d4d4d4
区切り線
--gray_bg
#eeeeee
カード背景
--white100
#ffffff
ページ背景

03 / Typography — 実測値

タイポグラフィ階層

Curiosity is Life
Hero — 56px / 700 / lh 1.3 / ls +1px / paltトップ
セクション見出し — Heading 2
Section h2 — 28px / 700 / lh 1.4 / ls +0.5px / paltセクション
ニュースリリース — Heading(実測 19px / weight 500)
Heading — 19px / 500 / lh 1.47 (28/19) / palt小見出し
本文テキスト — KOKUYO の本文は 17px / weight 400 / line-height 1.41(24/17)。HelveticaNowText + 田鶴ゴシック StdN(Morisawa)の混植で、欧米寄りの締まったプロポーション。font-feature-settings: "palt" でプロポーショナル詰めが有効。
Body — 17px / 400 / lh 1.41 (24/17) / palt本文
補助テキスト — Body Muted(領域・社員・歴史のこと)
Body Muted — 17px / 400 / lh 1.41 / color #7a7a7a / palt
カラーパネル上のラベル — Card Label (white on color) / weight 500
Card Label — 17px / 500 / color #ffffff / カラーパネル上 / palt
サイトの動き ON / OFF
Toggle Caption — 11px / 500 / lh 1.82

記事ページの組版サンプル

コクヨデザインの120年と、25年目のコクヨデザインアワード

好奇心を真ん中に

これからは、好奇心を真ん中に、好奇心を世界中へ届けます。文具から家具、空間、通販まで、コクヨの仕事は「学ぶ・働く・暮らす」の現場で人の好奇心を引き出すこと。

本文は HelveticaNowText + 田鶴ゴシック StdN(Morisawa)の混植で、line-height 1.41〜1.7 のリズム。letter-spacing は normal で、palt の自動詰めに任せます。


05 / Buttons

ボタンバリエーション

詳しく見る
Primary (--brand_blue)
家具を見る
Furniture (--brand_green)
通販へ
Mail (--brand_red)
Toggle Pill

06 / Cards

カードコンポーネント

穴あけパンチ(2穴パンチ)の使用中止のお願い

製品の使用中止についてのご案内です。詳細は関連ページをご確認ください。

続きを読む

体験型デザインイベント「コクヨデザインアワード」

コクヨデザインアワードの 25 年目を迎えました。受賞作品と背景にあるストーリーをご紹介します。

続きを読む

CI/VI をリニューアルしました

「Curiosity is Life — 好奇心を人生に」を新しいタグラインに、コーポレートアイデンティティを刷新しました。

続きを読む

07 / Forms

フォーム要素

デフォルト — border #d4d4d4 / radius 0px
フォーカス — 2px border #5dadd1 (--brand_blue)
エラー — 2px border #e76654 (--brand_red)

08 / Spacing — CSS Custom Properties 実測

8px 加算スケール

--space8
--space16
--space24
--space32
--space48
--space64
--space80
--space96
--space112
--space144