Design System Preview — SUZURI

GMO ペパボ共通のデザインシステム Nachiguro（なちぐろ） の上に構築されている。面色はすべて二重の linear-gradient で塗られ、background-color は透明のまま。border-radius: .5rem（8px）が CSS 中 322 回で圧倒的。以下はすべて computed style と nachiguro.css（1.89MB）の実測値（2026-08-27 取得）。

デザイントークンを見るタイポグラフィ

01 / Colors

白地にグレー、青は 1 点だけ

Brand

SUZURI Blue

#067bbf

主 CTA の面・リンク。CSS 出現 1002 回

Primary 500（token）

#007bbb

New! バッジ。ボタンには使われない

Like Red

#bf2213

いいね数の文字。1960 回で全色トップ

Campaign Blue

#2058e5

法人 CTA・FAB。nachiguro.css には 0 回＝SUZURI 独自

Nachiguro Tonal Scale — 6 系統 × 12 段

Primary（--color-primary-*）

100

200

300

400

500

600

700

800

900

Secondary（--color-secondary-*）

100

200

300

400

500

600

700

800

900

Success / Warning / Danger（500 のみ抜粋）

S50

S500

S900

W50

W500

W900

D50

D500

D900

Default（--color-default-*）

100

200

300

400

500

600

700

800

900

Text — 4 色を使い分ける

Body

#3f3f3f

body の既定色（--color-label）

Heading

#393c41

h2 / h3。本文より青みが強い。25 回

Outline Label

#63686b

枠線ボタンのラベル・アイコン。1144 回

Secondary Label

#909090

日付・件数（--color-default-300）

⚠️ トークンの値をそのまま実装しない

見た目	トークンの宣言	CSS 中の実出現	実装値
主 CTA の青	`--color-primary-500: #007bbb`	1 回（宣言のみ）	`#067bbf` が 1002 回
いいねの赤	`--color-danger-500: #e83929`	宣言のみ	`#bf2213` が 1960 回
枠線ボタンの文字	`--color-default-*` 経由	—	`#63686b` が 1144 回

ビルド時に色が焼き込まれており、変数を読んで #007bbb で実装すると 1 トーンずれる。必ず computed style の実測値を採用すること。
また、ページ最上部の GMO グループ帯（#30f4c5）と最下部のグループフッター（#005bac）は全社共通ウィジェットで SUZURI の色ではない。

02 / Typography — 実測値

Open Sans 先頭の欧文優先。本文は line-height 1.8

人気のアイテム

26px / 700 / line-height: 40px (1.54) / color: #393c41h2 — セクション大見出し

クリエイターを探す

21px / 700 / line-height: 32px (1.52) / color: #393c41h3 — ブロック見出し

SUZURI

21px / 700 / line-height: 24px (1.14) / color: #3a3e40header — ロゴ・ナビ見出し

オリジナルグッズのつくりかた

16px / 700 / line-height: 28.8px (1.8) / color: #006fa8h3 — リンクになる小見出し

画像を 1 枚アップロードするだけで、T シャツ・スマホケース・マグカップなど 50 種類以上のアイテムに自動で反映されます。在庫を持たずに販売でき、注文が入ってから 1 点ずつ製造して発送します。

16px / 400 / line-height: 28.8px (1.8) / color: #3f3f3f / letter-spacing: normalbody の既定

リスト内やボタン内はこちらの 1.5（24px 固定）。CSS 中 line-height: 1.5rem が 96 回で最頻。

16px / 400 / line-height: 24px (1.5)list / button

スタンダードTシャツ

まるまるショップ／ 2026年8月20日

13px / 700 (商品名) ・ 13px / 400 / color #909090 (補足) ／どちらも line-height: 23.4px (1.8)product card

Tシャツ　パーカー　スマホケース　ステッカー

14px / 700 / line-height: 48pxnav.category-navigation

font-family（実測 3 種）

対象	指定
サイト全体	`"Open Sans", "Noto Sans JP", apple-system, "system-ui", Roboto, "Lucida Grande", Helvetica, Arial, sans-serif`
アイコン	`"Nachiguro Icons"`（ペパボ専用のアイコンフォント。CSS 中 22 回）
ペパボ共通フッター	`"Noto Sans JP", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`

※ 欧文優先。Open Sans を先頭に置き、価格・件数・クリエイター名の欧文を Open Sans で組む。和文は Noto Sans JP に落ちる。
※ フッターだけ和文優先（ペパボ共通コンポーネント）。1 サイト内で 2 つの方針が同居している。
※ letter-spacing は CSS 中の宣言 21 個がすべて normal。日本語でも字間を触らない。
※ font-feature-settings の宣言が1 つも無い（＝ palt を使わない）。
※ このプレビューは実サイトと同じ Open Sans + Noto Sans JP を Google Fonts から読み込んでいる。アイコンだけ記号で代用。

03 / Product — 組版サンプル

Tシャツ（メンズ・レディース）

🐈

ねこがのびてるTシャツ

のびねこ商店

¥3,080♥ 11.2K

🍜

深夜の中華スープ

まかない工房

¥3,080♥ 792

🏔

山に登るときのTシャツ

アウトドア小屋

¥3,300♥ 348

🦔

はりねずみビッグT

とげとげ舎

¥4,180♥ 96

Ranking Medals — 金・銀・銅、4 位から白地

1 位 #fbca4d（warning-500）／ 2 位 #b0b0b0（default-200）／ 3 位 #ce4216（secondary-600）／ 4 位〜白地＋ 1px solid #d0d0d0。すべて radius 32px・14px / 700

04 / Buttons

高さ 40px・radius 8px・weight 400。面は二重グラデーション

自分用につくる

Primary
linear-gradient(#067bbf,#067bbf)
radius 8px / h 40px / 16px / 400

Outline
白地 / 文字 #63686b
1px solid rgba(57,60,65,.2)

お問い合わせ・ご相談

Ghost
面なし / 文字 #63686b

Ghost (blue)
面なし / 文字 #067bbf

自分用につくる

Segmented
#dfdfdf / 文字 #3f3f3f
14px / 400

法人ノベルティをつくる

Campaign
#2058e5（SUZURI 独自）

Chat
#3f3f3f / radius 20px
13px / 600 / padding 6px 12px 6px 8px

Badges

New! 人気アイテム

New!: #007bbb / 白文字 / radius 500px（ピル）/ padding 4px 8px / 12px・400　｜　人気アイテム: #e6f2f8 / #00507a / radius 0px（角）/ padding 4px 8px / 12px・700

.ncgr-button の骨格

プロパティ	値
height	`2.5rem`（40px）。大は `3rem`（48px）／ `3.5rem`（56px）
padding	`0`（高さで決め、上下 padding を持たない）
border-radius	`.5rem`（8px）
font-size / weight / line-height	`1rem` / `400` / `1.5rem`
gap	`.25rem`（アイコンとラベルの間）
白背景の塗り方	`background-image: linear-gradient(色, 色)` の二重指定。`background-color` は透明のまま
hover	色を差し替えず `linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08))` を1 枚重ねる
text 制御	`white-space: nowrap` ＋ `text-overflow: ellipsis`。ラベルは 8 文字前後に収める

05 / Forms

Default / Focus / Error

ショップ名

Default — 1px solid rgba(57,60,65,.2) / radius 8px / h 40px

アイテム名

Focus — border #067bbf ＋ 2px のリング

価格

価格は 100 円以上で設定してください

検索バーだけ面色が #dfdfdf（--color-search-bar-background）。プレースホルダは rgba(0,0,0,0.2)（--color-placeholder-text）。

06 / Elevation

浮かせるためではなく「縁」を作るために使う

Level 0
none
1160 回

Level 1

0 -.1px 1px rgba(0,0,0,.12),
0 1px 2px rgba(0,0,0,.12)

420 回／ボタンの既定

Level 1'
上に 0 -2px rgba(0,0,0,.24) を追加
308 回／下辺の押し込み

Level 2
inset 0 -2px rgba(0,0,0,.24)
308 回／押された状態

0 -2px rgba(0,0,0,.24) が下辺だけを暗くし、物理的なボタンの厚みを表現する。

07 / Layout

radius は 8px にほぼ統一

宣言	px	出現	用途
`.5rem`	8px	322 回	ボタン・カード・入力欄・チップ。既定
`1.25rem`	20px	104 回	大きめのブロック
`1rem`	16px	53 回	中サイズ
`1.75rem`	28px	52 回	丸め強め
`1.5rem`	24px	52 回	丸め強め
`.75rem`	12px	52 回	小さめ
`.25rem`	4px	12 回	最小
`0`	—	17 回	角バッジ

Breakpoints（nachiguro.css の実出現）

Query	出現	用途
`max-width: 768px`	22 回	1 カラム。ヘッダーのセグメントを畳む
`min-width: 1280px`	21 回	商品グリッド 7〜8 列
`min-width: 720px`	16 回	グリッド 4 列
`min-width: 540px`	16 回	グリッド 3 列
`max-width: 480px`	14 回	グリッド 2 列
`min-width: 768px`	5 回	通常レイアウト