Design System Preview
ASKUL (アスクル) — 日本語版

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

カンタン新規会員登録 DESIGN.md を読む
01 / Colors

カラーパレット

Brand
ASKUL Blue
#1b72e9
リンク・アクセント
ASKUL Navy
#172397
ページタイトル
ASKUL Orange
#ff8d00
主要 CTA
ASKUL Cyan
#33abee
もっと見るリンク
Text
Text Primary
#333333
本文テキスト
Link Heading
#111184
リンク見出し
Link
#1b72e9
リンクテキスト
Semantic
Danger
#d90916
エラー・重要通知
Price Red
#d80000
価格表示
Info Light
#ebf3fc
お知らせ背景
Danger Light
#fadfe1
重要通知背景
Surface & Border
Background
#ffffff
ページ背景
Surface
#f2f2f2
ボタン・カテゴリ背景
Footer
#efefef
フッター・ガイド背景
Light
#f5f5f5
モーダル背景
Border
#cecece
標準ボーダー
Sustainability パステル
時短・効率
#d4dbec
気持ちがはれる
#f7e0c8
ごみを減らす
#c4dad4
心地よいデザイン
#eaccce
社会にやさしい
#bce0e4
資源を守る
#dfe8c7
02 / Typography -- 実測値

タイポグラフィ階層

おすすめ特集一覧 — Page Title (h1)
20px / 400 / line-height: 1.0 / color: #172397 (Navy)ページタイトル
注目のトピックス — Section Title (h2)
20px / 400 / line-height: 1.6 / letter-spacing: 0.02emセクション見出し
取扱商品 15,766,762点 — Sidebar Title (h2)
16px / 400 / line-height: 1.625 / letter-spacing: 0.02emサイドバー
Webサイトリニューアルに関する重要なお知らせ — Sub Heading (h2)
13px / 700 / line-height: 1.54 / color: #111184お知らせ見出し
検索範囲 — Label (p)
14px / 700 / line-height: 1.1ラベル
本文テキスト — オフィス用品の通販サイトとして、アスクルは1,500万点以上の商品を取り揃えています。法人のお客様向けに翌日配送サービスを提供し、文房具からオフィス家具まで幅広くカバーしています。
13px / 400 / line-height: 1.6 / letter-spacing: normal本文
補足テキスト — Small (12px)
12px / 400 / line-height: 1.33補足・リスト
履歴・再注文 — Nav (10px)
10px / 700 / line-height: 1.3ナビゲーション
¥1,234（税込）
20px / 700 / color: #d80000 — 価格表示専用商品価格
03 / Product -- 商品ページ組版

商品ページの組版サンプル

おすすめ特集一覧

オフィスに必要な消耗品から、業務用の大型家具まで。アスクルなら翌日お届け（一部地域を除く）。法人様向けの請求書払いにも対応しています。

お知らせ: 2024年度のオフィス用品カタログが更新されました。新商品を多数掲載しています。
重要なお知らせ: システムメンテナンスのため、6月15日 0:00〜6:00 はサービスを一時停止します。

事務用品／文房具

コピー用紙、ファイル、ペン、テープ、のり、はさみ、電卓など、オフィスに欠かせない事務用品を幅広く取り揃えています。

商品名品番単価（税込）お届け日
コピー用紙 A4 500枚ASK-A4500¥398翌日
ボールペン 黒 10本入ASK-BP10B¥528翌日
クリアファイル A4 100枚ASK-CF100¥1,280翌日
04 / Buttons

ボタンバリエーション

新規会員登録
Primary CTA
#ff8d00 / 5px radius
詳細設定
Secondary
#f2f2f2 / 4px radius
バリエーションを見る
Outlined
white / 2px radius
FAXご利用中の方
FAX User
#6e635f border
もっと見る
Cyan Link
#33abee / 4px radius
もっと見る >
Text Link
#1b72e9
削除する
Danger
#d90916 / 5px radius
05 / Cards -- 商品カード

カードコンポーネント

商品画像
コクヨ

キャンパスノート A4 5冊パック セミB5 普通横罫

¥548（税込）
1冊あたり ¥109.6
翌日お届け
商品画像
アスクルオリジナル

ボールペン ノック式 0.7mm 黒 10本入

¥528（税込）
1本あたり ¥52.8
翌日お届け
商品画像
プラス

クリアファイル A4タテ 100枚入 透明

¥1,280（税込）
1枚あたり ¥12.8
翌日お届け
商品画像
エプソン

インクカートリッジ 4色パック 純正

¥4,380（税込）
翌日お届け
06 / Forms

フォーム要素

デフォルト -- border: #cecece, radius: 0
フォーカス -- border: #1b72e9 (Blue)
エラー -- border: #d90916 (Danger)
セレクト -- border: #767676, radius: 0
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダー #cecece のみ。ほぼ全要素がこのスタイル
Level 1: Hover
0 1px 3px rgba(0,0,0,0.1) -- ホバー時のカード
Focus Ring
#1b72e9 (Blue) -- フォーカス状態
Info Border
#183d9f -- 登録エリア枠線
08 / Layout

レイアウト & スペーシング

スペーシング
3px
6px
10px
16px
25px
30px
42px
コンテンツ幅
Full Width 1440px
Main + Sidebar ~1200px
Main Column ~1000px
Sidebar ~200px