Design System Preview
pixiv.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
pixiv Blue
#0096fa
lorem ipsum / CTA
Blue Dark
#0069b5
lorem / lorem
Text
Text Primary
#464a4d
lorem ipsum dolor
Text Secondary
#8c8c8c
lorem ipsum dolor
Text Disabled
#b8b8b8
lorem / lorem ipsum dolor
Semantic
Like / Bookmark
#ff4060
lorem / lorem ipsum dolor
Danger
#ff0000
lorem / lorem
Warning
#f5a623
lorem / lorem
Success
#00c853
lorem / lorem
Surface & Background
Background
#eeeeee
lorem ipsum
Surface
#ffffff
lorem / lorem ipsum
Border
#d6d6d6
lorem ipsum / lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Heading Large
24px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Heading 2
20px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum — Heading 3
16px / 700 / line-height: 1.5 / letter-spacing: normal
lorem ipsum dolor — lorem ipsum, lorem, lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. line-height: 22px (x1.57) lorem ipsum dolor sit amet.
14px / 400 / line-height: 22px (x1.57) / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — 14px lorem ipsum
14px / 400 / line-height: 22px / color: #0096faa lorem
lorem ipsum dolor — 12px lorem ipsum
12px / 400 / line-height: 18px / color: #0096faa lorem (small)
body lorem ipsum — 12px / 400 / 18px. pixiv lorem ipsum dolor sit. UI lorem ipsum dolor sit amet.
12px / 400 / line-height: 18px (x1.5)body lorem ipsum
lorem ipsum dolor — 10px / lorem ipsum dolor
10px / 400 / line-height: 14pxCaption
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

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

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

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary
lorem ipsum dolor
Outline
lorem ipsum
Round CTA
Bookmark
lorem ipsum
Danger
05 / Cards — lorem ipsum

lorem ipsum dolor sit

1/3

lorem ipsum dolor sit amet

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

illustrator_a
1/1

lorem ipsum dolor sit amet

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

creator_b
1/8

lorem ipsum dolor sit

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

artist_c
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #d6d6d6, radius: 4px, height: 36px
lorem ipsum — border: #0096fa (pixiv Blue)
lorem — border: #ff0000 (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 1px 4px rgba(0,0,0,0.08) — lorem
Level 2
0 2px 8px rgba(0,0,0,0.12) — lorem ipsum dolor
Level 3
0 4px 16px rgba(0,0,0,0.16) — lorem ipsum
08 / Spacing

lorem ipsum dolor sit

4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL
09 / Layout

lorem ipsum dolor

Max Container 1224px
Content Area 960px
Article / Caption 620px