Design System Preview

KALDI COFFEE FARM

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit body lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. computed style lorem ipsum dolor.

lorem ipsum lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Coffee Brown
#411e0a
body lorem / lorem ipsum
Navy Blue
#004099
lorem ipsum / CTA
Accent
Orange
#eb701e
lorem ipsum dolor
Terracotta
#d15516
lorem ipsum dolor sit amet
Olive Green
#919b50
lorem / lorem ipsum
Rose Copper
#c8694b
lorem ipsum dolor
Text & Label
Text Primary
#411e0a
lorem ipsum dolor
Gold
#bf9861
lorem "STORES" lorem
Warm Brown
#a57d50
lorem / lorem ipsum dolor
Text EC
#333333
EC lorem ipsum
Link EC
#672513
EC lorem ipsum
Background & Surface
Parchment
#f4eadd
lorem ipsum dolor
Light Cream
#f8f3eb
lorem ipsum dolor
EC Background
#ede5d7
EC lorem ipsum
White
#ffffff
lorem ipsum
Surface Dark
#181a1a
lorem ipsum
Semantic
Error
#cc0000
lorem / lorem
Error Dark
#b41400
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

FEATURES lorem -- Section Title (h2)
22px / 700 / line-height: 1.2 / letter-spacing: 0.2emlorem ipsum dolor
NEWS lorem ipsum -- Section Title (lorem)
22px / 700 / line-height: 1.2 / letter-spacing: 0.2em / color: #fffffflorem ipsum
lorem ipsum dolor -- Sub Title (h2)
16px / 700 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- KALDI lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. line-height: 1.8 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.8 / letter-spacing: normallorem
lorem ipsum dolor -- Body Bold (14px / 700)
14px / 700 / line-height: 1.8lorem
STORES / COMPANY / ONLINE SHOP
Montserrat / 14px / 700 / color: #bf9861lorem
2026.06.03 -- Date (Montserrat 12px)
Montserrat / 12px / 400 / line-height: 1.8 / letter-spacing: 0.08em / color: #a57d50lorem
lorem ipsum dolor sit -- Nav (14px)
14px / 400 / line-height: 2.0 / letter-spacing: 0.05em / color: #fffffflorem ipsum dolor
03 / Article -- lorem ipsum dolor

lorem / lorem ipsum dolor sit amet

2026.06.03

lorem ipsum dolor sit amet

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

lorem ipsum lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur 1,770m lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.

lorem: lorem / lorem ipsum: lorem ipsum, lorem ipsum, lorem

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor 90-92 lorem, lorem ipsum dolor 30 lorem ipsum dolor. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
Navy #004099
lorem ipsum dolor
Cart Button
Orange #eb701e
lorem ipsum
Outline
lorem ipsum
Olive Accent
#919b50
lorem ipsum
Danger
#cc0000
lorem ipsum
Category Nav
EC #672513
05 / Cards

lorem ipsum dolor sit

Coffee Image
COFFEE

lorem ipsum lorem ipsum dolor

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

¥496 (lorem)
lorem ipsum →
Feature Image
FEATURES

lorem ipsum dolor sit amet

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

lorem ipsum →
Food Image
FOOD

lorem ipsum dolor sit

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

¥324 (lorem) ~
lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #cccccc, radius: 4px
lorem ipsum -- border: #004099 (Navy Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #cc0000 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 2px 8px rgba(0,0,0,0.08)
Level 2
0 4px 16px rgba(0,0,0,0.12)
Level 3
0 8px 24px rgba(0,0,0,0.16)
Focus Ring
#004099 (Navy Blue)
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
8px
16px
24px
32px
48px
Content Widths
Container Max 960px
Article Content 640px
Form Max Width 400px
BODY BACKGROUND

lorem ipsum dolor sit amet

KALDI lorem ipsum dolor body lorem #411e0a(lorem ipsum dolor sit)lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem preview lorem content-wrapper lorem ipsum dolor sit amet.