CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary:scale_contrast

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

Scale contrast is the foundation of:

  • Hierarchy — size signals importance
  • Tone — bold vs. quiet layouts
  • Rhythm — size steps create pacing
  • Readability — clear separation of roles

Without scale contrast,
everything feels flat
and undifferentiated
.


Tony de Araujo —New York | Lisbon


vocabulary/css_visual_vocabulary/scale_contrast.txt · Last modified: by editor