Gaps and rings, not borders

Split touching fills with a 2px surface gap, dots with a 2px ring.

From dataviz (references/marks-and-anatomy.md, interaction.md).

Touching fills: border vs gap

Pick One-hue ramp, then drag the step to 0.

Separator Bad
    stroke: var(--ink); stroke-width: 1px
    2px surface gapGood
      gap: 2px; stroke: none
      const x = left + j * band + GAP / 2;
const w = band - GAP;
seg(x, y + GAP / 2, w, h - GAP, color[i]);

      Dots on lines: ring vs none

      Drag Points up and hover the crowded crossing.

      No ringBad
        <circle r="4.5" fill="…">
        2px surface ringGood
          stroke: var(--surface); stroke-width: 4; paint-order: stroke
          .dot { r: 4.5px; stroke: var(--surface); stroke-width: 4; paint-order: stroke; }

          Why it matters, pros and cons

          Why it matters

          A border is ink that is not data. A surface gap or ring separates marks and flips with the theme.

          Pros

          • Survives colorblindness and tiny ramp steps
          • Seams vanish into the background
          • Dark mode for free

          Cons

          • Segments under 3px vanish; show them in tooltips
          • Reads as a white line over patterned backgrounds
          • Needs a 1:1 pixel viewBox