Thin marks, quiet chrome

Bars ≤ 24px, 2px round lines, 10% area washes, 1px hairline grids.

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

Columns: width, end, grid

Drag thickness past 24px, or press Make it loud.

End
Grid
Monthly revenueIn spec

    const w = Math.min(24, band - 2);
const r = Math.min(4, w / 2, base - top);

    Lines: stroke, marker, area

    Push the stroke to 5px and area to 60%.

    Weekly sessionsIn spec

      .line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area { fill-opacity: .1; }

      Same dashboard, loud vs quiet

      Turn on Squint; only the data should survive.

      LoudBad

      Revenue

      Sessions

      bars fill the band2px dashed grid4px line, 60% area
      QuietGood

      Revenue

      Sessions

      24px bars, 4px end1px solid hairline2px line, 10% area

      --grid: #e1e0d9; --baseline: #c3c2b7; --axis-text: #898781;

      Why it matters, pros and cons

      Why it matters

      The eye weighs ink. When only the data is heavy, nobody sorts signal from scaffolding.

      Pros

      • One spec makes a dashboard one system.
      • Air between bars compares heights.
      • Hairline grids support lookup quietly.

      Cons

      • Few bars on a wide canvas look lost.
      • Narrow screens force bars under 24px.
      • Projectors may need a darker grid.