'%20stroke='%23E0E0E0'%20stroke-width='2'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_2682_149131'%20x1='7'%20y1='4'%20x2='23.0784'%20y2='26.6541'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%233A3AEA'/%3e%3cstop%20offset='0.592633'%20stop-color='%23DF13F9'/%3e%3cstop%20offset='0.763157'%20stop-color='%23F0558E'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
A stable layer in both modes
Cards, sheets, and banners keep their hierarchy.
Skeleton · use
Which Skeleton color do I use?
Three questions in the sidebar resolve to one native utility, its light–dark pair, and the palette variables behind it.
Your classSurface
bg-surface-200-800Copy recommendation
bg-surface-200-800light Surface pair
dark Surface pair
A stable layer in both modes
Cards, sheets, and banners keep their hierarchy.
Light / dark pair
50
100
200
300
400
500
600
700
800
900
950
Light · 200 oklch(81.41% 0 none)Dark · 800 oklch(32.11% 0 none)