Design System Preview
HARIO

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

もっと見る PLAY MOVIE

01 / Colors

Color Palette

Text
Text Primary
#4d4d4d
本文テキスト
Text Secondary
#898989
補足テキスト・コピーライト
Brand Accent
HARIO Magenta
#d60077
オンラインショップリンク
Category Badges
ALL / Active
#666666
全カテゴリ(アクティブ)
NEWS
#3a9bd2
ニュースカテゴリ
PICKUP
#a07dd7
ピックアップカテゴリ
Gray Scale (Surfaces)
Background
#ffffff
ページ背景
Footer
#f5f5f5
フッター背景
Section
#f1f1f1
コンテンツセクション
Divider
#e6e6e6
セクション区切り
Carousel Inactive
#bcbcbc
カルーセルドット(非アクティブ)
Border / Active
#666666
入力欄ボーダー・アクティブ要素
Text Gray
#4d4d4d
テキスト・ボタンボーダー

02 / Typography

Typography Hierarchy

HARIO Section Heading
Jost + Noto Sans JP / 26px / 400 / line-height: 1.12 / letter-spacing: 0.1emh1 セクション見出し
V60 Titanium Series 新発売
Jost + Noto Sans JP / 26px / 400 / 和欧混植の表示確認h1 和欧混植
どんぐりカラフェ
Noto Sans JP / 13px / 700 / line-height: 1.0 / letter-spacing: 0.05emh3 製品名
PLAY MOVIE
Noto Sans JP / 18px / 300 / line-height: 1.0 / letter-spacing: 0.05emヒーロー CTA
新製品「V60 Titanium Series」を発売しました。耐熱ガラスのHARIOが100年以上培ってきた技術と、チタンの軽さと耐久性を融合。毎日のコーヒータイムをより豊かにする新しい提案です。
Noto Sans JP / 16px / 400 / line-height: 1.875 / letter-spacing: 0.05em本文 body
HARIO CAFE
Noto Sans JP / 15px / 400 / line-height: 1.0 / letter-spacing: 0.1emフッターリンク
NEWS
Noto Sans JP / 14px / 400 / letter-spacing: 0.1em / カテゴリバッジバッジ
よくあるご質問
Noto Sans JP / 11px / 400 / line-height: 1.0 / letter-spacing: normalヘッダー補助
Copyright HARIO CO., LTD. All Rights Reserved
Noto Sans JP / 11px / 400 / letter-spacing: 0.1emコピーライト

Product Cards

V60 Photo
V60 透過ドリッパー 02
円すい形のペーパーで味を引き出すドリッパー
Server Photo
V60 レンジサーバー 600
耐熱ガラス製。電子レンジ対応
Kettle Photo
V60 ドリップケトル ヴォーノ
細口ノズルで注湯量をコントロール

Article Sample

耐熱ガラスのものづくり

HARIOは1921年の創業以来、耐熱ガラスの企画・製造・販売を一貫して行ってきました。理化学用硝子器具の製造から始まり、その技術を暮らしの道具に応用しています。

素材としてのガラス

耐熱ガラスは、急激な温度変化に耐える特性を持っています。HARIOの製品に使用される耐熱ガラスは、100%天然の鉱物から作られており、人にも地球にもやさしい素材です。コーヒー器具、ティーウェア、キッチンウェアまで、幅広い製品で使用されています。


04 / Buttons & Badges

Interactive Elements

Buttons
もっと見る
Outline (Default)
ALL
Dark (Active)
Search
オンラインショップ
Shop Link (Magenta)
Category Badges
ALL NEWS PICKUP EVENT
14px / 400 / letter-spacing: 0.1em / border: 1px solid / radius: 0px / padding: 4px 7px 6px
Carousel Indicators
Active: #666666 / Inactive: #bcbcbc / 10px circle

05 / Cards

News Cards

NEWS
2026.05.08

V60 Titanium Series 新発売のお知らせ

耐熱ガラスのHARIOが新しいコーヒー器具シリーズを発売。チタンの軽さと耐久性を融合した新製品ラインナップです。

もっと見る
PICKUP
2026.04.20

水出し茶の新しい楽しみ方

フィルターインボトルを使った水出し茶のレシピをご紹介。暑い季節にぴったりの手軽な水出し茶の作り方です。

もっと見る
EVENT
2026.04.15

HARIO CAFE 期間限定メニュー

HARIO CAFEにて、耐熱ガラス製品を使った季節限定ドリンクメニューを提供しています。ぜひお立ち寄りください。

もっと見る

06 / Forms

Form Elements

デフォルト — border: 1px solid #666666, radius: 0px
フォーカス — border: #4d4d4d, box-shadow: 0 0 0 1px #4d4d4d
正しい電話番号を入力してください
エラー — border: #c00

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。border のみ(HARIO の標準)
Level 1: Section
#f1f1f1 面色の切り替え
Level 2: Divider
#e6e6e6 セクション区切り
Level 3: Active
#666666 アクティブ要素
HARIO は box-shadow を一切使用しない。奥行きはグレーの面色の切り替えのみで表現。border-radius も 0px。

08 / Layout

Spacing & Layout

Spacing Scale
7px
16px
24px
32px
48px
64px
100px
Content Widths
Main Content 1200px (est.)
Article Body 620px (est.)
Footer Padding 100px top