lorem ipsum dolor lorem ipsum dolor sit amet lorem ipsum dolor sit

Design System Preview — lorem ipsum

lorem ＋ lorem. lorem ipsum dolor#093（＝ #009933)lorem 1 lorem, CSS lorem ipsum dolor 487 lorem. lorem 1 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor computed style lorem ipsum(2026-08-24 lorem).

lorem ipsum dolor sit amet
01 / Colors

Color Palette

Brand — lorem 1 lorem ipsum
Mizkan Green
#009933
lorem. CSS lorem #093 lorem 3 lorem ipsum 487 lorem
Green Alt
#009e41
lorem ipsum dolor sit amet consectetur. 7 lorem
Green Deep
#149933
lorem ipsum dolor / lorem
Yellow Green
#8cc63e
lorem / lorem ipsum dolor
Accent — lorem ipsum“lorem”, lorem“lorem”lorem
CTA Orange
#ec870e
lorem ipsum dolor 2px lorem. 20 lorem. lorem ipsum dolor
Alert Red
#ec0e18
“lorem ipsum”lorem ipsum dolor sit. 14 lorem
PDF Red
#ec0e0e
PDF lorem ipsum. 6 lorem
Text & Line
Text
#333333
body lorem ipsum / lorem / lorem
Text Nav
#212121
lorem ipsum／lorem ipsum dolor. 15 lorem
Line
#d1d1d1
lorem ipsum
Line Pale
#c7c7c7
lorem
Surface — lorem ipsum 4 lorem ipsum
Background
#ffffff
lorem ipsum
Surface Warm
#f8f8f5
lorem ipsum dolor. lorem ipsum dolor. 25 lorem
Surface Gray
#f5f5f5
lorem ipsum dolor / lorem. 63 lorem ipsum
Surface Pale
#f2f2f2
lorem ipsum dolor sit. 21 lorem
Tint — lorem / lorem ipsum dolor
Mint
#ccebd6
lorem ipsum dolor sit. #093 lorem ipsum
Cream
#fff6e3
lorem ipsum dolor sit
Cream Green
#f7f7e9
lorem ipsum dolor sit
Pale Yellow
#fbf8d9
lorem ipsum dolor
Pale Blue
#e2f5f8
lorem ipsum dolor
02 / Typography — lorem

Lato lorem ipsum dolor sit amet. lorem ipsum line-height 1.0

lorem ipsum dolor
24px / 700 / line-height: normal ／ Lato + loremmain.main — lorem ipsum dolor
lorem ipsum 365
24px / 700 / line-height: 24px (1.0) / letter-spacing: 0.24px (0.01em)lorem ipsum dolor
lorem ipsum
18px / 700 / line-height: 18px (1.0) / color: #ec0e18Alert Heading
lorem ipsum　lorem!lorem ipsum
18.72px / 700 / line-height: normallorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur adipiscing
15px / 700 / line-height: 24px (1.6)2 lorem ipsum dolor sit
lorem ipsum dolor
21px / 700 / line-height: 21px (1.0) ／ Lato lorem ipsum dolornav — lorem ipsum dolor sit
lorem ipsum
16px / 400 / line-height: 16px (1.0) / letter-spacing: 0.8px (0.05em)nav — lorem ipsum dolor
lorem ipsum dolor
14px / 700 / line-height: 14px (1.0) / letter-spacing: 0.7px (0.05em)nav — lorem ipsum dolor
lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum 1804 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: normal / color: #333333body lorem
lorem ipsum dolor sit amet. lorem ipsum dolor sit amet
14px / 400 / line-height: 21px (1.5) / letter-spacing: -1.5px (-0.107em) ← lorem ipsumnav — lorem ipsum dolor sit
lorem ／ lorem ／ lorem ipsum dolor ／ lorem
12px / 400 / line-height: 18px (1.5) / letter-spacing: -0.4px (-0.033em)nav — lorem ipsum dolor sit
font-family(lorem 3 lorem)
loremlorem
lorem / lorem(main lorem)Lato, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Hiragino Sans", sans-serif
lorem ipsum / lorem / lorem ipsum"Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Hiragino Sans", sans-serif
lorem ipsum dolor"Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "Hiragino Sans", sans-serif

※ lorem ipsum dolor sit amet Google Fonts loremNoto Sans JP lorem ipsum dolor(lorem ipsum dolor sit amet ProN → lorem ipsum → Noto Sans CJK JP lorem OS lorem ipsum dolor).
※ Lato lorem ipsum dolor sit ametlorem, Google Fonts lorem ipsum dolor sit. lorem / lorem ipsum dolor sit amet consectetur adipiscing.
※ font-feature-settings lorem ipsumnormal。palt lorem ipsum(lorem ipsum dolor / lorem ipsum dolor sit amet).

03 / Recipe — lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor lorem ipsum dolor

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

lorem ipsum“lorem 1 lorem ipsum dolor 3”lorem ipsum dolor. lorem ipsum 100ml lorem ipsum dolor 1 lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.

  1. lorem 2 lorem ipsum dolor, lorem lorem 2 ＋ lorem 300ml lorem ipsum.
  2. lorem ipsum dolor, lorem ipsum dolor.
  3. lorem ipsum dolor sit amet, lorem 12–15 lorem.
  4. lorem ipsum dolor sit amet consectetur adipiscing.

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

lorem ipsum dolor sit amet
04 / Buttons

lorem CTA lorem“lorem”lorem ipsum“lorem ipsum 2px lorem”

lorem ipsum dolor sit amet
Primary
lorem / 2px solid #ec870e / radius 3px
16px / 400
Search
#009933 lorem / 1px solid #009933
radius 3px / 16px
lorem ipsum dolor
Utility
#f5f5f5 / radius 0px
14px / 400 / ls 0.05em
lorem ipsum dolor
Text Link
lorem ＋ lorem ipsum
Badges — lorem ipsum dolor sit amet consectetur
lorem lorem ipsum dolor lorem PDF green: padding 5px 10px / radius 4px / 12px・700　｜　pdf: padding 0 4px / radius 4px
Notice — lorem 1px lorem
lorem ipsum
PDF 【lorem ipsum】lorem ipsum dolor sit amet consectetur [227kb]
05 / Cards

lorem ipsum dolor — 4 lorem / lorem

image
lorem ipsum　lorem!lorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing
image
lorem ipsum dolor sit amet consectetur adipiscing
lorem ipsum dolor sit amet consectetur adipiscing 100% lorem ipsum dolor
image
lorem ipsum dolor　lorem　lorem ipsum
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur
image
lorem ipsum dolor sit amet consectetur
lorem ipsum, lorem ipsum dolor sit. lorem ipsum dolor sit amet
Mega Menu — lorem ipsum dolor sit amet

lorem ipsum dolor

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet

lorem ipsum / lorem ipsum dolor

lorem ipsum

06 / Forms

Default / Focus / Error

Default — border: 1px solid #d1d1d1 / radius 3px / padding 10px 9px / 16px
Focus — border-color: #009933
lorem ipsum dolor. lorem ipsum dolor sit.
Error — border-color: #ec0e18
07 / Elevation

box-shadow lorem 1 lorem ipsum dolor

lorem ipsum dolor sitlorembox-shadow: none(lorem). lorem ipsum dolor sit amet consectetur.
#ffffff
lorem
#f8f8f5
lorem ipsum dolor
#f5f5f5
lorem ipsum dolor
#f2f2f2
lorem ipsum dolor
Surface
Background
#ffffff
Surface Warm
#f8f8f5
Surface Gray
#f5f5f5
Surface Pale
#f2f2f2
Mint
#ccebd6
08 / Layout

Spacing ／ Radius ／ Container

Spacing Scale
XS 4
S 6
M 10
L 20
XL 40
XXL 50
Radius — lorem 1 lorem ipsum
loremlorem
0pxlorem ipsum dolor sit, lorem ipsum dolor
3pxlorem CTA, lorem ipsum, lorem
4pxlorem ipsum, PDF lorem
6pxlorem ipsum
10pxlorem ipsum dolor sit
Container / Grid / Breakpoints
loremlorem
Max Width1200px lorem / padding-x20px
lorem ipsum4 lorem(gutter lorem 24px)
lorem ipsum dolor3–4 lorem
Mobile≤ 767px — 1 lorem. lorem ipsum dolor sit amet
Tablet768–1024px — lorem 2 lorem
Desktop> 1024px — lorem 4 lorem