vocabulary:css_visual_vocabulary
Table of Contents
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.
Topics
- 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.
Why Visual Vocabulary matters
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.
Related Concepts
vocabulary/css_visual_vocabulary.txt · Last modified: by editor
