Peblla Device — Design System

Design system tokens for Peblla hardware products · Based on tokens.json

01

Design Tokens

Colors

bg

#F5F5FA

#0A0A0A

surface

#FFFFFF

#1C1C1C

surface-alt

#F0F0F5

#282828

surface-raised

#EAEAF0

#363636

surface-zebra

#FAFAFD

#202020

card-bg

#FFFFFF

#2E2E2E

input-bg

#F0F0F5

#2C2C2E

table-bg

#F0F0F5

#363636

border

#E5E5EA

#2C2C2E

border-strong

#D1D1D6

#3A3A3C

border-subtle

#E8E8ED

#2D2D2D

table-border

#C7C7CC

#525151

text

#1C1C1E

#F1F1F1

text-secondary

#636366

#8E8E93

text-muted

#8E8E93

#636366

text-dim

#AEAEB2

#636363

accent

#2D47A0

#3955BA

accent-50

#f0f2f8

#171d2f

accent-100

#e2e5f3

#1d243e

accent-200

#c3cce8

#242f55

accent-300

#96a5d8

#96a5d8

accent-400

#6278c5

#6278c5

accent-500

#3f57ab

#3f57ab

accent-700

#2b3a6d

#2b3a6d

accent-green

#34A853

#3EA558

accent-mint

#3AA88E

#44B796

status-neutral

#8E8E93

#8E8E93

status-success

#34A853

#3EA558

status-info

#1A9088

#2EAAA0

status-danger

#D32F2F

#E53935

status-warning

#E5930E

#F5A623

chip-active-bg

#1C1C1E

#484848

chip-active-text

#FFFFFF

#F1F1F1

chip-inactive-border

#D1D1D6

#3A3A3C

white

#FFFFFF

#FFFFFF

black

#000000

#000000

transparent

transparent

transparent

02

Typography

Font Family: Roboto

2xs10px/14px

The quick brown fox

xs11px/15px

The quick brown fox

sm12px/16px

The quick brown fox

base13px/18px

The quick brown fox

lg14px/20px

The quick brown fox

xl16px/22px

The quick brown fox

2xl20px/28px

The quick brown fox

3xl24px/32px

The quick brown fox

display32px/40px

The quick brown fox

03

Spacing

Space Scale

xs4px

sm6px

md8px

lg12px

xl16px

2xl24px

3xl32px

04

Border Radius

Radius Scale

4

sm

6

md

8

lg

12

xl

100

pill

05

Primitives

Button

通用按钮组件，支持多种变体和尺寸

.ds-btn

01

Badge

状态标签，胶囊形

.ds-badge

02

Input

输入框

.ds-input

03

Select

下拉选择框，与 Input 同规格

.ds-select

04

Chip

筛选标签

.ds-chip

05

Card

卡片容器

.ds-card

06

RadioCard

可选项卡片 + 内嵌 radio 圆点

.ds-radio-card

07

Divider

分隔线

.ds-divider

08

SegmentedControl

分段控制器

.ds-segmented

09

SectionTitle

区块标题，大写字母

.ds-section-title

10

Modal

模态弹窗

.ds-modal

11

TopBar

顶栏导航

.ds-topbar

12

TabBar

底部导航栏

.ds-tabbar

13

FakeTextarea

仿文本域（点击编辑的文字展示区）

.ds-fake-textarea

14

SearchInput

搜索输入框（带图标和清除按钮）

.ds-search-input

15