Design System Preview
lorem ipsum dolor sit

1101.com lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, pill lorem CTA, letter-spacing 0.05em lorem ipsum dolor sit. computed style lorem ipsum dolor.

lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
01 / Colors

lorem ipsum dolor sit amet consectetur

Brand Accents (lorem 1 lorem ipsum)
Hobonichi Yellow
#ebd833
lorem / lorem
Light Blue
#dbf2ff
lorem pill CTA
Light Blue Bright
#bbe5ff
lorem ipsum dolor
Hobonichi Green
#5dae64
EC lorem ipsum dolor
Green Pale
#f3fff4
EC lorem ipsum
Purple
#6d257e
lorem
Pink
#f3c0d9
lorem ipsum
Orange
#ffaa00
lorem ipsum
Orange Warm
#f88352
“lorem ipsum dolor”lorem
Text
Text Primary
#3e3e3e
lorem(lorem ipsum dolor)
Text Muted
#767676
lorem ipsum dolor
Text Caption
#939393
lorem CTA
Link Blue
#005588
lorem pill lorem ipsum dolor
Surface & Frame
Background
#ffffff
lorem ipsum
Card Gray
#f6f6f6
lorem ipsum dolor
Surface Mute
#d9d9d9
lorem ipsum CTA
Surface Dark
#3e3e3e
SNS lorem ipsum
Frame Black
#000000
lorem ipsum dolor 8px
02 / Typography — lorem

lorem ipsum dolor sit

Hobonichi H1 — lorem ipsum dolor
Noto Sans + JP / 32px / 400 / line-height: 1.1lorem ipsum dolor
lorem ipsum dolor sit amet consectetur.
Noto Sans + JP / 24px / 600 / line-height: 1.25lorem ipsum dolor
lorem ipsum dolor 2026
52 lorem ipsum dolor sit!
Noto Sans + JP / 20px / 600 / line-height: 1.4lorem ipsum dolor
lorem, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum“lorem”lorem ipsum, lorem ipsum dolor sit amet.
Noto Sans + JP / 16px / 400 / line-height: 1.9 (30.4px) / letter-spacing: 0.05emlorem
lorem ipsum dolor — Caption (14px)
Noto Sans + JP / 14px / 400 / line-height: 1.5 / color: Text Muted
lorem ipsum dolor, lorem–lorem–lorem ipsum dolor
Noto Sans + JP / 13px / 400 / line-height: 1.5lorem ipsum dolor
03 / Cards

lorem ipsum dolor

lorem ipsum!

lorem ipsum 2027

lorem, lorem ipsum dolor.

lorem ipsum dolor

lorem ipsum dolor

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

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum dolor

lorem ipsum dolor sit amet

lorem 8px solid #000 lorem“lorem ipsum dolor”lorem ipsum dolor, lorem ipsum dolor sit amet.

lorem ipsum dolor
04 / Buttons

pill CTA lorem ipsum dolor

lorem ipsum dolor
Light Blue Pill (42px)
lorem ipsum dolor
Green Solid Pill (42px)
lorem ipsum dolor
Orange Outline (42px)
lorem ipsum dolor sit amet
Mute Outline (56px)
Share Dark (36px)
lorem ipsum dolor sit
Mail Mute (36px)
lorem ipsum dolor
Tab (12px)
05 / Article — lorem ipsum

letter-spacing 0.05em lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur.

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

letter-spacing lorem ipsum

lorem ipsum palt lorem ipsum letter-spacing 0.05em(0.8px)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, Web lorem ipsum dolor“lorem ipsum dolor sit”lorem ipsum dolor. lorem ipsum dolor sit amet consectetur. ABCabc 123

06 / Forms

lorem ipsum dolor

lorem ipsum — border 1px solid #d9d9d9 / radius 8px
lorem ipsum — border #005588 + ring
07 / Layout

Spacing & Width

Spacing Scale

4px
8px
16px
24px
40px
64px

Content Widths

Page Container 1000px
Article Body 680px