nrsimonelli / untitled-theme

messing around

Untitled Theme

Colors

radix-ui colors

on grayscales

• gray -> true gray
• mauve -> purple hue
• slate -> blue hue
• sage -> green hue
• olive -> lime hue
• sand -> yellow hue

semantic alias based on functionality

loContrast & hiContrast

steps 11 and 12 of your grayscale, used for text

info

• blue
• sky
• cyan

success

• teal
• green
• grass
• mint

attention

• yellow
• amber

danger

• red
• tomato
• crimson

severe

• orange
• brown

done

• purple
• violet
• plumb

accent

your brand color

base

typically grayscale

the steps

• 1 -> app bg
• 2 -> app bg
• 3 -> component bg, default
• 4 -> component bg, hover
• 5 -> component bg, selected
• 6 -> border, default
• 7 -> border, interactive
• 8 -> border, hovered
• 9 -> color background
• 10 -> color background, hover
• 11 -> low contrast text
• 12 -> high contrast text