lorem ipsum dolor
lorem ipsum dolor.

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.

Notion lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand / CTA
CTA White
#FFFFFF
lorem ipsum CTA lorem ipsum
Brand Black
#000000
lorem ipsum CTA / lorem
Accent Blue
#2383E2
lorem / lorem ipsum dolor
Text
Text Primary
rgba(255,255,255,0.95)
lorem ipsum dolor(lorem ipsum)
Text Primary (Light)
rgba(0,0,0,0.95)
lorem ipsum dolor(lorem ipsum)
Text Secondary
rgba(255,255,255,0.6)
lorem ipsum dolor
Text Disabled
rgba(255,255,255,0.3)
lorem ipsum
Semantic
Success
#6FCF97
lorem / lorem
Danger
#EB5757
lorem / lorem
Warning
#F2C94C
lorem / lorem
Background & Surface
Background Primary
#191918
lorem ipsum
Background Secondary
#1E1E1D
lorem ipsum dolor
Background Tertiary
#252524
lorem ipsum
Surface
#2F2F2F
lorem / lorem
Surface Hover
#3A3A3A
lorem ipsum
Border Default
rgba(255,255,255,0.13)
lorem ipsum dolor
Border Focus
#2383E2
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur.
64px / 700 / line-height: 64px (1.0) / letter-spacing: normalDisplay
lorem ipsum dolor sit amet
54px / 700 / line-height: 56px (1.04) / letter-spacing: normalHeading 1
lorem ipsum dolor sit amet consectetur
22px / 700 / line-height: 28px (1.27) / letter-spacing: normalHeading 2
lorem ipsum dolor -- Notion lorem ipsum dolor, Wiki, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. lorem ipsum dolor sit, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 24px (1.5) / letter-spacing: normalBody
lorem ipsum dolor -- Caption (14px)
14px / 400 / line-height: 20px (1.43) / color: Text Secondary
lorem ipsum dolor -- Small (12px)
12px / 400 / line-height: 16px (1.33)
1,234,567
font-feature-settings: "lnum", "locl" 0 -- lorem Lining Figures(lorem ipsum)
03 / Article -- lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur

Notion lorem ipsum dolor, Wiki, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit/lorem ipsum dolor sit amet. font-family loremNotionInter lorem ipsum dolor sit,font-feature-settings: "lnum" lorem ipsum Lining Figures lorem ipsum dolor. ABC abc 123

lorem ipsum dolor sit amet consectetur adipiscing, Inter lorem ipsum dolor sit amet consectetur adipiscing elit sed, lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

Notion lorem ipsum dolor
Primary CTA
lorem ipsum
Outline
lorem ipsum dolor sit
Blue Accent
lorem ipsum
Danger
lorem ipsum
Ghost
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum

lorem ipsum dolor

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

lorem ipsum

Notion AI

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: rgba(255,255,255,0.13), radius: 6px
lorem ipsum -- border: #2383E2 (Accent Blue)
lorem -- border: #EB5757 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
lorem / lorem ipsum
Level 2
lorem ipsum dolor / lorem ipsum dolor
Level 3
lorem ipsum / lorem ipsum
Focus Ring
#2383E2 (Accent Blue)
08 / Spacing

lorem ipsum dolor sit

4
8
16
24
32
48
64
09 / Layout

lorem ipsum dolor

Max Container 1200px
Content Area 940px
Article Body 680px