DesignDojo
Design Language

Learn the language behind the layout.

This section teaches the words that let vibe coders stop asking for "something cleaner" and start naming the actual design move: hierarchy, eye path, grouping, affordance, rhythm, and spacing with intent.

Use it as a visual explainer, a prompting reference, and a fast way to jump from principles into components and lessons.

Browse vocabularyReview componentsRevisit first principles

Why design language matters

When you can name the problem, you can ask for a better fix. Design language turns vague taste reactions into usable critique and better AI instructions.

Name the effect

Say what feels broken in design terms: eye path, hierarchy, grouping, affordance, or spacing rhythm.

Name the lever

Ask for the change that should create the effect: stronger contrast, fewer competing accents, larger section gaps, clearer control shape.

Name the constraint

Tell the AI what must stay true: readable line length, mobile-safe stacking, one primary action, accessible contrast, or consistent card anatomy.

Fast-entry vocabulary

Start with the most reusable terms, then open the full dictionary for detail and examples.

See all terms
Attention

scan path

Eye Path

Guide the reading order on purpose instead of making every block compete equally.

Open term
Grouping

grouping

Proximity

Things placed close together read as related; distance signals a boundary.

Open term
Emphasis

visual contrast

Contrast

Difference creates emphasis. Similar things blend together and lose priority.

Open term
Structure

visual alignment

Alignment

Shared edges make layouts feel deliberate and connected.

Open term
Rhythm

consistency

Repetition

Repeat the important patterns so users can learn the system instead of relearning each section.

Open term
Space

negative space

Whitespace

Whitespace is not wasted room; it is the space that lets content breathe and separate.

Open term

When to research more

  • Several user roles or business goals compete on one screen.
  • Accessibility, localization, or dense data changes the layout tradeoffs.
  • A pattern feels novel enough that users may not recognize the interaction.
  • The page works on mobile but falls apart at desktop scale or vice versa.

Jump into the rest of the site

Component Catalog

See the concrete building blocks and when they should be used.

Open components

First Principles Lessons

Study the foundational lessons behind the vocabulary before you prompt or critique.

Review first principles

Practice Labs

Apply the language in timed reconstruction and critique drills.

Run a lab
About This Project

DesignDojo is one project in a bigger maker identity.

The Little AI Company is the creator label for Jeff Kazee's AI-native tools, products, and experiments. DesignDojo ships under that label, while Jeffkazzee.dev remains the personal home base for links, writing, and the broader project map.