Design System Preview
Kalita

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. 1958 lorem ipsum dolor sit amet consectetur. lorem ipsum / lorem ipsum dolor / lorem ipsum dolor sit amet consectetur adipiscing.

Read More Online Shop
01 / Colors

lorem ipsum dolor

Brand / Accent
Olive / Khaki
#a49e86
lorem ipsum dolor sit amet, lorem ipsum
Page Gray
#999999
lorem ipsum(body)
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Tertiary
#888888
lorem ipsum dolor, lorem ipsum
Text Light
#aaaaaa
lorem ipsum, lorem ipsum dolor
Text on Dark
#ffffff
lorem ipsum / lorem ipsum
Surface & Background
Background Light
#eeeeee
lorem ipsum / lorem ipsum dolor sit
Background White
#ffffff
lorem ipsum, lorem ipsum
Surface Warm
#eeece3
lorem ipsum dolor
Overlay Dark
rgba(0,0,0,0.2)
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit amet — Hero Title
lorem ipsum dolor / 35px / 700 / line-height: 1.0lorem ipsum
KEDP-X1 — Product Title
lorem ipsum dolor / 32px / 700 / line-height: 1.0lorem
lorem ipsum dolor sit amet — Section Heading
lorem ipsum dolor / 20px / 700 / line-height: 1.0lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit.
lorem ipsum dolor / 16px / 400 / line-height: 1.8lorem
lorem ipsum dolor — Small Body (14px)
lorem ipsum dolor / 14px / 400 / line-height: 1.5lorem
lorem ipsum dolor — Caption (12px)
lorem ipsum dolor / 12px / 400 / line-height: 1.8lorem / lorem
Read More — Questrial CTA
Questrial / 16px / 400 / letter-spacing: 0.05emCTA
Copyright (c) 2015 Kalita Co., Ltd. All Rights Reserved.
Questrial / 12px / 400 / letter-spacing: 0.05emlorem ipsum
03 / Article

lorem ipsum dolor

2026.06.14 / Coffee Equipment

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem 3 lorem ipsum dolor sit, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem“lorem ipsum dolor sit”lorem ipsum dolor, lorem ipsum dolor sit.

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur, 20 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

Read More
Ghost CTA (on dark)
lorem ipsum dolor
Ghost Small (on dark)
Read More
Ghost CTA (on light)
Global Site
Utility (olive)
Online Shop
Utility (olive)
05 / Cards

lorem ipsum dolor sit

Dripper

lorem ipsum dolor sit 102-D

lorem ipsum dolor sit amet consectetur. 2–4 lorem ipsum dolor. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

Read More
Wave Filter

lorem ipsum dolor sit 185

20 lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.

Read More
KEDP-X1

NEXT G2 lorem ipsum dolor sit amet

lorem ipsum dolor sit amet, lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit.

Read More
06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #eeece3, border: none, radius: 0
lorem ipsum — inset shadow: 2px solid #a49e86 (olive)
lorem ipsum dolor
lorem — inset shadow: 2px solid #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor. Kalita lorem ipsum dolor sit amet
Surface: Light
#eeeeee — lorem ipsum dolor sit amet consectetur
Surface: Page
#999999 — lorem ipsum(lorem)
Surface: Overlay
rgba(0,0,0,0.2) — lorem ipsum dolor
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale
4
8
16
24
40
80
Content Widths
Content Area 960px
Article Body 640px
Form Area 400px