MyPixel design system

Tokens, components and behaviour of the MyPixel beta control panel.

Navy ladder

ink

ink-90

ink-85

ink-80

Surface / glass

canvas

glass

glass-strong

border

border-strong

Accent

accent-200

accent-300

accent-400

accent-500

Status

ok

warn

danger

info

Type scale

Display — Inter 600

Heading — Inter 600

Section title — Inter 600

Body strong — Inter 500

Body — Inter 400, the workhorse size for labels and copy.

Caption — Inter 400 · muted for secondary information.

Micro — Inter 400 · faint for timestamps and meta.

Code / identifiers — monospace for IDs, IPs and keys.

Buttons

Primary Secondary Ghost Danger Small

Badges

Neutral Operational Degraded Critical Info Accent With icon

Alerts

Form fields

We never share your address.

A supporting description.

Icons

A stroke-based icon set (~100 glyphs). Dot, status and badge variants combine with badges above.

dashboard
server
box
globe
shield
shield-check
lock
key
key-round
bell
activity
clock
search
help
menu
x
plus
minus
download
print
ellipsis
pencil
trash
refresh
play
pause
check
check-circle
alert-triangle
alert-circle
info
copy
eye
eye-off
external-link
filter
cpu
memory
hard-drive
database
network
zap
mail
calendar
phone
folder
paperclip
gift
users
user
user-cog
settings
sliders
trending-up
pie-chart
terminal
webhook
fingerprint
monitor
smartphone
tag
percent
banknote
repeat
archive
link
life-buoy
megaphone
book-open
file-text
clipboard-list
credit-card
wallet
arrow-left-right
arrow-right
log-out
log-in
user-check
building
chart
layers
clock-3
git-branch
shield-alert
code
star
upload
package-check
package-x
gauge
timer
send
message
inbox
cloud
rocket
copy-check
refresh-clock
alert-octagon

State components

Nothing here yet

This is the empty state used for unpopulated collections.

You do not have permission

Your role does not allow access to this area. If you believe this is a mistake, contact an administrator.