Amanoba Logo
Back to Course

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)

  1. Write your VIS with 5 axes in one sentence.
  2. Bind to tokens: primary color pair, type weights, spacing scale, animation timing.
  3. 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