Design System Preview: DULTON

01 / Colors

Color Palette

カラーパレット

Brand

DULTON Navy

#001a60

ブランドカラー・ヘッダー・見出し

DULTON Red

#ce0000

バッジ・通知ドット

Text

Text Primary

#333333

本文テキスト

Dark Gray

#444444

ボタン・補助テキスト

Muted Navy

#9da7c2

装飾・スクロールトップ

Surface & Border

White

#ffffff

ページ背景

Light Surface

#f5f5f5

セクション背景

Light Blue

#eef5f9

プロモ背景

Border

#cccccc

区切り線

Pagination

#d2d2d2

非アクティブドット

Semantic

Danger

#ce0000

エラー・削除

Success

#2e8b57

成功・完了

Warning

#d4a017

警告・注意

02 / Typography

Type Scale

タイポグラフィ階層 - 実測値

Section Title — English Heading

Arial Black / 30px / 400 / line-height: 1.4 / letter-spacing: normalセクション見出し

DULTON — Brand Name

Arial Black / 24px / 900 / line-height: 1.6ブランドロゴ文字

Arial Black / 20px / 400 / line-height: 1.5ナビ見出し

New Arrival • Ranking • Pick Up

Arial Black / 12px / 900 / line-height: 1.5 / letter-spacing: 1px小英語ラベル

新着アイテム・ランキング・ピックアップ

Noto Sans JP / 14px / 400 / line-height: 1.71日本語サブタイトル

本文テキスト — アメリカンヴィンテージの雰囲気を持つインテリア雑貨。キッチン、リビング、ガーデン用品まで、暮らしを楽しくする道具を届けます。1988年の創業以来、機能性とデザイン性を兼ね備えた商品づくりを続けています。

Noto Sans JP / 12px / 400 / line-height: 1.6 / letter-spacing: normal本文

¥3,850 (税込)

Noto Sans JP / 14px / 700 / line-height: 2.8価格

※ 商品の色は実際と異なる場合がございます。送料は地域により異なります。

Noto Sans JP / 10px / 400 / line-height: 1.5注釈・最小テキスト

03 / Products

Product Listing

商品一覧サンプル

New Arrival 新着アイテムもっと見る

DULTON

グラットンオーブントースター 4スライスマットブラック

¥12,100 (税込)

DULTON

アメリカンキッチンスケール "ストリームライン" 2kg レッド

¥5,500 (税込)

DULTON

ダブルフェイスウォールクロック 170D ブラック

¥8,800 (税込)

DULTON

メタルバケットガルバナイズド 12L

¥3,850 (税込)

04 / Buttons

Buttons

ボタンバリエーション

カートに入れる

Primary (Navy)

絞り込み

Filter (Dark Gray)

一覧を見る

Ghost (Outline)

Text Link

NOTIFICATION BADGE 通知ドット:

CAROUSEL DOTS ページネーション:

05 / Cards

Card Components

カードコンポーネント

DULTON

Kitchen

キッチンツール・テーブルウェア

機能性とデザイン性を兼ね備えたアメリカンヴィンテージスタイルのキッチン用品。

DULTON

Interior

インテリア・ファニチャー

インダストリアルな素材感を活かした家具・インテリアアクセサリー。

DULTON

Garden

ガーデン・エクステリア

庭仕事を楽しくする道具と、屋外空間を彩るガーデンアイテム。

06 / Forms

Form Elements

フォーム要素

メールアドレス

デフォルト — border: #cccccc, radius: 0px

パスワード

フォーカス — border: #001a60 (DULTON Navy)

メールアドレス

エラー — border: #ce0000 (DULTON Red)

お届け先住所

テキストエリア — 角形・同じボーダー仕様