Peblla Device

Design system for Peblla hardware products

01

Colors

Light

bg

#f5f5f7

surface

#ffffff

surfaceElevated

#f0f0f2

border

#e0e0e2

borderLight

#d0d0d2

borderSubtle

#c8c8ca

textPrimary

#1a1a1a

textSecondary

#6e6e73

textTertiary

#aeaeb2

textInverse

#636366

brand

#3955ba

success

#34a853

successAlt

#3aad8a

danger

#d93025

buttonBg

#e8e8ea

inputBg

#f0f0f2

white

#ffffff

Dark

bg

#0a0a0a

surface

#1c1c1e

surfaceElevated

#292929

border

#2c2c2e

borderLight

#3a3a3c

borderSubtle

#3f3f3f

textPrimary

#f1f1f1

textSecondary

#8e8e93

textTertiary

#717171

textInverse

#aeaeae

brand

#3955ba

success

#3ea558

successAlt

#44b695

danger

#e85555

buttonBg

#363636

inputBg

#4e4e4e

white

#ffffff

02

Typography

Font Family: Roboto

xs10px

The quick brown fox

sm11px

The quick brown fox

md12px

The quick brown fox

lg13px

The quick brown fox

xl14px

The quick brown fox

xxl16px

The quick brown fox

xxxl18px

The quick brown fox

title24px

The quick brown fox

03

Spacing

Space Scale

xs4px

sm6px

md8px

lg10px

xl12px

xxl16px

xxxl20px

xxxxl24px

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.