Cüte Logo

Color

Our color system is built on CSS variables defined in globals.css. Each color family includes brand colors and multiple shades for maximum flexibility.

Brand colors

Name

Brand Yellow

CSS Variable

--color-brand-yellow

Value

color(display-p3 0.9431 0.7212 0.2632)

Primary brand yellow

Name

Brand Green

CSS Variable

--color-brand-green

Value

color(display-p3 0.2596 0.5447 0.2467)

Primary brand green

Name

Brand Cyan

CSS Variable

--color-brand-cyan

Value

color(display-p3 0.6312 0.8740 0.8997)

Primary brand cyan

Name

Brand Red

CSS Variable

--color-brand-red

Value

color(display-p3 0.9120 0.2512 0.3744)

Primary brand red

Name

Brand Purple

CSS Variable

--color-brand-purple

Value

color(display-p3 0.2502 0.0636 0.8698)

Primary brand purple

Name

Brand Pink

CSS Variable

--color-brand-pink

Value

color(display-p3 0.8928 0.5504 0.7110)

Primary brand pink

Name

Brand Black

CSS Variable

--color-brand-black

Value

color(display-p3 0.0748 0.2080 0.0381)

Primary brand black

Grayscale

Name

Gray 50

CSS Variable

--color-gray-50

Value

color(display-p3 0.9509 0.9602 0.9676)

Name

Gray 100

CSS Variable

--color-gray-100

Value

color(display-p3 0.9274 0.9362 0.9432)

Name

Gray 200

CSS Variable

--color-gray-200

Value

color(display-p3 0.9015 0.9103 0.9172)

Name

Gray 300

CSS Variable

--color-gray-300

Value

color(display-p3 0.8500 0.8587 0.8656)

Name

Gray 400

CSS Variable

--color-gray-400

Value

color(display-p3 0.7240 0.7324 0.7391)

Name

Gray 500

CSS Variable

--color-gray-500

Value

color(display-p3 0.5191 0.5270 0.5333)

Name

Gray 600

CSS Variable

--color-gray-600

Value

color(display-p3 0.3825 0.3901 0.3960)

Name

Gray 700

CSS Variable

--color-gray-700

Value

color(display-p3 0.2749 0.2820 0.2876)

Name

Gray 800

CSS Variable

--color-gray-800

Value

color(display-p3 0.1935 0.2002 0.2056)

Name

Gray 900

CSS Variable

--color-gray-900

Value

color(display-p3 0.0901 0.0962 0.1009)

Name

Gray 950

CSS Variable

--color-gray-950

Value

color(display-p3 0.0000 0.0000 0.0000)

Yellow

Name

Yellow 50

CSS Variable

--color-yellow-50

Value

color(display-p3 0.9979 0.9886 0.9280)

Name

Yellow 100

CSS Variable

--color-yellow-100

Value

color(display-p3 0.9952 0.9735 0.7973)

Name

Yellow 200

CSS Variable

--color-yellow-200

Value

color(display-p3 0.9899 0.9432 0.5845)

Name

Yellow 300

CSS Variable

--color-yellow-300

Value

color(display-p3 0.9811 0.8904 0.3999)

Name

Yellow 400

CSS Variable

--color-yellow-400

Value

color(display-p3 0.9706 0.8227 0.3040)

Name

Yellow 500

CSS Variable

--color-yellow-500

Value

color(display-p3 0.9431 0.7212 0.2632)

Reference to brand yellow

Name

Yellow 600

CSS Variable

--color-yellow-600

Value

color(display-p3 0.8227 0.5417 0.1898)

Name

Yellow 700

CSS Variable

--color-yellow-700

Value

color(display-p3 0.6757 0.3873 0.1413)

Name

Yellow 800

CSS Variable

--color-yellow-800

Value

color(display-p3 0.5456 0.2988 0.1170)

Name

Yellow 900

CSS Variable

--color-yellow-900

Value

color(display-p3 0.4503 0.2485 0.0999)

Name

Yellow 950

CSS Variable

--color-yellow-950

Value

color(display-p3 0.2583 0.1301 0.0303)

Green

Name

Green 50

CSS Variable

--color-green-50

Value

color(display-p3 0.9456 0.9979 0.9348)

Name

Green 100

CSS Variable

--color-green-100

Value

color(display-p3 0.8707 0.9952 0.8522)

Name

Green 200

CSS Variable

--color-green-200

Value

color(display-p3 0.7549 0.9916 0.7153)

Name

Green 300

CSS Variable

--color-green-300

Value

color(display-p3 0.5955 0.9877 0.5153)

Name

Green 400

CSS Variable

--color-green-400

Value

color(display-p3 0.4774 0.9702 0.3393)

Name

Green 500

CSS Variable

--color-green-500

Value

color(display-p3 0.4095 0.8847 0.2661)

Name

Green 600

CSS Variable

--color-green-600

Value

color(display-p3 0.3376 0.7378 0.2143)

Name

Green 700

CSS Variable

--color-green-700

Value

color(display-p3 0.2596 0.5447 0.2467)

Reference to brand green

Name

Green 800

CSS Variable

--color-green-800

Value

color(display-p3 0.1999 0.4517 0.1276)

Name

Green 900

CSS Variable

--color-green-900

Value

color(display-p3 0.1614 0.3667 0.1067)

Name

Green 950

CSS Variable

--color-green-950

Value

color(display-p3 0.0748 0.2080 0.0381)

Reference to brand black

Cyan

Name

Cyan 50

CSS Variable

--color-cyan-50

Value

color(display-p3 0.9466 0.9866 0.9874)

Name

Cyan 100

CSS Variable

--color-cyan-100

Value

color(display-p3 0.8633 0.9609 0.9663)

Name

Cyan 200

CSS Variable

--color-cyan-200

Value

color(display-p3 0.7452 0.9191 0.9330)

Name

Cyan 300

CSS Variable

--color-cyan-300

Value

color(display-p3 0.6312 0.8740 0.8997)

Reference to brand cyan

Name

Cyan 400

CSS Variable

--color-cyan-400

Value

color(display-p3 0.4103 0.7582 0.8066)

Name

Cyan 500

CSS Variable

--color-cyan-500

Value

color(display-p3 0.3205 0.6455 0.7007)

Name

Cyan 600

CSS Variable

--color-cyan-600

Value

color(display-p3 0.2630 0.5256 0.5910)

Name

Cyan 700

CSS Variable

--color-cyan-700

Value

color(display-p3 0.2215 0.4252 0.4826)

Name

Cyan 800

CSS Variable

--color-cyan-800

Value

color(display-p3 0.1963 0.3482 0.3976)

Name

Cyan 900

CSS Variable

--color-cyan-900

Value

color(display-p3 0.1731 0.2942 0.3395)

Name

Cyan 950

CSS Variable

--color-cyan-950

Value

color(display-p3 0.1003 0.1893 0.2270)

Red

Name

Red 50

CSS Variable

--color-red-50

Value

color(display-p3 0.9899 0.9432 0.9494)

Name

Red 100

CSS Variable

--color-red-100

Value

color(display-p3 0.9817 0.8941 0.9065)

Name

Red 200

CSS Variable

--color-red-200

Value

color(display-p3 0.9679 0.8040 0.8357)

Name

Red 300

CSS Variable

--color-red-300

Value

color(display-p3 0.9476 0.6446 0.7071)

Name

Red 400

CSS Variable

--color-red-400

Value

color(display-p3 0.9300 0.4523 0.5529)

Name

Red 500

CSS Variable

--color-red-500

Value

color(display-p3 0.9120 0.2512 0.3744)

Reference to brand red

Name

Red 600

CSS Variable

--color-red-600

Value

color(display-p3 0.8458 0.2024 0.3379)

Name

Red 700

CSS Variable

--color-red-700

Value

color(display-p3 0.7154 0.1584 0.2878)

Name

Red 800

CSS Variable

--color-red-800

Value

color(display-p3 0.5963 0.1328 0.2633)

Name

Red 900

CSS Variable

--color-red-900

Value

color(display-p3 0.5098 0.1170 0.2482)

Name

Red 950

CSS Variable

--color-red-950

Value

color(display-p3 0.2850 0.0382 0.1154)

Purple

Name

Purple 50

CSS Variable

--color-purple-50

Value

color(display-p3 0.9751 0.9689 0.9831)

Name

Purple 100

CSS Variable

--color-purple-100

Value

color(display-p3 0.9476 0.9414 0.9663)

Name

Purple 200

CSS Variable

--color-purple-200

Value

color(display-p3 0.9031 0.8907 0.9406)

Name

Purple 300

CSS Variable

--color-purple-300

Value

color(display-p3 0.8357 0.8015 0.8941)

Name

Purple 400

CSS Variable

--color-purple-400

Value

color(display-p3 0.7417 0.6886 0.8280)

Name

Purple 500

CSS Variable

--color-purple-500

Value

color(display-p3 0.2502 0.0636 0.8698)

Reference to brand purple

Name

Purple 600

CSS Variable

--color-purple-600

Value

color(display-p3 0.5674 0.4601 0.6860)

Name

Purple 700

CSS Variable

--color-purple-700

Value

color(display-p3 0.5006 0.3899 0.6085)

Name

Purple 800

CSS Variable

--color-purple-800

Value

color(display-p3 0.4178 0.3261 0.5089)

Name

Purple 900

CSS Variable

--color-purple-900

Value

color(display-p3 0.3429 0.2702 0.4208)

Name

Purple 950

CSS Variable

--color-purple-950

Value

color(display-p3 0.2222 0.1749 0.2789)

Pink

Name

Pink 50

CSS Variable

--color-pink-50

Value

color(display-p3 0.9847 0.9505 0.9676)

Name

Pink 100

CSS Variable

--color-pink-100

Value

color(display-p3 0.9716 0.9124 0.9469)

Name

Pink 200

CSS Variable

--color-pink-200

Value

color(display-p3 0.9539 0.8219 0.8939)

Name

Pink 300

CSS Variable

--color-pink-300

Value

color(display-p3 0.9243 0.6796 0.8019)

Name

Pink 400

CSS Variable

--color-pink-400

Value

color(display-p3 0.8928 0.5504 0.7110)

Reference to brand pink

Name

Pink 500

CSS Variable

--color-pink-500

Value

color(display-p3 0.8381 0.3463 0.5520)

Name

Pink 600

CSS Variable

--color-pink-600

Value

color(display-p3 0.7720 0.2392 0.4198)

Name

Pink 700

CSS Variable

--color-pink-700

Value

color(display-p3 0.6661 0.1828 0.3246)

Name

Pink 800

CSS Variable

--color-pink-800

Value

color(display-p3 0.5506 0.1567 0.2727)

Name

Pink 900

CSS Variable

--color-pink-900

Value

color(display-p3 0.4607 0.1417 0.2365)

Name

Pink 950

CSS Variable

--color-pink-950

Value

color(display-p3 0.2787 0.0626 0.1230)