Define Your Visual Intent
Day 5 of 30 · The Playbook 2026 – Masterclass for Designers
Create a one-line, measurable Visual Intent Statement that guides every decision.
Learning Goal
- Write a concise Visual Intent Statement (tone, density, boldness, motion).
- Set 3–5 axes (warm ↔ technical, playful ↔ formal, dense ↔ airy, static ↔ lively, bold ↔ restrained).
- Create good/bad visual examples for the intent.
- Bind the intent to tokens (colors, type weights, spacing, motion timings).
- Place it at the front of the Playbook.
- Ensure every decision checks against the intent.
Why This Matters
- Gives unified direction, reduces debate.
- Makes every component communicate the same experience.
- Helps decide when to reject a trend.
Explanation
Visual Intent Statement (VIS)
- 1 sentence: “Our visual language is [mood] while supporting [business goal]; on [density], [boldness], [motion] axes we sit here.”
- Make it measurable (e.g., “CTA contrast min 7:1”, “animation 150–250ms ease-in-out”).
Axes
- Warm ↔ Technical
- Friendly ↔ Formal
- Dense ↔ Airy
- Static ↔ Lively
- Bold ↔ Restrained
Examples
Good: “Visual Intent: Friendly-tech, airy, restrained motion. CTA #FAB908, type Inter/600, spacing 8-12-16, animation 180ms ease.”
Bad: “Make it cool and startup-ish.” – not measurable.
Guided Exercise (10–15 minutes)
- Write your VIS with 5 axes in one sentence.
- Bind to tokens: primary color pair, type weights, spacing scale, animation timing.
- Add 2 visual examples (good/bad) with short rationale.
Independent Exercise (5–10 minutes)
Share the VIS with a developer, ask them to apply it to one component (e.g., card) and refine together.
Self-Check
- VIS exists in one sentence.
- VIS tied to tokens and components.
- Good/bad examples exist.
- VIS sits at the front of the Playbook.
Optional Deepening
- IDEO – Design Language Systems: https://www.ideo.com/blog/design-language-systems
- Atlassian Voice & Tone: https://atlassian.design/foundations/voice-and-tone