lorem ipsum lorem ipsum dolor lorem ipsum

Design System Preview
hands.net -- lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand — Green Scale
Green Dark
#004022
lorem ipsum / lorem ipsum
Green Primary
#006b30
lorem / CTA lorem
Green Bright
#007236
lorem ipsum dolor sit
Green Light
#51c05c
lorem ipsum dolor
Green Pale
#d9f1dd
lorem ipsum dolor
Neutral
Black
#000000
lorem ipsum dolor
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#4d4d4d
lorem ipsum dolor / lorem
Text Muted
#707070
lorem ipsum dolor sit
Border
#e0e0e0
lorem ipsum / lorem ipsum
Surface
#f5f5f5
lorem ipsum dolor
White
#ffffff
lorem ipsum
Accent
Orange Tag
#c84d06
lorem / lorem ipsum
Pink Campaign
#d2234e
lorem ipsum dolor / lorem
Danger
#cc0000
lorem / lorem ipsum
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Section H2 (22px)
22px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- Article Title (16px)
16px / 700 / line-height: 1.5 / color: #4d4d4dlorem / lorem
lorem ipsum -- Nav Link (16px)
16px / 700 / line-height: 1.5 / color: #fff on #004022lorem ipsum dolor
lorem ipsum dolor -- Body Link (16px)lorem ipsum dolor
16px / 400 / line-height: 1.5 / color: #006b30lorem ipsum
lorem ipsum dolor -- Tag Span (14px)
14px / 700 / line-height: 1.5 / color: #ffflorem ipsum
lorem / lorem ipsum -- Orange Tag (14px)
14px / 400 / line-height: 1.0 / color: #c84d06lorem
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur adipiscing elit sed. DIY lorem ipsum dolor, lorem, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. Body (12px)
12px / 400 / line-height: 1.5 / color: #333333lorem
2026.06.10 -- lorem ipsum dolor (12px)
12px / 400 / line-height: 1.5 / color: #4d4d4dlorem / lorem
lorem ipsum dolor -- Campaign Tag (12px)
12px / 400 / line-height: 1.0 / color: #d2234elorem ipsum dolor
lorem ipsum dolor -- Footer H2 (16px)
16px / 700 / line-height: 1.5 / color: #333333lorem ipsum
03 / Article -- lorem / lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

2026.06.10 lorem
#lorem ipsum#lorem#lorem

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. 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. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit ametlorem ipsumlorem ipsum dolor sit.

lorem ipsum dolor

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Green Solid)
lorem ipsum dolor
Outline (Green Text)
lorem ipsum
Tertiary (Dark Text)
lorem ipsum
Danger
lorem
Tab (Active)
lorem
Tab
lorem
Tab
lorem ipsum
Tab
DIY
Tab
05 / Cards -- lorem ipsum

lorem ipsum dolor sit

240 x 140

lorem ipsum dolor L

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

¥3,980 (lorem)
lorem
240 x 140

lorem ipsum dolor

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

¥2,200 (lorem)
lorem ipsum10%OFF
240 x 140

lorem ipsum dolor sit 350ml

lorem ipsum dolor sit amet consectetur adipiscing elit sed.

¥1,650 (lorem)
lorem ipsum
240 x 140

lorem ipsum dolor lorem ipsum

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

¥4,400 (lorem)
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #e0e0e0, radius: 0px
lorem ipsum -- border: #006b30 (Green Primary)
lorem -- border: #cc0000 (Danger)
07 / Elevation -- lorem

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Elevation 1
lorem hover
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum
Focus Ring
#006b30 (Green Primary)
08 / Layout

lorem ipsum dolor / lorem ipsum dolor

Main Content 1040px
Article / Feature 620px
Product Grid (4col) 940px
Spacing Scale
4
8
16
24
32
48