vocabulary:css_visual_vocabulary:scale_contrast
Table of Contents
Scale Contrast
—the difference in size that shapes visual importance
Scale contrast is the contrast of size —
how large or small elements are relative to each other.
It is one of the clearest signals in visual design
because the eye instinctively notices size differences
before it interprets meaning.
Scale of contrast is visual gravity
— what pulls the eye first.
What scale contrast does
- Creates hierarchy — large elements speak first
- Establishes focus — scale directs attention instantly
- Shapes tone — large feels bold; small feels quiet
- Supports rhythm — predictable size steps create pacing
- Defines structure — scale separates primary from secondary content
Scale contrast is the
loudest form of structural emphasis.
The main forms of scale contrast
- Element scale — size differences between components
- Typographic scale — heading levels, body text, captions
- Icon scale — large icons for actions, small for labels
- Surface scale — large cards vs. small cards
- Whitespace scale — large vs. small empty regions
Each one expresses a different kind
of size relationship.
How we describe scale contrast when working with AI
These phrases give AI clear, predictable direction:
“Increase scale contrast between the heading and subheading.”
“Reduce scale contrast for a calmer hierarchy.”
“Make the primary action noticeably larger.”
“Keep scale steps consistent across breakpoints.”
“Use scale contrast to clarify importance.”
This turns size into intention
rather than guesswork.
Why scale contrast matters
vocabulary/css_visual_vocabulary/scale_contrast.txt · Last modified: by editor
