Design System Editor

fonts

display
format
base64
text
format
base64
code
format
base64

colors

primary
bg
light
dark
text
light
dark
secondary
bg
light
dark
text
light
dark
contrast
bg
light
dark
text
light
dark
danger
bg
light
dark
text
light
dark

sizes

small
space
text
rounding
medium
space
text
rounding
large
space
text
rounding

components

button
primary
color
size
subtle
color
size
danger
color
size
form
primary
color
size

Button

icon?: 'github' | 'google' | 'logo' | 'wordMark'

onClick: () => unknown

content: string

type: 'primary' | 'subtle' | 'danger'

Button

Form

title: string

fields: { label: string; name: string; placeholder?: string; type: 'text' | 'number' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'time' | 'checkbox' | 'radio' | 'textarea' }[]

onsubmit: () => unknown

Form

fields:

Icon

icon: 'github' | 'google' | 'logo' | 'wordMark' | 'logo'

size: 'small' | 'medium' | 'large'

fill?: 'primary' | 'secondary' | 'contrast' | 'danger'

Icon

Github Logo
Github Logo