Peblla Lab — Design System

Design system for Peblla web applications · Based on system.json

01

Design Tokens

Colors

bg

#FFFFFF

#2C2C2C

surface

#FFFFFF

#2C2C2C

surfaceElevated

#F7F7F7

#1F1F1F

border

#E6E6E6

#464646

borderLight

#F2F2F2

#535353

borderSubtle

#F7F7F7

#393939

textPrimary

#000000

#F2F2F2

textSecondary

#606060

#BBBBBB

textTertiary

#949494

#949494

brand

#FF4D00

#FF4D00

success

#34C759

#269241

danger

#D2322D

#BD2D28

buttonBg

#FF4D00

#FF4D00

inputBg

#FFFFFF

#2C2C2C

02

Typography

Font Family: Inter

xs10px

The quick brown fox

sm12px

The quick brown fox

md14px

The quick brown fox

lg16px

The quick brown fox

xl18px

The quick brown fox

xxl20px

The quick brown fox

xxxl24px

The quick brown fox

title32px

The quick brown fox

03

Spacing

Space Scale

xs4px

sm6px

md8px

lg12px

xl16px

xxl20px

xxxl24px

xxxxl32px

04

Border Radius

Radius Scale

4

sm

6

md

8

lg

12

xl

999

full

05

Primitives

No primitives defined yet.

Add primitives to data/system.json to see them here.