Monokai — Dark WCAG 2.2:AA

UUID: cc0d722b-48ac-495f-b8d2-d9f3304b97f8

A vintage electric sign above a nightclub entrance at 2 a.m. — the background is the deep near-black of unlit alley brickwork, and from the sign the letters burn in a vivid hot red-pink that is almost too saturated to look at directly, while scattered across the darkness are smaller points of aqua-green, orange, and pale yellow, each colour fully committed and uncompromising, the palette of something designed to be seen through noise and dark.

Surfaces
Background--wcp-color-bg	`#272822`
Surface--wcp-color-surface	`#3e3d32`
Surface raised--wcp-color-surface-raised	`#49483e`
surface sunken--wcp-color-surface-sunken	`#272822`
overlay--wcp-color-overlay	`rgba(39,40,34,0.75)`
Borders
Border--wcp-color-border	`#8e8972`
border strong--wcp-color-border-strong	`rgba(248,248,242,0.25)`
Text
Text--wcp-color-text	`#f9f9f5`
Text muted--wcp-color-text-muted	`#aba897`
text disabled--wcp-color-text-disabled	`rgba(117,113,94,0.5)`
text inverse--wcp-color-text-inverse	`#272822`
link--wcp-color-link	`#6adaef`
Brand
Primary--wcp-color-primary	`#f9347b`
primary dim--wcp-color-primary-dim	`rgba(249,38,114,0.15)`
primary on--wcp-color-primary-on	`#1e1e1e`
Status
Success--wcp-color-success	`#a6e22e`
success on--wcp-color-success-on	`#ffffff`
success surface--wcp-color-success-surface	`rgba(166,226,46,0.12)`
Warning--wcp-color-warning	`#e6db74`
warning surface--wcp-color-warning-surface	`rgba(230,219,116,0.12)`
Danger--wcp-color-danger	`#f92672`
danger surface--wcp-color-danger-surface	`rgba(249,38,114,0.12)`
Info--wcp-color-info	`#66d9ef`
info surface--wcp-color-info-surface	`rgba(102,217,239,0.12)`
Typography
font family--wcp-font-family	`-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif`
font mono--wcp-font-mono	`ui-monospace,'SF Mono','Fira Code',monospace`
font size xs--wcp-font-size-xs	`0.70rem`
font size sm--wcp-font-size-sm	`0.80rem`
font size md--wcp-font-size-md	`0.875rem`
font size lg--wcp-font-size-lg	`1rem`
font size xl--wcp-font-size-xl	`1.125rem`
font size 2xl--wcp-font-size-2xl	`1.375rem`
font size 3xl--wcp-font-size-3xl	`1.75rem`
font weight normal--wcp-font-weight-normal	`400`
font weight medium--wcp-font-weight-medium	`500`
font weight semibold--wcp-font-weight-semibold	`600`
font weight bold--wcp-font-weight-bold	`700`
line height tight--wcp-line-height-tight	`1.2`
line height normal--wcp-line-height-normal	`1.5`
line height relaxed--wcp-line-height-relaxed	`1.75`
Spacing
space 1--wcp-space-1	`4px`
space 2--wcp-space-2	`8px`
space 3--wcp-space-3	`12px`
space 4--wcp-space-4	`16px`
space 5--wcp-space-5	`24px`
space 6--wcp-space-6	`32px`
space 7--wcp-space-7	`48px`
space 8--wcp-space-8	`64px`
Shape
radius sm--wcp-radius-sm	`4px`
Radius--wcp-radius-md	`6px`
radius lg--wcp-radius-lg	`12px`
radius xl--wcp-radius-xl	`16px`
radius round--wcp-radius-round	`9999px`
Shadow
Shadow--wcp-shadow-sm	`0 4px 16px rgba(0,0,0,.5)`
shadow md--wcp-shadow-md	`0 4px 12px rgba(0,0,0,.2)`
shadow lg--wcp-shadow-lg	`0 8px 24px rgba(0,0,0,.25)`
shadow xl--wcp-shadow-xl	`0 16px 40px rgba(0,0,0,.3)`
Motion
duration fast--wcp-duration-fast	`100ms`
duration normal--wcp-duration-normal	`200ms`
duration slow--wcp-duration-slow	`350ms`
easing standard--wcp-easing-standard	`ease`
easing out--wcp-easing-out	`ease-out`
easing in--wcp-easing-in	`ease-in`
easing spring--wcp-easing-spring	`cubic-bezier(0.34,1.56,0.64,1)`
Z-index
z base--wcp-z-base	`0`
z raised--wcp-z-raised	`10`
z dropdown--wcp-z-dropdown	`1000`
z sticky--wcp-z-sticky	`1100`
z modal--wcp-z-modal	`1200`
z toast--wcp-z-toast	`1300`
z tooltip--wcp-z-tooltip	`1400`
Focus & Touch
focus ring width--wcp-focus-ring-width	`2px`
focus ring offset--wcp-focus-ring-offset	`2px`
focus ring color--wcp-focus-ring-color	`#f92672`
touch target min--wcp-touch-target-min	`44px`
Widget
widget bg--wcp-widget-bg	`#3e3d32`
widget border--wcp-widget-border	`#75715e`
widget radius--wcp-widget-radius	`6px`
widget padding--wcp-widget-padding	`16px`
widget gap--wcp-widget-gap	`12px`
widget shadow--wcp-widget-shadow	`0 4px 16px rgba(0,0,0,.5)`