HIF / Documentation / Visual assets

HIF Imagery and Iconography

1. Scope

Imagery includes photographs, illustrations, diagrams, maps, charts, screenshots, textures, symbols and interface icons. This document governs why an image exists, what it communicates, how it is produced and transformed, how it adapts, and how its meaning, provenance, rights, accessibility and performance are verified.

An image is not harmless decoration merely because it has no words. It can direct attention, establish identity, imply a system state, make a factual claim, encode a stereotype or conceal information.

HIF distinguishes:

standard requirement — an externally defined obligation such as WCAG, HTML or SVG behaviour;
empirical evidence — an observation bounded by its study population, symbols, tasks and measures;
platform convention — an ecosystem-specific learned representation;
heuristic — a starting rule requiring product-context validation.

Visual consistency cannot substitute for semantic comprehension.

2. Role taxonomy

Every asset MUST have one primary role:

Role	Purpose	Typical examples
Informative	Convey content unavailable in nearby text	Product photograph, scene, specimen
Evidential	Support a claim or record an event	News photograph, inspection image, before/after
Explanatory	Explain structure, sequence or relation	Diagram, map, annotated screenshot
Functional	Initiate an action or identify a destination	Button icon, linked thumbnail
Navigational	Orient or distinguish places and objects	Landmark, avatar, section illustration
Status	Represent state, severity or progress	Warning glyph, connection state
Identity	Identify a product, organisation or content owner	Logo, app icon, portrait
Atmospheric	Establish tone without carrying task meaning	Hero illustration, editorial photograph
Decorative	Add no information, function or identity	Flourish, texture

An asset MAY have secondary roles, but the primary role determines its alternative, loading priority, update policy and evidence burden. Assets whose role cannot be stated SHOULD be removed.

3. Selecting the representation

Choose a representation by the operation the person must perform:

Need	Preferred starting form	Key risk
Recognise a real object, person or condition	Photograph	False context, crop or manipulation
Explain an abstract concept or tone	Illustration	Decorative ambiguity or stereotype
Trace relations, sequence or mechanism	Diagram	Hidden assumptions and inaccessible detail
Compare quantitative values	Chart plus underlying data	Distortion, colour dependence
Trigger a familiar compact action	Labelled icon or platform symbol	Semantic distance and ambiguity
Preserve exact textual content	Real text	Rasterised text and poor reflow
Identify a product in a launcher	Platform-specific app icon	Confusion with interface icons

Do not use a photograph when a diagram is required for explanation, an icon when a word is clearer, or a chart when a short value and sentence answer the question.

The selection record states:

content or task goal
intended audience and context
primary role
why this representation is superior to text or another form
what meaning must survive crop, theme and localisation
alternative-content strategy
provenance and rights
performance priority
validation method

4. Photography

4.1. Content and composition

Photography used as content SHOULD:

show the subject and condition needed for the task;
preserve relevant context rather than crop to a misleading fragment;
use a focal point that survives responsive crops;
maintain sufficient separation from overlaid text and controls;
avoid imitating buttons, warnings or other interface states;
provide date, location, scale or caption when interpretation depends on it;
distinguish representative, illustrative and documentary photographs.

A dramatic crop, shallow depth of field or colour grade can change perceived meaning. Treat those decisions as editorial transformations, not neutral optimisation.

4.2. People and inclusion

Representation is evaluated across the complete asset library, not one image. Review:

whose roles, expertise and agency are shown;
whether demographic traits are used as shorthand for risk, poverty, incompetence or virtue;
tokenism and repeated stereotypes;
assistive devices and disability represented accurately rather than as inspiration or tragedy;
safety, dignity, consent and foreseeable exposure;
whether a model or stock image could be mistaken for an actual customer, employee, clinician, witness or beneficiary.

Demographic “balance” alone does not prove inclusion. Research with the affected communities is required for sensitive contexts.

4.3. Evidence and manipulation

For evidential photography, maintain the original, an immutable hash, capture metadata where lawful, an edit history and a published derivative. Record material operations including removal, compositing, generative fill, perspective change, background replacement and colour changes that can affect interpretation.

Permissible tonal correction for one context may be unacceptable in another. The product's editorial policy MUST define the boundary and disclosure method. Never label an illustrative or generated image as documentary evidence.

5. Illustration

Illustration is appropriate when it:

explains something photography cannot show;
safely abstracts sensitive or hypothetical material;
establishes a coherent product voice;
supports orientation or recall;
depicts a future, internal or impossible state without claiming it is a photograph.

An illustration system defines:

purpose and prohibited uses;
subject, perspective and level of abstraction;
shape, line, texture, light and palette rules;
human representation principles;
relationship to typography, icons and motion;
light, dark, high-contrast and print adaptations;
cropping and responsive composition;
authorship, licence and source-file requirements.

Do not place essential instructions inside an illustration. Avoid gratuitous detail that competes with the task, and do not use a single decorative style to trivialise failure, grief, finance, health, safety or legal consequence.

6. Diagrams, maps and complex images

6.1. Diagram contract

A diagram declares:

question it answers;
entities and relationships represented;
visual grammar for node, edge, direction, group, state and uncertainty;
reading order;
scale and whether geometry is meaningful;
data source, version and transformation;
equivalent structured text or data;
behaviour at narrow widths and high zoom.

Labels SHOULD be direct and adjacent where possible. Legends increase memory and lookup work and are used only when direct labelling would make the diagram less usable.

6.2. Integrity

Do not imply magnitude through area, length, perspective or colour unless that variable is actually mapped and explained. Preserve zero baselines where the analytical question requires them, show missing data as missing, and distinguish measured, estimated and forecast values.

A diagram MAY simplify. It MUST disclose simplification that could change a decision.

6.3. Maps and screenshots

Maps require a defined projection, extent, scale behaviour, place-name source and handling of disputed boundaries appropriate to the product context. Direction, route, hazard and accessibility information MUST NOT rely on colour alone.

Screenshots are time-bound evidence. Record product version, platform, locale, state and capture date. Redact personal or secret data irreversibly in the published derivative while preserving an authorised original only when policy requires it. A blurred secret can sometimes be reconstructed; use proper redaction.

7. Interface icons

7.1. Semantics before drawing

Each icon has a semantic record:

concept
object, action, state or category
accessible name
visible label policy
platform source or custom source
contexts in which it is valid
contexts in which it is prohibited
directionality and localisation
states and animation
comprehension evidence

One icon MUST NOT mean different consequential actions in adjacent contexts. The same action SHOULD use the same semantic icon within a product unless a platform convention requires otherwise.

7.2. Familiarity and semantic distance

Icon comprehension is affected by familiarity, meaningfulness, concreteness, visual complexity and semantic distance between the drawing and intended concept. McDougall, Curry and de Bruijn provide norms for specific symbols; their values demonstrate dimensions to measure, not universal scores for new icons.

A symbol familiar to a design team may be unfamiliar to the intended population. Test the unlabelled interpretation before claiming that an icon is “universal”. ISO 9186 defines methods for testing comprehensibility and perceptual quality of graphical symbols.

7.3. Labels

Use a visible text label when:

the meaning is not consistently understood;
the action is consequential, unusual or domain-specific;
several similar icons appear together;
first-use discovery matters;
localisation changes the metaphor;
the icon represents an abstract workflow rather than a concrete object.

Tooltips MAY supplement labels but do not replace them for primary comprehension: they may be delayed, unavailable on touch, undiscoverable by keyboard or absent from an accessibility tree.

An icon-only control requires a programmatic accessible name, an adequate target, focus visibility and evidence that its visible representation is understood in context.

7.4. Platform symbols

Prefer the current platform symbol for a platform-governed action when it is available and licensed for that environment. Platform familiarity is transferable evidence only for people familiar with that platform.

Do not copy Apple, Google, Microsoft or another system's proprietary asset into an unsupported environment merely because its metaphor is familiar. Record licence, permitted platforms and required attribution.

8. Icon construction

8.1. Family coherence

An icon family controls:

nominal canvas and keyline zones;
filled, outlined or duotone grammar;
stroke weight, caps and joins;
corner character;
curve tension and terminal treatment;
perspective and dimensionality;
detail levels at each rendered size;
colour and opacity roles;
optical alignment with text and adjacent icons.

A grid coordinates construction; it does not mechanically produce optical balance. Circular, diagonal and visually light forms may need small overshoots, unequal geometric bounds or internal padding. Judge the rendered family at target sizes.

8.2. Stroke and scaling

Do not assume that one vector path scales well from 12 to 128 pixels. At small sizes:

remove non-essential detail;
protect apertures and negative space;
align important strokes to the rasterisation conditions where relevant;
verify stroke expansion and joins;
compare filled and outlined states at equal optical weight.

Stroke width is a family property, not a universal ratio. Test low-resolution, high-density, magnified and high-contrast rendering.

8.3. Glyph, target and state

The visual glyph, layout box and interactive target are separate geometries. Increasing the target MUST NOT cause unexpected overlap with another action. Selected, disabled, pressed, focus, hover and destructive states require more than a colour-only distinction where the state is material.

An animated icon communicates a defined transition or progress state. It MUST respect reduced-motion preferences and MUST NOT delay or obscure the final state.

9. Raster, vector and responsive delivery

9.1. Source choice

Use vector graphics for resolution-independent shapes whose semantics and rendering can be expressed safely in that format. Use raster images for continuous-tone photography, captured pixels and artwork whose texture cannot be reproduced acceptably as vectors.

SVG can be styled, scaled, interactive and accessible, but it is also a document format capable of references, animation and script. Apply a defined sanitisation and delivery policy to untrusted SVG. Avoid path-converting meaningful text when real text can be used.

Raster source masters SHOULD retain sufficient resolution, bit depth and colour information for authorised derivatives. Do not serve a master when a smaller derivative answers the display need.

9.2. Responsive images

Use HTML srcset and sizes for resolution selection and <picture> for genuine art direction or format alternatives. Candidate widths and the sizes expression MUST match actual layout behaviour; otherwise a browser may fetch an unnecessarily large or visibly inadequate resource.

Define:

intrinsic width and height or an equivalent aspect ratio;
focal point and crop-safe zones;
permitted aspect-ratio variants;
minimum useful subject size;
narrow, wide and high-density derivatives;
behaviour when an image is unavailable.

Do not crop away the evidence, product detail or person named by the surrounding content merely to fill a container.

9.3. Colour and theme

Tag and convert colour intentionally. Check sRGB delivery and any authorised wide-gamut path on target displays. An asset for dark appearance may require a separate, authored variant; mechanical inversion can corrupt skin, photographs, logos, shadows and semantic colours.

Foreground content MUST remain distinguishable in forced colours and high-contrast environments, or an equivalent representation must be provided.

10. Text alternatives

10.1. Context, not inventory

Alternative text communicates the image's purpose in its current context. It is not necessarily a literal inventory of visible objects.

An informative simple image receives a concise equivalent of the information it contributes.
A functional image names the action or destination, not its physical shape.
A decorative or fully redundant image receives an empty alternative and is excluded from the accessibility tree as appropriate.
An identity image receives the identity needed in context.
An image of text reproduces the text when the text is not otherwise available, while images of text are generally avoided.
A complex image receives a concise identification plus an adjacent or linked structured explanation or data equivalent.

Do not repeat a nearby caption word for word unless repetition is required to preserve meaning in the accessibility tree. Do not begin every alternative with “image of”; the element already exposes its type in many environments.

10.2. Complex alternatives

For charts, maps and diagrams, provide the outcome needed for the task and access to the underlying relationships or data. A useful structure can include:

title and question
main conclusion
important exceptions and uncertainty
series, axes, units and time range
structured data table
source and date
method or transformation

The alternative MUST be updated with the image. Treat it as a required asset field with review ownership.

10.3. SVG and icon accessibility

An SVG's accessible treatment depends on whether it is embedded as an image, inline content or an interactive document. Verify its computed accessible name, description, role, focus order and hidden decorative descendants in actual browser and assistive-technology combinations.

Do not place each decorative path in the accessibility tree. Interactive SVG requires full keyboard, focus, name, role, state and alternative-content engineering; a <title> element alone does not establish complete accessibility.

11. Localisation and cultural risk

Every image system records:

cultures, regions and languages for which it was reviewed;
gestures, body symbols, animals, objects, clothing and colour associations that could change meaning;
embedded writing, numeral and reading direction;
geographic, political, religious and historical sensitivity;
units, currency, dates, transport conventions and device depictions;
required local variants and approvers.

Text inside an icon or image SHOULD be avoided. When essential, it must be localised and remain legible. Directional content may need authored right-to-left variants. Do not mirror clocks, media controls, trademarks, physical products or other non-directional objects automatically.

A culturally inclusive review is not a search for one globally neutral image. Some concepts require deliberate local variants.

12. Generated assets, provenance and disclosure

12.1. Production record

For every generated or materially assisted asset, record:

asset identifier and hash
human owner and reviewer
tool, provider and model/version where available
creation date
prompt or production brief where retention is lawful
source and reference assets
declared rights and restrictions
material edits
content-safety and factual review
people or places depicted
disclosure decision
C2PA or other provenance status
published derivatives

Do not put secrets, personal data or unlicensed client material into a generation service without authority and an approved data policy.

12.2. Disclosure

Disclose generation or material synthetic alteration when it could reasonably affect a person's judgement of authenticity, evidence, endorsement, identity, location, capability or outcome. The disclosure must be available at the point where the interpretation occurs, not hidden only in internal metadata.

C2PA Content Credentials can carry signed assertions about origin and edit history. They are provenance signals, not proof that the depicted event is true. Missing credentials mean unknown provenance, not human authorship; valid credentials do not make a deceptive composition truthful.

Preserve supported provenance through the derivative pipeline and test what survives upload, resizing, transcoding and export. Provide a human-readable fallback when machine-readable credentials are unavailable.

12.3. Prohibited use

Generated or manipulated imagery MUST NOT:

fabricate evidence, testimonials, customers or product capabilities;
depict a real person in a materially false context without authority and clear disclosure;
conceal legally or operationally material product limitations;
imitate a trusted institution, safety sign or system state deceptively;
launder an unlicensed or private source through generation;
claim demographic or scientific representativeness from a synthetic scene.

13. Compression and performance

13.1. Format and quality

Choose format by content and support, not fashion:

photographic content: compare modern lossy formats and a compatible fallback where required;
flat colour, transparency and exact pixels: compare lossless raster and vector;
icons and diagrams: prefer a safe vector or purpose-sized raster;
animation: use an efficient controllable media form rather than a large frame sequence where possible.

Quality is accepted at intended rendered sizes using representative images. Check edges, skin, gradients, text, line art, transparency, colour shifts and generation loss. A single encoder quality number is not comparable across formats.

13.2. Loading priority

An image that is likely to be the Largest Contentful Paint element should be discoverable in initial markup, appropriately prioritised and not indiscriminately lazy-loaded. Below-the-fold images SHOULD be deferred when that reduces competition without harming interaction.

Reserve layout space with intrinsic dimensions or aspect ratio. Avoid loading a large desktop crop on a narrow device. Do not preload multiple mutually exclusive hero candidates without measured justification.

13.3. Performance record

Measure:

encoded bytes and decoded dimensions;
candidate selected at each test viewport and density;
request start, priority, completion and cache result;
decode and render cost;
layout shift;
impact on LCP and interaction;
memory use for large or repeated imagery;
behaviour on constrained network, CPU and memory;
result when the resource fails.

For every production asset keep:

source and acquisition date
creator and rights holder
original file and cryptographic hash
licence or contract and version
commercial-use, modification and derivative rights
territory, term, medium and seat limits
model, property and location releases where applicable
attribution wording and placement
share-alike or notice obligations
trademark and publicity-right review
generation/training restrictions where stated
expiry and replacement plan

Possession, search-engine availability, a social-media post or a stock preview does not grant reuse rights. A Creative Commons label must be matched to its exact licence conditions; attribution, share-alike, non-commercial and no-derivatives terms are materially different.

Do not assume that a licence resolves privacy, personality, trademark, cultural heritage or sensitive-location rights. Escalate jurisdiction-specific questions to qualified counsel.

15. Tokens and asset metadata

Tokens SHOULD express semantic treatment rather than individual filenames:

image.radius.content
image.scrim.on-light
image.scrim.on-dark
image.aspect.hero
image.aspect.thumbnail
icon.size.control
icon.size.status
icon.stroke.default
icon.colour.interactive
icon.colour.danger
icon.optical-adjust.<name>

Each asset manifest SHOULD include:

id
role
semantic concept
source master and derivatives
intrinsic dimensions and aspect ratios
focal point and safe zones
light/dark/high-contrast variants
locales and direction
alternative text or alternative strategy
licence, attribution and releases
creator, provenance and material edits
generation disclosure
performance priority
owner, version and review date

Components request an asset by semantic role and state. A theme override MUST not replace it with an asset of different meaning, weaker rights or missing accessibility metadata.

16. Asset-selection algorithm

state the task, claim or experience the asset must support;
classify its primary role and evidence sensitivity;
decide whether text, structured data or an existing platform symbol is clearer;
define semantic, accessibility, cultural, legal and performance gates;
source or create candidates with provenance from the start;
test factual content, crop resilience, contrast and responsive variants;
test icon comprehension, familiarity and semantic distance with intended people when an icon carries function;
write and review the text alternative and any structured equivalent;
review localisation, inclusion, safety, manipulation and disclosure;
encode and compare derivatives at target sizes and conditions;
verify licence, releases, attribution, hashes and pipeline preservation;
register tokens and asset metadata;
regression-test delivery, accessibility and provenance;
monitor complaints, misuse and field comprehension.

An aesthetic preference vote cannot override a failed rights, truth, accessibility or comprehension gate.

17. Acceptance matrix

Dimension	Required evidence	Reject when
Purpose	Named role and task/claim	The asset has no defensible contribution
Meaning	Content review or comprehension test	Intended meaning is absent or a harmful meaning is likely
Icon comprehension	Unprompted interpretation and contextual task	A consequential action is materially misidentified
Perceptual quality	Target-size and low-quality rendering	Critical parts merge, disappear or become ambiguous
Accessibility	Alternative, contrast, zoom and assistive-technology test	Information or function is unavailable
Responsiveness	Crop and candidate matrix	Essential subject is lost or waste exceeds budget
Localisation	Relevant cultural and direction review	Meaning, dignity or reading direction fails
Integrity	Source, edit and claim review	Crop or manipulation creates a materially false inference
Generated content	Production record and disclosure test	Provenance is concealed where authenticity affects judgement
Performance	Network, decode, render, LCP and layout-shift measurements	Product Profile budget is missed
Rights	Licence, releases and attribution record	Required use or derivative right is absent
Maintenance	Manifest, owner, hashes and review date	The shipped asset cannot be reproduced or replaced safely

Thresholds and test populations are set before final asset comparison.

18. Release checklist

Every asset has a primary role and owner.
Functional icons have accessible names and visible labels where required.
Consequential icons have comprehension evidence.
Icons remain coherent and legible at every shipped size and state.
Essential meaning survives responsive crops, dark appearance and high zoom.
Informative and complex images have current text or data alternatives.
Localisation and bidirectional variants have been reviewed.
Documentary and generated content are not confused.
Originals, hashes, material edits and disclosure decisions are recorded.
Candidate selection, dimensions, priority and layout reservation are correct.
Licences, releases and attribution are complete for every derivative.
Failure, reduced-motion, forced-colour and assistive-technology states pass.