One accent on near-black

One lavender accent on near-black, edges drawn with hairlines.

Colors from an unofficial DESIGN.md; Linear publishes no official one.

Pick a filter, then a row

Tap a filter or a row. Hover to see the accent lighten.

Many hues, shadowsBad
status hues + box-shadow edges
One accent, hairlinesGood
#5e6ad2 · hover #828fff · 1px #23252a
.canvas {
  --canvas: #010102;
  --ink: #f7f8f8;
  --hairline: #23252a;
  --accent: #5e6ad2;
  --accent-hover: #828fff;
  background: var(--canvas);
  color: var(--ink);
}
.row { border-bottom: 1px solid var(--hairline); } /* no shadow */
.primary { background: var(--accent); }
.primary:hover { background: var(--accent-hover); }

Why it matters, pros and cons

Why it matters

  • One chromatic color means the eye lands on what is active.
  • Shadows disappear on near-black; a 1px hairline still draws the edge.
  • Status hues compete with the accent and turn the list into noise.

Pros

  • Selection, focus and the main action share one signal.
  • Edges stay crisp at any density.
  • Color tokens shrink to a handful.

Cons

  • Status often needs more than color; add icons or text.
  • Contrast on near-black needs checking for muted text.
  • Colors come from an unofficial extract.