# 07E Vocabulary in Context

The character in the illustration has an extremely simple outline, while the motion guides attention toward the main action.
The positioning rules define the positions of the cards, and an offset moves the label slightly away from the icon.
On a handheld device, the screen is smaller, so the same page needs a more compact arrangement of the controls.
The animation uses a slow movement to guide attention toward the button without making the whole page feel unstable.
A bolder heading creates emphasis, while a blue badge can identify a category when color is not the only signal.
The hero section contains the main title, a short tagline, and a visual that introduces the product.
A consistent logo, title style, and footer make separate pages feel like parts of one site.
The panel has a sticky header and a popover that opens beside the selected item.
The tabs should remain visible when the viewport becomes narrow, without creating horizontal overflow.
The mock image shows a spaceship near a hallway, but the final illustration should use the real product context.
A camera capture can reveal facial details that are not appropriate for every public demonstration.
The image tool can colorize a picture, adjust its frame, or unwarp a distorted shape.
The layout builder uses flex behavior to distribute available space across the elements in a column.
A narrow window needs a different outline around the focused control so that keyboard users can locate it.
The example headings and titles should be realistic, and the image should not turn an ordinary page into a dramatic movie scene.
The screen shows the current cursor position and a marker next to the selected text.