It would be helpful to have before/after screenshots.

I will give you one

Before:

light :

dark :

After:

Light :

Dark :

Not blocking but for a future PR or for @nodejs/website broader consideration: For maintenance and unstable, both the colors we use now and the colors suggested here fail to meet accessibility requirements for minimum contrast against a white background for graphical objects. (Those requirements are more lenient than they are for regular text.)

We might want to subsequently reconsider those specific colors and either swap in a different colors from the color palette or else update the palette to change those two colors to something else.

Looks good to me, but as @Trott mentioned we might want to change either the background or increase the attenuation of the foreground colours to respect a11y standards.

I will experiment with some color changes and get back to you with some suggestions

Any updates here? :)

Nop my computer is death ☠️

Looks good to me, but as @Trott mentioned we might want to change either the background or increase the attenuation of the foreground colours to respect a11y standards.

Since the current colors also don't meet a11y contrast requirements, we could consider landing this PR and putting additional a11y-related color changes in a different PR. So we have 1 PR (this one) that aligns us with branding and then a separate one that aligns us with a11y. The second one may require more work because we may need to adjust the palette more broadly than just here. (Hopefully not. Hopefully there are other colors in the palette that we can use.)

Fine by me :) LGTM!