groovisions
works #chappie news about
groovisions

lorem ipsum dolor, lorem ipsum, Web, lorem ipsum dolor sit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.

MONOCHROME SYSTEM — #ffffff / #9f9f9f / #333333 · HELVETICA NEUE LIGHT · WEIGHT 400
01 — COLORS

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem ipsum #9f9f9f lorem, lorem / lorem ipsum dolor sit #333333. lorem ipsum dolor UI lorem ipsum, lorem ipsum dolor sit amet.

Background
#ffffff
lorem ipsum(lorem)
Text Primary
#9f9f9f
lorem / lorem / lorem ipsum(lorem ipsum dolor sit)
Text Emphasis
#333333
lorem ipsum dolor / lorem / lorem ipsum dolor sit amet
Hairline
#e5e5e5
lorem ipsum / lorem
Danger(lorem)
#c0392b
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur
02 — TYPOGRAPHY

lorem ipsum dolor

Helvetica Neue Light lorem / weight 400 lorem ipsum dolor sit. lorem ipsum dolor(20 / 16 / 14px), lorem ipsum dolor sit amet consectetur. palt lorem ipsum. letter-spacing lorem +0.02–0.04em lorem ipsum dolor sit.

groovisions
Logo (h1) · 20px · weight 400 · lh 1.8 · ls 0.02em · color #9f9f9f
works　news　about — lorem ipsum dolor
nav · 20px · weight 400 · lh 1.8 · ls 0.04em
#chappie — lorem ipsum dolor
li · 20px · weight 400 · lh 1.5
lorem — lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, Web lorem ipsum dolor sit amet consectetur. UI lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
Body · 16px · weight 400 · lh 1.5 · ls 0.04em · color #9f9f9f
lorem / lorem ipsum dolor — lorem ipsum dolor sit(lorem ipsum dolor)
emphasis · 16px · weight 400 · color #333333(lorem ipsum dolor sit)
© 2026 groovisions — lorem / lorem ipsum dolor sit amet.
Caption / Footer · 14px · weight 400 · lh 2.0 · ls 0.04em
03 — WORKS / ARTICLE

lorem ipsum dolor

lorem, lorem ipsum dolor.

groovisions lorem ipsum dolor, lorem ipsum dolor sit. UI lorem ipsum dolor sit amet, lorem / lorem ipsum / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor“chappie(lorem ipsum)”lorem ipsum, lorem ipsum dolor / lorem ipsum / Web lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.works lorem。

04 — BUTTONS

lorem

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur(#9f9f9f → hover #333333). lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit amet consectetur.

works →(lorem ipsum dolor / lorem ipsum dolor) View(lorem ipsum dolor) Contact(lorem ipsum dolor)
05 — CARDS

lorem ipsum

lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit. lorem ipsum #333333 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.

View
chappie system
Character / Avatar
View
Motion Identity
Motion / Direction
View
Album Artwork
Graphic
View
Website
Web / Art Direction
06 — FORMS

lorem ipsum

lorem ipsum / lorem ipsum / lorem ipsum 3 lorem. radius 2px, lorem ipsum dolor sit amet #333333(lorem ipsum dolor sit amet consectetur). lorem ipsum dolor sit amet, lorem ipsum dolor #c0392b.

lorem ipsum dolor sit amet consectetur.
※ lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit
lorem ipsum
07 — ELEVATION

lorem

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

Level 0 — none(lorem)
Level 1 — dropdown
Level 2 — modal
08 — LAYOUT

lorem ipsum dolor

8 / 16 / 24 / 40 / 64 / 96px. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

XS 8
S 16
M 24
L 40
XL 64
XXL 96