01 / Colors
Color Palette
9 段スケールで持つ

色は すべて 9 段(-10 が最淡 → -90 が最濃)で定義されている。実装に出ているのはマゼンタ #df003a と ESG・事業部門の色だけで、--color-sub-red / -cream / -blue / -yellow の 4 系統(各 10 段・計 40 個)はクリームの -20 を除いて可視 0 要素。「サブカラーが 4 色ある」と読まないこと。

10
20
30
40
★50
60
70
80
90
TOMOWEL Magenta
#df003a(--color-main / --color-link)
★可視 21 要素。ロゴ・タブ選択・リンク・矢印・現在地
Text
#333333(--color-type / --color-gray-90)
★本文。可視 97 要素
Tag BG
#4d4d4d(--color-gray-80)
★ニュースのカテゴリタグ。可視 41 要素の面
Border
#d9d9d9(--color-border / --color-gray-20)
ボタン・タブの枠(可視 7 要素)
News Cream
#f8f6f1(--color-bg-news)
★トップのページ背景
Background
#f6f6f6(--color-bg / --color-gray-10)
★下層のページ背景
Service BG
#f9e9e9(--color-bg-service)
ナビの「製品・サービス」の面
Danger
#b00000(--color-danger)
エラー表示。薄い側は #f4d7d7

トップと下層で地色が違う。トップは #f8f6f1(クリーム)、下層は #f6f6f6(グレー)。どちらもトークン化されている。

ESG はテキスト -80 / 地色 -10 の組で分ける

Environment
環境
テキスト #57730a(--color-green-80)/ 地色 #f3f9e4(--color-green-10)
Social
社会
テキスト #af4783(--color-pink-70)/ 地色 #fceef6(--color-pink-10)
Governance
ガバナンス
テキスト #1a6394(--color-blue-80)/ 地色 #d8e9f5(--color-blue-10)
Typography
字間を一切触らない

可視 173 要素中 170 要素が letter-spacing: normal(下層は 55/55 = 全部)。CSS 全文でも宣言は 0.1em / 0.2em / 0.01em / 0.4em の 4 つしかなく、本文には 1 つも当たっていない。例外は部門名の 3 要素(24px に 0.1em = 2.4px)だけ。font-feature-settings も 0 要素で、Noto Sans JP の既定の字送りのまま組む。

文字サイズが全段 clamp() の流体

html は 16px 固定だが body 自体が --text-md。4 幅で測ると 1440px → 16px / 1200px → 15.968px / 834px → 15.0896px / 375px → 14px と連続的に動く。px で書き写すとブレークポイント間で別物になる。

Tokenclamp 式1440px1200px834px375px
--text-2xs0.625rem, 0.568rem + 0.24vw, 0.75rem1211.9711.0910
--text-xs0.75rem, 0.693rem + 0.24vw, 0.875rem1413.9713.0912
--text-sm0.813rem, 0.756rem + 0.24vw, 0.938rem15.0114.9814.1013.01
--text-md ★本文0.875rem, 0.818rem + 0.24vw, 1rem1615.9715.0914
--text-lg1rem, 0.943rem + 0.24vw, 1.125rem1817.9717.0916
--text-xl1.063rem, 0.977rem + 0.36vw, 1.25rem2019.9518.6317.01
--text-2xl1.125rem, 0.955rem + 0.73vw, 1.5rem242421.3718.02
--text-3xl ★見出し1.25rem, 0.966rem + 1.21vw, 1.875rem3029.9825.5520
--text-4xl1.375rem, 0.977rem + 1.7vw, 2.25rem363629.8122.01
--text-5xl1.625rem, 1.17rem + 1.94vw, 2.625rem424234.9026

行間も 5 段のトークン

--line-height-xs: 1.4 — ナビ・UI(28 要素)
企業情報/IR情報/ニュースリリース/サステナビリティ/採用情報
--line-height-sm: 1.5 — カードのタイトル(16 要素)
分別可能なラミネートチューブ容器を開発
--line-height-md: 1.6 ★既定(56 要素・最多)
本文もセクション見出しもこの値。見出しだけ詰める設計ではない。
--line-height-lg: 1.8 — 読み物(40 要素)
お客さま、お取引先、社会、そして地球。関わるすべてと共に歩む。

--line-height-xl: 2.2 は宣言のみで実装 0 要素。「このサイトは行間 2.2 を使う」と読まないこと。

Section Heading ★--text-3xl(30px)/ 700
lh 1.60 / ls normal / Lato
News Release
Page Title(下層)--text-4xl(42px)/ 700
lh 1.60 / ls normal
企業情報
Stat Number ★54px / 500 / lh 1.20
Roboto(数値専用)
99.9%
Department Name24px / 500
ls 0.1em(= 2.4px)
※字間を空ける唯一の箇所
情報コミュニケーション部門
Sub Heading--text-lg(18px)/ 500〜700
lh 1.60
非財務ハイライト
Body ★--text-md(16px)/ 500
lh 1.60 / ls normal
共同印刷グループは、情報コミュニケーション・情報セキュリティ・生活産業資材の三つの事業を軸に、印刷技術を応用したソリューションを提供しています。
UI / Nav--text-xs(14px)/ 500
lh 1.40
企業情報 IR情報 ニュースリリース サステナビリティ
Tag--text-2xs(12px)/ 500
ls normal
ニュースリリース 製品・サービス イベント・セミナー

本文の既定ウェイトは 500(Medium)。実測で可視 133 要素が 500、400 はフッターのリンク 6 要素だけ。Noto Sans JP の 400 / 500 / 700 を Google Fonts から読み込んでいるので 500 は合成ではなく実体。600 は存在しない(トークンにも無い)。
--font-serif(游明朝のスタック)と koharu の @font-face は、どちらも可視 0 要素。宣言はあるが使われていない。

03 / Components
Components
ピルと角丸 10px のカード

CTA は 白地 + 1px の枠 + border-radius: 40px、タブは 60px、カードは --r-l(10px)+ --shadow-l。タグだけ --r-s(3px)。--r-m(6px)は実測 0 要素。

すべての製品・サービスを見る→ PDF版→ 動画版→
↑
リサイクル率
99.9%
男性の育児休業取得率
100.0%
女性役員比率
27.3%
ニュース画像
2026.10.02製品・サービス
分別可能なラミネートチューブ容器を開発
イベント画像
2026.09.28イベント・セミナー
「TOKYO PACK 2026」に出展します
サステナビリティ画像
2026.09.14サステナビリティ
共同印刷グループのミライに向けた取り組みをご紹介

数字(日付・業績)は --font-num(Roboto)で組む。和文と欧文と数字で書体を分ける 3 本立ての設計。

Forms
入力欄も既定ウェイトは 500

input / select はフォント継承が効かないので、font-family と font-weight: 500 を明示的に当て直す。枠は --color-input-border(#676767)、ホバーで #4d4d4d。

法人格を含めてご入力ください
フォーカスリングは #df003a
お問い合わせ内容を入力してください
該当する部門をお選びください
05 / Elevation
Depth & Elevation
影は 3 段のトークン

--shadow-s と --shadow-m は y オフセット 0 の全方向の影、--shadow-l だけ y に 4px 落ちる。カードを浮かせるのが --shadow-l、ボタンの縁取りが --shadow-s / --shadow-m という使い分け。

Level 0
none(枠線で分ける)
--shadow-s
0 0 6px rgba(0,0,0,.12)
ページトップボタン(1 要素)
--shadow-m
0 0 8px rgba(0,0,0,.16)
CTA ボタン(1 要素)
--shadow-l ★
0 4px 24px rgba(0,0,0,.12)
カード(11 要素)

抽出でもう 1 つ検出される rgba(0,0,0,0.15) 0 0 2px, rgba(0,0,0,0.3) 0 2px 10px は Cookie 同意バー(trust360)のもので、サイト本体の語彙ではない。

Layout
余白は N × 4px

--space-* が 34 段。値は常に「トークン番号 × 4px」(--space-6 = 24px)。別に --10px 〜 --60px という rem を px の名前で引くためのトークンも 22 段ある。

1
4px
2
8px
4
16px
6
24px
8
32px
10
40px
16
64px
24
96px
1280px — 全幅寄りのブロック
1200px — ★コンテナ(実測 3 要素で最多)
782px — 本文カラム
412px — カード
--r-s 3px ★タグ
--r-m 6px(実測 0)
--r-l 10px ★カード
40px ★CTA ピル
60px ★タブ
0 0 10px(お問い合わせ)

文字サイズはメディアクエリで上書きする必要がない。全段が clamp() の vw 連動なので、ブレークポイントをまたいで連続的に動く。行間は比率トークンなのでサイズに追従して自動で広がる。