Table of Contents
Stroke Weight
the heaviness or lightness of lines
— borders, dividers, outlines, and rules that shape structure and emphasis
Stroke weight is the perceived mass of lines in an interface.
A stroke can be as small as a 1‑pixel border or as large as a thick divider
— but every stroke carries 'emotional weight'.
- Thicker strokes feel strong, assertive, structural.
- Thinner strokes feel light, quiet, supportive.
Stroke weight is the interface’s skeleton
— the lines that hold everything together.
What heavy strokes express
Heavy strokes feel:
- structural — strong boundaries
- assertive — high presence
- technical — engineered, deliberate
- primary — demand attention
- anchored — visually grounded
Heavy strokes are used for
primary dividers, strong outlines,
and components that must feel solid.
What light strokes express
Light strokes feel:
- quiet — minimal presence
- supportive — guide without dominating
- airy — open, breathable
- calm — low visual pressure
- refined — subtle, elegant
Light strokes are used for
secondary dividers, subtle grouping,
and gentle structure.
How stroke weight is created
Stroke weight emerges from several cues:
- Thickness — thicker = heavier; thinner = lighter
- Contrast — high‑contrast strokes feel heavier
- Color value — darker strokes feel heavier
- Opacity — lower opacity feels lighter
- Continuity — solid lines feel heavier than dotted or dashed
- Spacing — tight spacing amplifies stroke weight
Stroke weight is the most economical form of
visual mass — a single pixel can change the tone.
Forms of stroke weight
- Border weight — outlines around components
- Divider weight — lines separating content
- Rule weight — horizontal/vertical rules
- Icon stroke weight — line‑based iconography
Each form shapes
hierarchy and tone
through minimal means.
What stroke weight avoids
To maintain clarity, stroke weight avoids:
- heavy borders on secondary elements
- inconsistent stroke weight across similar components
- high‑contrast strokes paired with soft surfaces
- overly thin strokes that disappear
- dense strokes without breathing room
Stroke weight must be intentional
— not accidental.
How we describe stroke weight when working with AI
Examples of what to say:
“Increase stroke weight for stronger structure.”
“Lighten the border to reduce visual pressure.”
“Use a heavier stroke for primary components.”
“Reduce stroke contrast to keep the tone calm.”
“Maintain consistent stroke weight across the system.”
These phrases guide structure without micromanaging CSS.
Why stroke weight matters
Stroke weight shapes:
- Hierarchy — heavy strokes define primary structure
- Tone — heavy = assertive; light = calm
- Contrast — strokes amplify difference
- Softness — soft edges reduce perceived stroke mass
- Expression — personality through line quality
- Comfort — balanced strokes reduce visual fatigue
Stroke weight is the architecture of lines.
Tony de Araujo —New York | Lisbon