JM Family Design System

Imagery

Imagery is how the brand feels before anyone reads a word. The right photo conveys our people, our work, and our culture; the wrong one fades into background noise. This page covers how to choose, treat, and label images so they earn their place on the page.

JM Family associate standing beside a Tundra truck on the production floor, smiling, arms crossed
JM Family associate in a red shirt and beanie, working on an engine under an open hood
Three associates on an interior staircase next to a quote painted on the wall
Two associates volunteering, kneeling on grass and collecting trash into an orange bag
Two associates working together on a Camry on the production line

Associates at work — the kind of imagery this brand should lead with.

Lead with our associates

The most distinctive imagery we own is our people doing their work. Genuine moments — on the production floor, in the office, in the community — carry the brand farther than any stock photograph ever will.

Operations

Real work, real settings

On the floor, with the product. Genuine moments outperform staged stock photography every time.

Culture

Culture and connection

Show associates together, in the spaces that make our culture visible — quotes on the walls, hallways, shared moments.

Community

Community impact

Volunteering, service, and the work that happens beyond the office is part of who we are. Show it.

Where to source associate photography. Coordinate with Corporate Communications for approved photo libraries and shoot requests. Never reuse personal photos without explicit written consent.

Principles

Seven principles, in order from most to least common when imagery problems show up in review.

  1. Lead with our associates

    Whenever possible, use authentic photos of JM Family associates at work — smiling, engaged, in real settings. Our people, our culture, and our workplaces are the most distinctive thing we have to show. Stock photography is a fallback, never a first choice.

  2. Match characteristics across images

    When a layout uses multiple images, match their exposure, color tone, contrast, and crop style. One overexposed photo or one heavily filtered image breaks the cohesion of the whole page. The same applies to illustrations: keep palette, line weight, and detail level consistent.

  3. Information beats decoration

    Prioritize information-carrying images — product photos, real scenes, meaningful infographics — over decorative filler. Generic stock photos that appear on a thousand other sites add visual weight without informational value, and users learn to skip them.

  4. Balance image with text

    A page heavy with text needs imagery with detail and depth to hold attention. A page with lots of whitespace needs simpler, calmer imagery. Strip the words away from your design for a moment — the imagery alone should still convey the right tone.

  5. Right size, right quality

    Compress and resize before shipping. Aim for a total page weight under 1–2 MB. Use modern formats (webp or avif) for photos and svg for vector. Don’t sacrifice quality to the point of pixelation, but don’t ship a 4 MB hero on a phone either.

  6. Keep data visualizations honest

    High data-ink ratio: every pixel should serve the data. Drop 3D effects, background textures, drop shadows, and decorative gradients. A clean bar chart communicates faster than an “exciting” one.

  7. Write alt text that conveys content

    For information-carrying images, the alt text should describe what the image communicates — not just what’s in it. For purely decorative images, use alt="" so screen readers skip them.

Right size, right quality

Aim for a total page weight under 1–2 MB. Compress photos as webp or avif at 75–85% quality — almost always indistinguishable from the original at half the bytes.

Under 800 KBPer image, hero or banner
800 KB – 1.5 MBAcceptable; review compression settings
Over 1.5 MBToo large; resize or recompress before shipping
Render size, not source size. A hero displayed at 1280×640 px should be exported at 1280×640 (with a 2x retina version at 2560×1280). Don’t ship a 4000-pixel original and let the browser shrink it.

Information beats decoration

When you choose between an image that tells the user something and one that just fills space, pick the first — every time.

Information-carrying

Real, specific, ours. Shows our work, our people, and a moment that couldn’t come from a stock library.

Decorative filler

Generic and replaceable. A photo that could appear on any company site adds nothing to ours. Skip it or replace it with something specific.

Alt text

Alt text describes what the image communicates — concisely, in the context of the page.

JM Family associates volunteering, kneeling on grass and collecting trash into an orange bag
Do

alt=“Two JM Family associates volunteering at a community cleanup, kneeling on grass and collecting trash into an orange bag.”

Don’t

alt=“volunteering jm family associates community service stronger together volunteer event.”
Keyword stuffing for SEO. Useless to screen reader users.

Don’t

alt=“Image of two people.”
Technically correct, completely useless. The image conveys far more than that.

Decorative images use alt="". If an image carries no information beyond what the surrounding text already says, an empty alt attribute lets screen readers skip it cleanly.

Don’ts

Don’t
Don’t use stock photos as a default. Generic smiling-people stock has no claim to JM Family. Reach for the associate library first and only use stock as a clearly-justified fallback.
Don’t
Don’t mix illustration styles. Outlined flat illustrations next to lush gradient art break cohesion. Pick a single illustration system per surface.
Don’t
Don’t crop people out of the frame. Faces and gestures are the most engaging part of a photo. Avoid crops that cut subjects awkwardly at the joints or remove their eyes.
Don’t
Don’t ship images larger than needed. A 3000×2000 hero on a 1440px screen is wasted bandwidth. Match the rendered size, then add 1.5× for retina.
Don’t
Don’t add color filters that distort skin tones. Heavy teal washes or sepia filters change how associates appear. Color-correct for accuracy, not for stylistic mood.
Don’t
Don’t use alt text for SEO. Stuffing keywords into alt text betrays the people who depend on it. Describe the image; let the page content handle the rest.