Typography

Desktop

1920px - 1280px width

Tablet

1279px - 768px width

Mobile

767px - 320px width

Heading 1

96px / 112px

64px / 88px

Black #24272D

H1

Heading 2

64px / 88px

48px / 64px

Black #24272D

H2

Heading 3

48px / 64px

36px / 56px

Black #24272D

H3

Heading 4

36px / 44px

24px / 36px

Black #24272D

Grey #929396

Accent #0878EB

H4

H4

H4

H4

H4

H4

Heading 5

24px / 36px

20px / 32px

Black #24272D

Grey #929396

Accent #0878EB

H5
H5
H5
H5
H5
H5

Subtitle

20px / 32px

16px / 24px

Black #24272D

Grey #929396

Accent #0878EB

SubtitleSubtitleSubtitle
SubtitleSubtitleSubtitle

Paragraph

14px / 20px

14px / 20px

Black #24272D

Grey #929396

Accent #0878EB

Paragraph

Paragraph

Paragraph

Paragraph

Paragraph

Paragraph

Label

12px / 16px

12px / 16px

Black #24272D

Grey #929396

Accent #0878EB

Caption

8px / 12px

8px / 12px

Black #24272D

Grey #929396

Accent #0878EB

Caption
Caption
Caption
Caption
Caption
Caption

Colors

Fill colors
Accent
Dark
White
Grey #1
Grey #2
Grey #3
Grey #4
Grey #5
Image
Border colors
normal
accent
error
Shadow
Small
Medium
Large
Extra large

Button

1. Buttons

Auto Size Primary

Auto Size Outline

Small Primary

Small Outline

Medium Primary

Medium Outline

Large Primary

Large Outline

2. Square Buttons

Auto Primary

Auto Outline

Small Primary

Small Outline

Medium Primary

Medium Outline

Large Primary

Large Outline

3. Round Buttons

Auto Primary

Auto Outline

Small Primary

Small Outline

Medium Primary

Medium Outline

Large Primary

Large Outline

4. Icon Buttons

Auto Primary

Auto Outline

Small Primary

Small Outline

Medium Primary

Medium Outline

Large Primary

Large Outline

5. Input

Auto
Small
Medium

6. Select

Auto
Error message
Small
Error message
Medium
Error message

8. Radio Button

Auto
Default
Disabled
Small
Default
Disabled
Medium
Default
Disabled

9. Checkbox

Auto
Small
Medium

10. Toggle

Auto
Small
Medium

11. Counter

Auto
12
12
12
Error message
Small
12
12
12
Error message
Medium
12
12
12
Error message

14. Link

Auto
LinkLink
Small
LinkLink
Medium
LinkLink

15. Overflow menu

Auto
固定 Placement (bottom-start)
Context Menu

17. Pagination

Auto
Small
Medium

18. Tabs

Auto
Small
Medium

19. Tooltip

Auto
Small
Medium

22. Form

Auto
Required
Required, length 6 - 12
Small
Required
Required, length 6 - 12
Medium
Required
Required, length 6 - 12

23. Drawer

24. Modal

25. Message

26. Avatar

Small
T
avatar
avatar
Large
T
avatar
avatar
Auto
T
avatar
avatar

27. Tag

颜色
白标签
没有爸爸的标签
黄皮白心标签
尺寸
大杯
超大杯
形状
圆的标签
像个跳蛋
可不可关闭
可关闭
还是可关闭
图标
已完成
已完成
hover 效果
light
dark

28. Slider

  • 基本使用
  • disabled
  • 设置范围: 250
    100
    1000
  • 双按钮
    100
    1000
  • 受控使用
    100
    1000

29. PictureZoom

  • 基本使用
    nextjs.orgnextjs.org
    disabled
    nextjs.orgnextjs.org
  • 设置缩放比例([0, +∞]): 2
    nextjs.orgnextjs.org
  • 子元素非 Img/Picture
    DIV
    使用 ImageKey, 修改底色
    imageKeyimageKey
  • 使用 Preview
    imageKeyimageKey
    使用 Blur 效果（preview 的时候不会有交互的效果）
    imageKeyimageKey

30. Ellipsis

天长地久有时尽，此恨绵绵无绝期

岱宗夫如何？齐鲁青未了。

造化钟神秀，阴阳割昏晓。

荡胸生曾云，决眦入归鸟。

会当凌绝顶，一览众山小。

岱宗夫如何？齐鲁青未了。

造化钟神秀，阴阳割昏晓。

荡胸生曾云，决眦入归鸟。

会当凌绝顶，一览众山小。

31. Label

auto
label
label
label
small
label
label
label
medium
label
label
label

32. Alter

警告警告，此处施工，禁止通行
很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告 很长的警告

Grid System Example

col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col
col-span-4
col-span-20
offset-1 col-span-4
col-span-4
offset-7 col-span-4
col-span-4
col-span-4
col-span-20
offset-1 col-span-4
col-span-4
offset-7 col-span-4
col-span-4