What to do about accent color

[ryankeairns]

Problem

Feedback form internal teams indicates that using pink as the accent color is too close to the red, danger color. As a result, accent has been rarely used either in other EUI components or Elastic products.

Additional context

• We suspect this also led to the use of a teal color (euiColorVis0 in Amsterdam) for accents in places other than visualizations such as drag-and-drop, custom buttons, custom callouts, etc.
• In the new Borealis theme, we introduced accentSecondary, in part, as a backward-compatible solution for such use cases. We later backtracked on this decision leaving it as an available-though-undocumented option.

Example of similarity with callouts

Proposed solutions

1. Find a new color for accent - visually differentiated from other semantic colors (i.e. success, danger, or warning) and deprecate accentSecondary
2. Change accent from pink to teal and deprecate accentSecondary
3. Consider having no accent color and get by with primary + semantic colors. (i.e. if you need a green, then ask if the meaning is semantic. If so, use success)
4. Keep accentSecondary as a second accent color and provide stronger guidelines on when to use it versus accent

Note

One notable drawback of (3) is that it replicates the original problem, above, only now the teal color competes withsuccess as opposed to danger.

Suggested next step

1. Document actual use cases for accent color (and where people use accentSecondary)
2. With that information, make a design attempt at both (1) and (2)
3. Share the results here and agree upon an answer/path forward. (its feasible we find that (3) should be reconsidered at this stage)

[ryankeairns]

Results in Kibana

As of June 17, 2025 there are 19 results for accentSecondary and 212 results for accent in the Kibana repo:

Results in EUI

As of June 18, 2025 there are 47 results (excluding token mappings) for accentSecondary and 428 results (including docs) in the EUI repo:

[ryankeairns]

Just as an eyeball test, that 428 result does not bode well for the viability of proposal 3 - no accent color

[ryankeairns]

Looking at the task from the other end, where do we need an accent color(s)?
Relatedly, when and how can we differentiate from semantic colors?

Some thoughts, in response...

1. Restrict certain components to only use base or semantic colors
   May recommend against direct usage; reserved for use by EUI in other components (e.g. a warning button)
   • EuiCallOut, EuiButton, EuiIcon, EuiText
2. Restrict certain components to only use accent color(s)
   • EuiProgress, EuiBeacon, Drag and drop,
3. Allow certain component to use both semantic and accent colors but follow semantic meaning
   • EuiToast, EuiBadge, EuiStat
4. Create a new feature announcement component (or variation of EuiEmptyPrompt)

[ryankeairns]

Not certain when we'll discuss this as a group but, when we do, my thinking is to go with proposal 2 + plus some surgical changes to color usage in our current components:

2. Change accent from pink to teal and deprecate accentSecondary

Reasons:

• Pink, as an accent color, has never taken off over the years. It's resemblance to red/danger is too problematic.
• While teal has a similar challenge, in being adjacent to a semantic color, green is most-commonly positive versus negative
• To the point of differentiation, we could be more precise as to when semantic and accent colors are used in components (see my previous comment). These changes are included in my proposal.
• The issue with the pink accent color typically surface when teams are seeking to announce something (e.g. a new feature) and resort to callouts. By also providing a better solution for this use case (e.g. a variant of EuiEmptyPrompt), we can more narrowly define callouts as conveying messages with semantic meaning.

[ek-so]

Thank you for the analysis @ryankeairns! If I get you right, you propose to have teal as an accent, and green as success as a preferred way forward.

• Tbh I have a huge doubt about having 2 green colors to begin with. I'm quite sure, most of the people won't be able to see the difference (not saying, designers likely won't be able to apply it properly for the same reason). And then, I question myself — why not having one green for both purposes, as it will be anyway perceived as one (yes, that's where we started...)
• I’m not a fan of removing teal entirely either — especially now that it’s being used so widely in our branding (and honestly, it’s just a beautiful color 😊 I hope I’m allowed to list that as a reason being a designer haha)

Given all that and also the considerations that you listed, I'm more inclined towards replacing our current green with teal, and try to use it for success only (your point number 3). As for pink — yes, we can deprecate it, as well as accent color per se. Blue and light blue could do the trick.

Important notes to add here:

1. We might consider broaden the logical meaning of "success" as far as possibly reasonable — e.g. as we've done with buttons, when we say "use success to save drafts".
2. We can try to be very picky of using primary (as the only real accent color left at our disposal) — and, for example, consider having grey callouts as informational to be able to catch user attention better when we use blue callout (for important messages/announcements).

[yanwalton]

I also like Proposal 2... but haven't seen anyone suggest anything in Proposal 1 direction.

Agree with your next steps: It would be helpful to see what the touchpoints and changes actually look like. We did some work on that last year, so I'm hoping we can pick up on that.

[ek-so]

Posting here too for visibility:

(Comment in Figma)