← 返回全部设计
中文
EN
Expo
Expo
开发者工具与 IDE
React Native 平台。暗色主题，紧凑字距，代码为中心
实时预览
配色 Colors · 28
primary
#000000
primary-active
#1a1a1a
text-link
#0d74ce
text-link-secondary
#476cff
ink
#171717
body
#60646c
body-strong
#171717
muted
#999999
muted-soft
#cccccc
hairline
#f0f0f3
hairline-soft
#f5f5f7
hairline-strong
#dcdee0
canvas
#ffffff
canvas-soft
#fafafa
surface-card
#ffffff
surface-strong
#f0f0f3
surface-dark
#171717
surface-dark-elevated
#1a1a1a
on-primary
#ffffff
on-dark
#ffffff
on-dark-soft
#b0b4ba
gradient-sky-light
#cfe7ff
gradient-sky-mid
#a8c8e8
accent-warning
#ab6400
accent-preview
#8145b5
accent-link-bright
#47c2ff
semantic-error
#eb8e90
semantic-success
#16a34a
字体阶梯 Typography · 14
display-mega
64px · 600
永远相信美好的事情即将发生 Ag
display-xl
48px · 600
永远相信美好的事情即将发生 Ag
display-lg
36px · 600
永远相信美好的事情即将发生 Ag
display-md
28px · 600
永远相信美好的事情即将发生 Ag
display-sm
22px · 600
永远相信美好的事情即将发生 Ag
title-md
18px · 600
永远相信美好的事情即将发生 Ag
title-sm
16px · 600
永远相信美好的事情即将发生 Ag
body-md
16px · 400
永远相信美好的事情即将发生 Ag
body-sm
14px · 400
永远相信美好的事情即将发生 Ag
caption
13px · 400
永远相信美好的事情即将发生 Ag
caption-uppercase
11px · 600
永远相信美好的事情即将发生 Ag
code
13px · 400
永远相信美好的事情即将发生 Ag
button
14px · 500
永远相信美好的事情即将发生 Ag
nav-link
14px · 500
永远相信美好的事情即将发生 Ag
圆角 Radius · 9
none
0px
xs
4px
sm
6px
md
8px
lg
12px
xl
16px
xxl
24px
pill
9999px
full
9999px
间距 Spacing · 9
xxs
4px
xs
8px
sm
12px
base
16px
md
20px
lg
24px
xl
32px
xxl
48px
section
96px
按钮预览 Buttons
主要按钮
次要按钮
标签 Badge
组件规范 Components · 22
top-nav
backgroundColor
#ffffff
textColor
#171717
typography
{typography.nav-link}
height
64px
button-primary
backgroundColor
#000000
textColor
#ffffff
typography
{typography.button}
rounded
8px
padding
10px 18px
height
40px
button-primary-active
backgroundColor
#1a1a1a
textColor
#ffffff
rounded
8px
button-secondary
backgroundColor
#ffffff
textColor
#171717
typography
{typography.button}
rounded
8px
padding
9px 17px
height
40px
button-tertiary-text
backgroundColor
transparent
textColor
#0d74ce
typography
{typography.button}
hero-band
backgroundColor
#ffffff
textColor
#171717
typography
{typography.display-mega}
padding
96px
device-mockup-card
backgroundColor
#ffffff
textColor
#171717
rounded
16px
padding
0
feature-card
backgroundColor
#ffffff
textColor
#171717
typography
{typography.title-md}
rounded
12px
padding
24px
feature-card-dark
backgroundColor
#171717
textColor
#ffffff
typography
{typography.title-md}
rounded
12px
padding
24px
workflow-step-card
backgroundColor
#ffffff
textColor
#60646c
typography
{typography.body-md}
rounded
12px
padding
20px
workflow-step-icon
backgroundColor
#f0f0f3
rounded
8px
size
32px
code-block
backgroundColor
#171717
textColor
#ffffff
typography
{typography.code}
rounded
12px
padding
20px
ide-mockup-card
backgroundColor
#171717
textColor
#ffffff
rounded
12px
padding
0
pricing-tier-card
backgroundColor
#ffffff
textColor
#171717
typography
{typography.body-md}
rounded
12px
padding
32px
pricing-tier-featured
backgroundColor
#171717
textColor
#ffffff
typography
{typography.body-md}
rounded
12px
padding
32px
text-input
backgroundColor
#ffffff
textColor
#171717
typography
{typography.body-md}
rounded
8px
padding
12px 16px
height
44px
badge-pill
backgroundColor
#f0f0f3
textColor
#171717
typography
{typography.caption-uppercase}
rounded
9999px
padding
4px 10px
ecosystem-tile
backgroundColor
#ffffff
rounded
8px
size
64px
cta-band
backgroundColor
#ffffff
textColor
#171717
typography
{typography.display-lg}
padding
96px
testimonial-card
backgroundColor
#ffffff
textColor
#60646c
typography
{typography.body-md}
rounded
12px
padding
24px
footer-light
backgroundColor
#ffffff
textColor
#60646c
typography
{typography.body-sm}
padding
64px 48px
footer-link
backgroundColor
transparent
textColor
#60646c
typography
{typography.body-sm}
设计规范
test