Morningstar Design

File size should be under 500KB.
Images should be in .png or .webp formats.
Include a color profile for each image to ensure that colors show as intended.
Test images on a range of actual devices.
Include clear alt text for each image. Write clear and direct description if it has a purpose, and “decorative image” if it is decorative.).
Avoid the use of images with text with important information.

When to Use

Use images to reinforce the message of the content it is paired with. Be sure the image is clear.

When Not to Use

Don’t use an image as the main element to communicate a message. Use text instead—the image should be secondary.


Variation	Purpose	Border	Sizes
Float	The most common. Use to support a message with extra context. Use as part of other components and sections such as cards, heroes, carousels, flexible modules, and the collaborate section.	No border	16x9, 4x3, 1x1, 2x3, 3x2, 3x4
With border	Use in very specific cases (outline cards with an image). Use to support a message and give extra contex.	With border	16x9, 4x3, 1x1, 2x3, 3x2, 3x4

The padding between images in an image list array will be the same as the padding applied for cards with a 24px gutter (vertical and horizontal).

3-Column Grid

4-Column Grid

Images can be used in six size ratios, depending on their purpose.

Showing size ratios 3:2, 4:3, 16:9, 1:1, 2:3 and 3:4

Always use text instead of images to communicate important information. Images should be added to support or relate to the message they accompany.

Alternative Text

Use alternative text to describe an image when the image adds important context for the message and is not decorative. Follow these guidelines to write alternative text:

Clearly describe what the image represents and what it conveys visually.
Alt text should be clear and short as possible, preferably no more than 100 characters.
Don’t include the text that the image is paired with. Alt text only describes the image.
If the meaning of the image is part of the text belongs to, then alt text might not be needed.
Decorative images don’t need alt text.

Text placed outside of the image for readability — Do use images to support text, with no important text information inside the image.

Text on top of the image that looks hard to read — **Don’t** place important information inside the image. It not only affects the readability of the content, but also affects its accessibility.

Showing readable text on top of an image with a dark overlay — Do consider the purpose of the image and where it will be used, so the content is visible and readable. Be sure to have a high level of contrast between the image and the text, as well as the image composition, when using the image as a background.

White text on top of a photo looks illegible — **Don’t** ignore where the image will be used. It could affect the visibility of the content the image supports.

When using an outlined card with an image or adding an outline to an image, the border should be Neutral 30 for the light theme and Neutral 4 for the dark theme. The border is 1px and set to appear inside.