lorem 13 lorem ipsum dolor sit amet consectetur(lorem ipsum dolor) / lorem 3,999 lorem ipsum dolor

lorem, lorem ipsum dolor

hokuohkurashi.com / Design System Preview

lorem, lorem ipsum dolor(hokuohkurashi.com)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum Medium lorem, 12px lorem ipsum dolor sit, lorem ipsum dolor YakuHanJPs lorem ipsum, #444444 lorem ipsum dolor, lorem ipsum dolor sit amet“lorem ipsum dolor sit amet”lorem ipsum dolor sit. lorem ipsum computed style lorem ipsum dolor.

01 / Colors

lorem ipsum dolor

Neutral
Text Primary
#444444
lorem ipsum / lorem ipsum dolor
White
#ffffff
lorem ipsum / lorem ipsum
Background Light
#f7f7f7
lorem ipsum dolor sit / lorem ipsum
Background Blue
#f2f7f9
lorem ipsum dolor sit / lorem ipsum
Accent
Accent Yellow
#fff100
NEW lorem(lorem)
Accent Coral
#fb5c5c
New lorem(lorem) / pill lorem
02 / Typography

lorem ipsum dolor

lorem ipsum dolor sit
lorem ipsum Medium / 20px / 700 / line-height: 1.6H1 SECTION
“lorem ipsum dolor”lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur.
YakuHanJPs + lorem ipsum / 15px / 700 / line-height: 1.71H2 ARTICLE TITLE
lorem ipsum dolor
lorem ipsum Medium / 20px / 700 / line-height: 1.6H3 SECTION
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
YakuHanJPs + lorem ipsum / 15px / 400 / line-height: 1.71BODY ARTICLE
2026 lorem 5 lorem 9 lorem / lorem ipsum dolor / lorem ipsum
YakuHanJPs + lorem ipsum / 13px / 400 / line-height: 1.6BODY SMALL
lorem ipsum / lorem ipsum / lorem ipsum / lorem ipsum
lorem ipsum Medium / 12px / 400 / line-height: 1.6CAPTION / NAV
lorem ipsum New
lorem ipsum Medium / 11px / 400 / pill radius 100px / bg #fb5c5cNAV BADGE
lorem ipsum lorem ipsum
lorem ipsum Medium / 13px / 400 / active: bg #444 text #fffSEARCH TAB
lorem ipsum dolor sit, lorem ipsum. vol.34“lorem ipsum dolor, lorem ipsum dolor”
YakuHanJPs + lorem ipsum / 15px / 400 / line-height: 1.6ARTICLE TITLE LIST
03 / Article

lorem ipsum

NEW Photo

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

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

lorem ipsum dolor sit, lorem ipsum / 2026.05.09
Photo

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

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

lorem ipsum dolor sit / 2026.05.08
NEW Photo

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

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

lorem ipsum dolor / 2026.05.07
04 / Products

lorem ipsum

Photo
ARABIA / lorem ipsum lorem 300ml
¥3,300
Photo
iittala / lorem ipsum lorem ipsum 21cm
¥2,750
Photo
KLIPPAN / lorem ipsum dolor sit lorem
¥8,800
Photo
Fog Linen Work / lorem ipsum dolor sit
¥1,100
Photo
Lisa Larson / lorem ipsum lorem
¥4,180
05 / Badges & Interactions

lorem / lorem ipsum dolor

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

NEW
YELLOW BADGE
bg #fff100 / text #444 / 11px
New
CORAL BADGE (PILL)
bg #fb5c5c / text #fff / radius 100px
lorem ipsum >
TEXT LINK
underline / 12px / #444
lorem ipsum lorem ipsum
SEARCH TAB
active: bg #444 text #fff / 13px
lorem ipsum dolor
BORDER LINK
border-bottom / 12px / #444
06 / Forms

lorem ipsum

DEFAULT ---- border #e5e5e5
FOCUS ---- border #444444
ERROR ---- border #fb5c5c
07 / Elevation

lorem / lorem ipsum dolor

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

White Surface
#ffffff
lorem ipsum / lorem ipsum / lorem
Blue Surface
#f2f7f9
lorem ipsum / lorem ipsum
Light Surface
#f7f7f7
lorem ipsum / lorem ipsum
box-shadow: none / border-radius: 0 / font-feature-settings: normal / letter-spacing: normal
lorem, lorem ipsum, palt lorem, lorem ipsum. 4 lorem“lorem”lorem ipsum dolor sit amet consectetur adipiscing.
08 / Layout

lorem ipsum

Spacing Scale
4px
XS
8px
S
16px
M
24px
L
40px
XL
64px
XXL
Container & Grid
Container
max-width: ~1060px
padding: 16-20px
Product Grid
4-5 columns (desktop)
2 columns (mobile)
Article Grid
2-3 columns (desktop)
1 column (mobile)
Section Dividers
#ffffff
#f2f7f9
#f7f7f7
#ffffff
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor.