Design System Preview
BASE — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

無料でショップを開設する

01 / Colors

カラーパレット

Brand — Prime

Prime 100

#e0f3f4

Prime 200

#c6e9eb

Prime 300

#a6dddd

Prime 400

#7fd1cf

Prime 450

#59c4c0

Prime 500

#0bb7ae

ブランドカラー・CTA

Prime 600

#00a099

ホバー

Prime 700

#00938b

Prime 800

#00827a

Prime 900

#105151

Accent

Pink

#fc6589

キャンペーンテキスト

Pink Light

#ffe4ea

キャンペーン背景

Pink Text

#fa6482

バナーテキスト

Brown

#a33e36

ウォームアクセント

Inspiration Red

#ff4600

強調要素

Text

Core Black

#0d181e

最も暗い黒

Origin Gray

#233237

本文テキスト

Semantic

Red Lighter BG

#fff4f4

エラー背景

Red Lighter Text

#f87e7e

エラーテキスト

Gray Scale

Gray 900

#1e1f2a

Gray 800

#2e3242

Gray 700

#45495b

Gray 600

#636978

Gray 500

#838996

Gray 400

#9ba2ae

Gray 300

#c1c7d1

Gray 200

#dadce0

Gray 100

#edeef1

サーフェス・区切り

Gray 50

#f7f8f9

薄い背景面

02 / Typography

タイポグラフィ階層

まずはお試し開設を — Hero H2

56px / 600 / line-height: 1.3 / letter-spacing: normal / palt: ありヒーロー

BASEが強い3つの理由 — Section H2

48px / 600 / line-height: 1.33 / letter-spacing: 0.03em / palt: ありセクション見出し

ティール面の見出し — Section H3

36px / 600 / line-height: 1.4 / letter-spacing: 0.03em / color: #0bb7aeティール面・白文字

スタンダードプラン — Card H3

28px / 700 / line-height: 1.0 / letter-spacing: normalプランカード

ナビメニュー見出し — Nav H3 / Body

16px / 400 / line-height: 1.8 / letter-spacing: 0.03em / palt: ありナビ・本文

本文テキスト — ネットショップ開設の第一歩。BASEなら初期費用も月額費用もかからず、誰でもかんたんにショップを開設できます。決済手数料のみでスタートできる安心のプラットフォームです。

16px / 400 / line-height: 1.8 / letter-spacing: 0.03em / palt: あり本文

補足テキスト — Body Small (14px / 600)

14px / 600 / line-height: 1.29補足

キャプション — Caption (12px / 400)

12px / 400 / color: Gray 500注釈

無料でショップを開設する

20px / 600 / color: #ffffff / CTA ピルボタンラベル

ハンドメイドキャンペーン開催中! — Campaign

17.4px / 700 / line-height: 1.3 / color: #fc6589キャンペーンバナー

03 / Products — EC ショーケース

商品カード

handmade shop mori

手編みのコットンバッグ

¥3,800 (税込)

ceramic studio kumo

陶器のマグカップ（ブルー）

¥2,200 (税込)

DAILY ROAST

スペシャルティコーヒー 200g

¥1,500 (税込)

04 / Buttons

ボタンバリエーション

無料でショップを開設する

Primary CTA (pill / 72px radius)

詳しく見る

Secondary (pill / outline)

ショップを開設する

Header CTA (0 0 8px 8px)

キャンペーン詳細

Campaign Banner (6px radius)

05 / Cards — 料金プラン

プランカード

スタンダードプラン

まずはここから

¥0 /月

初期費用・月額費用なし

商品登録数無制限
決済手数料 3.6% + 40円
独自ドメイン対応
デザインテーマ選択

グロースプラン

本格的に販売したい方へ

¥16,580 /月

年払いの場合

スタンダードの全機能
決済手数料 2.9%
サービス利用料 0%
不正決済保証

06 / Forms

フォーム要素

メールアドレス

デフォルト — border: var(--color-gray-200), radius: 8px

パスワード

フォーカス — border: #0bb7ae (prime-500), shadow: teal glow

メールアドレス

正しいメールアドレスを入力してください

エラー — border: #d32f2f, bg: --color-red-lighter-bg

07 / Elevation

Depth & Elevation

Level 0: Flat

影なし。背景色コントラストで階層表現（フラットデザイン基本）

Elevation 1

0 1px 4px rgba(0,0,0,0.08) — ホバー時

Elevation 2

0 2px 8px rgba(0,0,0,0.10) — カードホバー

Focus Ring

#0bb7ae (prime-500) — フォーカスリング

Design System PreviewBASE — 日本語版

カラーパレット

タイポグラフィ階層

商品カード

ボタンバリエーション

プランカード

フォーム要素

Depth & Elevation

レイアウトグリッド

Design System Preview
BASE — 日本語版