Skip to content
Rhythmic UIComponents
Design tokens

Color system

Rhythmic colors ship as CSS variables and Tailwind utilities with an rd- prefix, so product repos can use named palette classes without colliding with Tailwind defaults.

Primary Colors

Expressive brand and product colors from the Figma primary palette, ordered to match the source design.

9 tokens
Plum
#4a1f4e
--rd-color-plumbg-rd-plum

Also available as text-rd-plum and border-rd-plum.

Lavender
#e2d2ed
--rd-color-lavenderbg-rd-lavender

Also available as text-rd-lavender and border-rd-lavender.

Blue
#154d89
--rd-color-bluebg-rd-blue

Also available as text-rd-blue and border-rd-blue.

Sky
#bbd8ff
--rd-color-skybg-rd-sky

Also available as text-rd-sky and border-rd-sky.

Green
#196903
--rd-color-greenbg-rd-green

Also available as text-rd-green and border-rd-green.

Lime
#8bc34a
--rd-color-limebg-rd-lime

Also available as text-rd-lime and border-rd-lime.

Coral
#ff8c61
--rd-color-coralbg-rd-coral

Also available as text-rd-coral and border-rd-coral.

Red
#9c0608
--rd-color-redbg-rd-red

Also available as text-rd-red and border-rd-red.

Ink
#1f0f22
--rd-color-inkbg-rd-ink

Also available as text-rd-ink and border-rd-ink.

Grayscale

Warm neutral surfaces, borders, text colors, and high-contrast ink values for application UI.

10 tokens
Neutral 0
#ffffff
--rd-color-neutral-0bg-rd-neutral-0

Also available as text-rd-neutral-0 and border-rd-neutral-0.

Neutral 50
#faf6f1
--rd-color-neutral-50bg-rd-neutral-50

Also available as text-rd-neutral-50 and border-rd-neutral-50.

Neutral 100
#eeebef
--rd-color-neutral-100bg-rd-neutral-100

Also available as text-rd-neutral-100 and border-rd-neutral-100.

Neutral 200
#ddd8de
--rd-color-neutral-200bg-rd-neutral-200

Also available as text-rd-neutral-200 and border-rd-neutral-200.

Neutral 300
#beb4c0
--rd-color-neutral-300bg-rd-neutral-300

Also available as text-rd-neutral-300 and border-rd-neutral-300.

Neutral 400
#9c919e
--rd-color-neutral-400bg-rd-neutral-400

Also available as text-rd-neutral-400 and border-rd-neutral-400.

Neutral 500
#7e7180
--rd-color-neutral-500bg-rd-neutral-500

Also available as text-rd-neutral-500 and border-rd-neutral-500.

Neutral 600
#615364
--rd-color-neutral-600bg-rd-neutral-600

Also available as text-rd-neutral-600 and border-rd-neutral-600.

Neutral 900
#3c2e3e
--rd-color-neutral-900bg-rd-neutral-900

Also available as text-rd-neutral-900 and border-rd-neutral-900.

Neutral 950
#2e1f31
--rd-color-neutral-950bg-rd-neutral-950

Also available as text-rd-neutral-950 and border-rd-neutral-950.