Foundations / Imagery

Imagery

How to fit an image in its frame and which opacities to use on top. The examples on this page are diagrams, not photos.

Version 1.4 · Oct 20, 2026

Fit

Placeholder image filling its frame: cropped top and bottom, not stretched
image.fit
Fill (in Figma: Fill · in code: cover)
Default: the image covers the frame and is cropped without stretching.
Placeholder image fitted inside a white frame: shown whole, not cropped
image.fit-contain
Fit (in Figma: Fit · in code: contain)
Client logos and screenshots: the whole image, not cropped.

Opacities

Four levels of transparency for layers, overlays and text on a background.

opacity-10
10 %
Very subtle layers over an image or a color.
opacity-30
30 %
Light overlays.
opacity-60
60 %
text-inverse-muted: secondary text on Ink.
opacity-80
80 %
Strong overlays and bars over content.

Overlay

A dark gradient from top to bottom (gradient-overlay-photo: from transparent black to black at 50%) to put white text on a photo. Check the contrast where the text goes.

Placeholder photo under a dark gradient with white text
Case study

What to do and what to avoid

Correct: placeholder image fills the frame, cropped, not stretched
✓
Do this

Fill: the image covers the frame and is cropped without stretching.

Wrong: placeholder image stretched and distorted to fill the frame
✕
Avoid this

Stretch: the image is distorted to fit the frame.

Related pages

Basics

Shadows and effects

Overlay for photos and blur for the navigation bar.

See page
Identity

Color

White text at 60% on Ink.

See page
Application

Formats and grids

Image size in each format.

See page