Design System Preview
note.com — 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
note Green
#5ac8b8
lorem ipsum / lorem
Text
Text Primary
#08131a
lorem ipsum dolor(lorem)
Text Secondary
rgba(8,19,26,0.66)
lorem ipsum dolor
Text Disabled
rgba(8,19,26,0.50)
lorem / lorem ipsum
Placeholder
#888
lorem ipsum dolor sit
Semantic
Success
#1e7b65
lorem / lorem
Danger
#b22323
lorem / lorem
Caution
#916626
lorem / lorem
Like
#d13e5c
lorem / lorem ipsum
Badge
#d53c21
lorem ipsum
Surface & Border
Background Primary
#ffffff
lorem ipsum
Background Secondary
#f5f8fa
lorem ipsum dolor
Surface Primary
#08131a
CTA / lorem ipsum dolor
Border Default
rgba(8,19,26,0.14)
lorem ipsum dolor
Border Focus
#292d9e
lorem ipsum dolor
Gray Scale
Gray 900
#08131a
Gray 800
#202a30
Gray 700
#363f42
Gray 600
#5a656b
Gray 500
#7e888f
Gray 400
#9ca7ad
Gray 200
#c5ccd1
Gray 100
#dce0e3
Gray 50
#f5f8fa
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Article Title (h1)
32px / 700 / line-height: 1.5 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum dolor — Heading 2
28px / 700 / line-height: 1.286 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum — Heading 3
20px / 700 / line-height: 1.8 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum dolor — Heading 3 (top)
16px / 600 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. line-height: 2.0 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. letter-spacing lorem palt lorem ipsum dolor sit.
18px / 400 / line-height: 2.0 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Small (14px)
14px / 400 / line-height: 1.5 / color: Text Secondary
lorem ipsum dolor — Caption (12px)
12px / 600 / line-height: 1.5lorem ipsum dolor
1,234,567
Open Sans (--family-number) / lorem ipsum dolor sit amet
03 / Article — lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing elit sed. font-family lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. ABCabc 123

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
lorem ipsum
Outline
lorem ipsum
Danger
Like
05 / Cards

lorem ipsum dolor sit

lorem UI lorem ipsum

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

lorem ipsum

DESIGN.md lorem ipsum

AI lorem ipsum dolor sit UI lorem ipsum dolor sit amet consectetur. 9 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum

computed style lorem ipsum

Puppeteer lorem ipsum dolor sit amet consectetur, DevTools lorem ipsum dolor sit. lorem ipsum dolor DESIGN.md lorem ipsum dolor.

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: rgba(8,19,26,0.14), radius: 8px
lorem ipsum — border: #292d9e (darkblue-600)
lorem — border: #b22323 (danger)
07 / Elevation — CSS Custom Properties lorem

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
--elevation-1
lorem
--elevation-4
lorem ipsum dolor
--elevation-6
lorem ipsum / lorem ipsum
Focus Ring
#292d9e (darkblue-600)
08 / Layout — --size-content-* lorem

lorem ipsum dolor

Main Content 940px
Article (Small) 620px
Timeline / Editor 580px
2-Column Main 610px
2-Column Sub 280px