CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


vocabulary:css_visual_vocabulary

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.


  • 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


vocabulary/css_visual_vocabulary.txt · Last modified: by editor