商品一覧 掃除 キッチン 空調 健康

Design System Preview — ±0

plusminuszero.jp から抽出したデザイントークンのカタログ。深澤直人のニュートラリティを翻訳した、薄く・小さく・控えめな EC レイアウト。computed style 実測値に基づく。

詳しく見る・購入する
01 / Colors

3 色だけで構成される UI

Brand
Plus Minus Blue
#0999d8
唯一の UI アクセント
Text & Surface
Text Primary
#444444
本文（純黒は使わない）
Background
#ffffff
標準背景
Surface Pale Gray
#f0f0f0
タブ・ナビ
Footer Dark
#444444
フッター
Product Color Variants（プロダクト本体の色 / UI では未使用）
Brass Gold
#bda730
電卓・テーブルライト
Stainless Silver
#c4c4c3
基本色
Copper
#a77b3d
家電の限定色
02 / Typography — 実測値

12px / Light を基準にした文字

商品名 — Heading (h3)
Noto Sans JP / 20px / 700 / line-height: 1.5 (30px)カード見出し
コンパクト衣類乾燥機の使い方
Noto Sans JP / 16px / 400 / line-height: 1.5 (24px)バナー上テキスト（白）
ご使用前に必ず取扱説明書をよくお読みください。本製品は屋内専用です。
Noto Sans JP / 14px / 300 / line-height: 1.5補足注意書き
本文 — 12px / weight 300（Light）。±0 のすべてのキャプション・本文・ナビ・価格は、この極小・極薄の文字で統一される。商品写真が主役であり、文字は徹底的に脇役に徹する。ABCabc 123
Noto Sans JP / 12px / 300 / line-height: 1.5 (18px)本文（標準）
ナビゲーションリンク — Bold
Noto Sans JP / 12px / 700 / 強調するときだけ Bold へ
03 / Products

プロダクトカタログ

±0 加湿器

±0 加湿器

¥14,300（税込）
詳しく見る・購入する
±0 電卓

±0 電卓

¥3,300（税込）
詳しく見る・購入する
±0 コードレスクリーナー

±0 コードレスクリーナー

¥27,500（税込）
詳しく見る・購入する
±0 オイルヒーター

±0 オイルヒーター

¥36,300（税込）
詳しく見る・購入する
04 / Buttons

CTA は 1 種類だけ

詳しく見る・購入する
Primary CTA (radius 0)
詳しく見る・購入する
Primary Large

±0 には pill 型・outline 型・カラフルな塗りボタンが 存在しない。CTA は #0999d8 のフラット長方形 1 種類のみで、これがブランドの「ニュートラリティ」を体現している。

05 / Forms

フォーム要素

デフォルト — radius 0 / border 1px solid #e8e8e8
フォーカス — border #0999d8
06 / Layout

Spacing & Width

Spacing Scale

4px
8px
12px
20px
40px
80px

Content Widths

Page Container 1100px
Product Grid (4 col) 1100px / 4 = 275px