Skip to content

Colors

All colors are available as CSS custom properties with the --pm-color- prefix.

Primary (Blue)

Token	Value
`--pm-color-primary-50`	`#eff6ff`
`--pm-color-primary-100`	`#dbeafe`
`--pm-color-primary-200`	`#bfdbfe`
`--pm-color-primary-300`	`#93c5fd`
`--pm-color-primary-400`	`#60a5fa`
`--pm-color-primary-500`	`#3b82f6`
`--pm-color-primary-600`	`#2563eb`
`--pm-color-primary-700`	`#1d4ed8`
`--pm-color-primary-800`	`#1e40af`
`--pm-color-primary-900`	`#1e3a8a`

Neutral (Gray)

Token	Value
`--pm-color-neutral-0`	`#ffffff`
`--pm-color-neutral-50`	`#f9fafb`
`--pm-color-neutral-100`	`#f3f4f6`
`--pm-color-neutral-200`	`#e5e7eb`
`--pm-color-neutral-300`	`#d1d5db`
`--pm-color-neutral-400`	`#9ca3af`
`--pm-color-neutral-500`	`#6b7280`
`--pm-color-neutral-600`	`#4b5563`
`--pm-color-neutral-700`	`#374151`
`--pm-color-neutral-800`	`#1f2937`
`--pm-color-neutral-900`	`#111827`
`--pm-color-neutral-950`	`#030712`

Danger (Red)

Token	Value
`--pm-color-danger-50`	`#fef2f2`
`--pm-color-danger-500`	`#ef4444`
`--pm-color-danger-600`	`#dc2626`
`--pm-color-danger-700`	`#b91c1c`

Success (Green)

Token	Value
`--pm-color-success-50`	`#f0fdf4`
`--pm-color-success-500`	`#22c55e`
`--pm-color-success-600`	`#16a34a`
`--pm-color-success-700`	`#15803d`

Usage

.my-element {
  color: var(--pm-color-primary-600);
  background-color: var(--pm-color-neutral-50);
}