Table of Contents
05. How to Describe Visual Intentions Clearly
How we express tone, density, rhythm,
and hierarchy in a way AI can follow
—Part of CSS Primer for the AI Era — CSS Communication Toolkit
This chapter teaches us how to express visual intention without falling into vague adjectives or over‑specifying techniques.
It gives us the language to describe tone, density, hierarchy, and restraint
— the things AI misreads most often.
Visual style is where AI often over‑interprets us.
Not because it lacks ability —
but because visual intention is rarely explicit.
While we see:
- quietness
- emphasis
- hierarchy
- density
- rhythm
- balance
AI sees:
- colors
- shadows
- borders
- font sizes
- spacing values
So, the fifth communication skill
is simple:
We describe the visual intention,
not the aesthetic technique.
When we express what the design should feel like
and how it should behave,
AI can choose the right CSS
without guessing or over‑decorating.
1. Why Visual Intentions Need Clear Language
When we say:
“Make this look better”
“Make this stand out”
“Make this cleaner”
“Make this more modern”
AI must decide:
- what “better” means
- what “stand out” means
- what “cleaner” means
- what “modern” means
These words describe taste,
not intention.
A simple truth:
Visual clarity comes from naming the purpose,
not the style.
So we name the purpose.
2. The Five Kinds of Visual Intentions We Need to Express
Every 'visual request' falls into one
of five categories:
- Tone
How loud or quiet the element should feel. - Density
How much visual weight the element should carry. - Hierarchy
How the element relates to others in importance. - Rhythm
How spacing creates breath and flow. - Restraint
How much decoration is appropriate.
When we name which of these we mean,
AI stops guessing.
3. How We Describe Tone
Tone is the emotional volume of the design.
We say:
“We want this section to feel quiet.”
“We want this button to feel confident but not loud.”
“We want this card to feel neutral and supportive.”
“We want this heading to feel calm, not aggressive.”
We avoid:
“Make this subtle”
“Make this bold”
Tone is not a property
— it is a relationship.
4. How We Describe Density
Density is how much visual weight something carries.
We say:
“We want this area to feel lighter.”
“We want this component to feel more substantial.”
“We want this section to feel open, not crowded.”
“We want this card to feel compact but not cramped.”
We avoid:
“Reduce padding”
“Increase font size”
Those are techniques.
Density is intention.
5. How We Describe Hierarchy
Hierarchy is how we guide attention.
We say:
“We want this heading to be the primary anchor.”
“We want this label to be secondary.”
“We want this button to be visually subordinate to the title.”
“We want this section to support the main content, not compete with it.”
We avoid:
“Make this bigger”
“Make this smaller”
Hierarchy is not size —
it is purpose.
6. How We Describe Rhythm
Rhythm is the spacing pattern that creates breath.
We say:
“We want consistent vertical rhythm.”
“We want more breathing room above this section.”
“We want tighter spacing within this group.”
“We want the spacing to follow the existing scale.”
We avoid:
“Fix the spacing”
“Make this cleaner”
Rhythm is the architecture
of visual calm.
7. How We Describe Restraint
Restraint is how we avoid noise.
We say:
“We want minimal decoration.”
“We want soft shadows, if any.”
“We want borders only where they clarify structure.”
“We want this to feel understated.”
We avoid:
“Make this pretty”
“Make this modern”
Restraint is a design choice,
not an aesthetic flourish.
8. How We Combine Visual Intentions Into a Clear Request
A complete visual request looks like this:
“We want this section to feel quiet and supportive. Use the existing color scale. Keep shadows minimal. Do not introduce new decorative elements.”
Or:
“We want this card to feel compact but not cramped. Use the spacing scale. Keep the hierarchy subtle. Do not change the typography.”
Or:
“We want this heading to be the primary anchor. Keep the tone calm. Avoid heavy borders or strong colors. Maintain the existing rhythm.”
This is how we describe visual intention without ambiguity.
9. Closing Note — Visual Style Is a Language of Tone and Purpose
When we describe visual intentions clearly:
- AI understands the tone
- the design stays coherent
- the system stays stable
- the change stays small
- and the collaboration stays calm
A simple closing thought:
Visual style is not decoration.
It is the expression of purpose.
We name the purpose,
and AI shapes the surface.
- Suggested Next Reading: How to Express Constraints and Limits
Tony de Araujo —New York | Lisbon