Stroke vs Fill Consistency & Terminal Radii

Mixing outlined icons (2px stroke) with solid filled icons on the same screen creates visual dissonance and destroys polish.

A design system standardizes on clear stylistic rules:

1. Uniform Stroke Weight: Standardize on a single stroke thickness (typically 2px on a 24px grid, or 1.5px on a 20px grid). Never mix 1px and 2.5px strokes in the same set.
2. Consistent Corner & Cap Terminals:
   • stroke-linecap: Rounded (round) vs Crisp (square).
   • stroke-linejoin: Smooth (round) vs Angular (miter).
3. Semantic Fill Usage: Reserve filled versions for Active / Selected states (e.g., outline bookmark icon becomes solid blue when saved; outline heart becomes solid red when liked).