CSS Visual Vocabulary

—the words we use to describe the emotional
and stylistic qualities of an interface

Visual vocabulary is the set of terms we use to describe how a layout feels
— its mood, character, and expressive qualities.
These words help us communicate intentions to AI without relying on code or technical detail.

Visual vocabulary is about tone, contrast, softness, weight, and expression.

• Tone — the emotional layer of the interface Tone describes the overall mood
  — calm, loud, warm, clinical, expressive, restrained.
  It shapes how the reader experiences the layout before they understand it.
• Contrast — the strength of difference between elements
  Contrast guides attention.
  High contrast feels bold and urgent;
  low contrast feels quiet and gentle.
• Weight — the visual heaviness of text or elements
  Weight expresses importance.
  Bold elements speak first;
  lighter elements stay in the background.
• Softness — the gentleness of edges, spacing, and shapes
  Softness creates comfort.
  Rounded corners, generous spacing, and low contrast
  all contribute to a soft visual tone.
• Loudness — the intensity of color, contrast, or scale
  Loud elements demand attention.
  They are used sparingly
  to highlight what truly matters.
• Restraint — the discipline of using only what is necessary
  Restraint creates clarity.
  It removes noise, reduces decoration,
  and lets structure speak for itself.
• Expressiveness — the degree of personality in the design
  Expressiveness adds character
  — through color, typography, or playful spacing —
  without overwhelming the structure.

Visual vocabulary helps us describe how a layout should feel,
not just how it should look.

When working with AI, these terms guide:

• emotional tone
• hierarchy and emphasis
• spacing and rhythm
• contrast and balance

They turn subjective impressions into clear,
actionable instructions.

• Tone — the emotional layer that supports hierarchy
• Hierarchy — how spacing signals importance
• Density — how tightness or openness shapes tone
• Spacing — the building blocks of density
• Rhythm — the repeated pattern that density shapes

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←