Design System Preview
HARIO

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum PLAY MOVIE
01 / Colors

Color Palette

Text
Text Primary
#4d4d4d
lorem ipsum dolor
Text Secondary
#898989
lorem ipsum dolor / lorem ipsum dolor
Brand Accent
HARIO Magenta
#d60077
lorem ipsum dolor sit amet
Category Badges
ALL / Active
#666666
lorem ipsum(lorem ipsum)
NEWS
#3a9bd2
lorem ipsum dolor
PICKUP
#a07dd7
lorem ipsum dolor sit
Gray Scale (Surfaces)
Background
#ffffff
lorem ipsum
Footer
#f5f5f5
lorem ipsum dolor
Section
#f1f1f1
lorem ipsum dolor sit
Divider
#e6e6e6
lorem ipsum dolor
Carousel Inactive
#bcbcbc
lorem ipsum dolor(lorem ipsum dolor)
Border / Active
#666666
lorem ipsum dolor / lorem ipsum dolor
Text Gray
#4d4d4d
lorem ipsum / lorem ipsum dolor
02 / Typography

Typography Hierarchy

HARIO Section Heading
Jost + Noto Sans JP / 26px / 400 / line-height: 1.12 / letter-spacing: 0.1emh1 lorem ipsum dolor
V60 Titanium Series lorem
Jost + Noto Sans JP / 26px / 400 / lorem ipsum dolor sith1 lorem ipsum
lorem ipsum dolor
Noto Sans JP / 13px / 700 / line-height: 1.0 / letter-spacing: 0.05emh3 lorem
PLAY MOVIE
Noto Sans JP / 18px / 300 / line-height: 1.0 / letter-spacing: 0.05emlorem ipsum CTA
lorem“V60 Titanium Series”lorem ipsum dolor. lorem ipsum dolor HARIO lorem 100 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit.
Noto Sans JP / 16px / 400 / line-height: 1.875 / letter-spacing: 0.05emlorem body
HARIO CAFE
Noto Sans JP / 15px / 400 / line-height: 1.0 / letter-spacing: 0.1emlorem ipsum dolor
NEWS
Noto Sans JP / 14px / 400 / letter-spacing: 0.1em / lorem ipsum dolorlorem
lorem ipsum dolor
Noto Sans JP / 11px / 400 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
Copyright HARIO CO., LTD. All Rights Reserved
Noto Sans JP / 11px / 400 / letter-spacing: 0.1emlorem ipsum dolor
03 / Product

Product Cards

V60 Photo
V60 lorem ipsum dolor 02
lorem ipsum dolor sit amet consectetur adipiscing
Server Photo
V60 lorem ipsum dolor 600
lorem ipsum dolor. lorem ipsum dolor
Kettle Photo
V60 lorem ipsum dolor lorem ipsum
lorem ipsum dolor sit amet consectetur

Article Sample

lorem ipsum dolor sit amet

HARIO lorem 1921 lorem ipsum dolor, lorem ipsum dolor / lorem / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. HARIO lorem ipsum dolor sit amet consectetur, 100%lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

04 / Buttons & Badges

Interactive Elements

Buttons
lorem ipsum
Outline (Default)
ALL
Dark (Active)
Search
lorem ipsum dolor sit
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 lorem ipsum dolor

lorem ipsum dolor HARIO lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem ipsum
PICKUP
2026.04.20

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum
EVENT
2026.04.15

HARIO CAFE lorem ipsum dolor

HARIO CAFE lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet.

lorem ipsum
06 / Forms

Form Elements

lorem ipsum — border: 1px solid #666666, radius: 0px
lorem ipsum — border: #4d4d4d, box-shadow: 0 0 0 1px #4d4d4d
lorem ipsum dolor sit amet consectetur
lorem — border: #c00
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. border lorem(HARIO lorem)
Level 1: Section
#f1f1f1 lorem ipsum dolor
Level 2: Divider
#e6e6e6 lorem ipsum dolor
Level 3: Active
#666666 lorem ipsum dolor
HARIO lorem box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing. border-radius lorem 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