Short answer
Visual design uses composition, type, color, and hierarchy to make information clear and usable. It turns content and interaction requirements into a coherent presentation without defining the underlying task flow.
About Visual design
Uses composition, type, color, and hierarchy to make information clear and usable. The competency covers visual relationships, emphasis, consistency, and adaptation across relevant formats and states.
Use this competency for
- Roles accountable for visual hierarchy, composition, typography, color, or interface presentation.
- Roles expected to translate content and behavior requirements into coherent visual designs.
Do not use this competency for
- Roles that only assemble interfaces from fixed specifications without making visual decisions.
Important distinctions
Interaction design
Visual design determines presentation and emphasis. Interaction design determines task sequence, controls, state changes, and system response.
Design systems
Visual design applies and extends visual language in specific work. Design systems maintains reusable standards and components across teams.
Expectations by level
IC1
Individual contributor 1
Produces clear visual work for a defined surface with guidance, applies established type, spacing, color, and component rules, and corrects inconsistencies found in review.
Observable behaviors
- Uses hierarchy to distinguish primary, supporting, and secondary information.
- Applies approved typography, spacing, and color tokens to assigned designs.
- Checks alignment, contrast, density, and responsive layouts before handoff.
Examples
- Reworks a settings page so the main action and section relationships are clear at a glance.
- Before handoff, fixes inconsistent spacing and a mobile layout that obscures supporting text.
IC2
Individual contributor 2
Independently creates a coherent visual direction for a product area, handles varied content and states, explains tradeoffs, and verifies that implementation preserves hierarchy and legibility.
Observable behaviors
- Explores visual directions and compares them against content priority and use context.
- Adapts hierarchy across dense, empty, error, and responsive states.
- Reviews implemented screens and identifies changes that alter emphasis or readability.
Examples
- Creates a dashboard direction that keeps priorities visible across sparse and dense data states.
- In implementation review, identifies a type scale change that makes supporting content compete with the page title.
IC3
Individual contributor 3
Sets visual direction across connected product areas, resolves presentation problems with competing information needs, and creates guidance that helps multiple teams make coherent visual decisions.
Observable behaviors
- Defines visual principles for a product area and shows how they apply to contrasting use cases.
- Resolves hierarchy conflicts across surfaces owned by different teams.
- Reviews visual work and gives specific changes tied to clarity, emphasis, and consistency.
Examples
- Aligns several product areas on how status, risk, and primary actions are visually prioritized.
- Creates examples that show how the visual language adapts from focused workflows to dense reporting screens.