Design System Preview
zenn.dev -- 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. CSS Custom Properties lorem.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Zenn Blue
#3ea8ff
lorem ipsum dolor / CTA
Zenn Blue Dark
#0f83fd
lorem / lorem
Text(rgba opacity lorem)
Text Primary
rgba(0,0,0,0.82)
lorem ipsum dolor
Text Secondary
rgba(0,0,0,0.55)
lorem ipsum dolor
Text Disabled
rgba(0,0,0,0.36)
lorem ipsum
Semantic
Success
#10b981
lorem / lorem
Danger
#f43f5e
lorem / lorem
Warning
#f59e0b
lorem / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f1f5f9
lorem / lorem ipsum dolor
Border
#d6e3ed
lorem ipsum / lorem
02 / Typography -- lorem(CSS vars lorem)

lorem ipsum dolor sit

Tech
38.4px / 700 / line-height: 1.5 (57.6px) / palt: loremlorem / lorem ipsum dolor sit
lorem ipsum dolor -- Article Title (h1)
32px / 700 / line-height: 1.5 / palt: loremlorem ipsum
lorem ipsum dolor -- Heading 2 (lorem)
16.8px / 700 / line-height: 25.2px (x1.5) / palt: loremlorem ipsum
lorem ipsum dolor -- Heading 2 (UI)
16px / 700 / line-height: 24px (x1.5) / palt: loremUI lorem
lorem ipsum dolor -- lorem ipsum dolor sit (line-height: 1.8) lorem ipsum dolor sit. lorem ipsum dolor rgba(0,0,0,0.82) lorem, lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem normal(lorem ipsum). Qiita lorem line-height: 1.8 lorem, YakuHanJPs lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 28.8px (x1.8) / letter-spacing: normal / palt: loremlorem
lorem / lorem -- Label (14px)
14px / 600 / line-height: 1.5 / color: Text Secondary
lorem ipsum dolor -- Caption (12px)
12px / 400 / line-height: 1.5lorem / lorem ipsum
const greeting = "Hello, Zenn!";
SFMono-Regular, Consolas, Menlo, monospace / 14px / 400lorem ipsum dolor
03 / Article -- lorem ipsum

lorem ipsum dolor sit amet

TypeScript lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur TypeScript lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor,as const lorem Template Literal Types lorem ipsum dolor sit amet consectetur.

1. lorem ipsum dolor sit amet

lorem, lorem ipsum doloras const lorem ipsum dolor. lorem ipsum, TypeScript lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

// lorem ipsum dolor sit amet consectetur
const colors = {
  primary: "#3ea8ff",
  danger: "#f43f5e",
  text: "rgba(0,0,0,0.82)",
} as const;

type ColorKey = keyof typeof colors;

font-family lorem ipsum dolor sit amet consectetur adipiscing. Zenn lorem-apple-system lorem ipsum dolor, lorem ipsum dolor ProN, Meiryo lorem ipsum dolor sit amet consectetur adipiscing. Qiita lorem YakuHanJPs lorem ipsum Web lorem ipsum dolor sit amet consectetur.

04 / Comparison -- Zenn vs Qiita

Qiita lorem ipsum

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

loremZennQiita
lorem ipsum dolor■ #3ea8ff (Blue)■ #55c500 (Green)
lorem ipsumrgba(0,0,0,0.82)rgba(0,0,0,0.87)
font-family lorem-apple-systemYakuHanJPs
lorem ipsumloremYakuHanJPs lorem ipsum
lorem line-height1.81.8
paltnormalnormal
CSS Custom Propertiesloremlorem
lorem ipsum#ffffff#f5f6f6
lorem ipsum#d6e3ed#e0e0e0
Border Radius8-12px4-8px
lorem ipsum dolor sit
Zenn Blue
#3ea8ff
Qiita Green
#55c500
lorem ipsum dolor(opacity lorem)
Zenn Text
rgba(0,0,0,0.82)
Qiita Text
rgba(0,0,0,0.87)
05 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
lorem ipsum dolor
Outline
lorem ipsum
Danger
Like
lorem ipsum
Ghost
06 / Cards

lorem ipsum dolor sit

TypeScript 5.x lorem ipsum dolor

Decorator, const type parameters, satisfies lorem, TypeScript 5.x lorem ipsum dolor sit amet consectetur adipiscing.

TypeScriptlorem ipsum dolor
lorem ipsum

Zenn lorem Qiita lorem DESIGN.md lorem

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

lorem ipsum dolorAI
lorem ipsum

lorem Web lorem ipsum dolor sit

YakuHanJPs, Noto Sans JP, Google Fonts lorem woff2 lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolorCSS
lorem ipsum
07 / Forms

lorem ipsum dolor

lorem ipsum -- border: #d6e3ed, radius: 8px
lorem ipsum -- border: #3ea8ff (Zenn Blue)
lorem -- border: #f43f5e (Danger)
08 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Level 1
0 2px 4px rgba(0,0,0,0.08) -- lorem ipsum dolor
Level 2
0 4px 12px rgba(0,0,0,0.1) -- lorem ipsum dolor
Level 3
0 8px 24px rgba(0,0,0,0.12) -- lorem ipsum
Focus Ring
#3ea8ff + box-shadow ring
09 / Spacing

lorem ipsum dolor sit

4
8
12
16
20
24
32
48
64
10 / Layout

lorem ipsum dolor

Page Container 960px
Article Body 820px
Feed Content 690px
Sidebar 300px