Use high-quality, professional images. Crisp, well-composed photos make the difference between “nice” and “memorable.” Avoid pixelation, over-compression, or poorly lit shots.

Avoid putting text in images. Text in images doesn’t scale, isn’t accessible, and is a pain to maintain in the future (imagine if you lose the Illustrator file!). Our components come with title and description fields that you can use.

Be intentional about brand fit. Choose imagery that reflects how you want to be seen and perceived. For example, if you’re a community-focused agency, use an image with real Singaporeans.

Safe zone: The image will maintain an aspect ratio of 2:1 above mobile and 1:1 in mobile. If you have critical elements in the image (e.g., faces), keep them in the central 1:1 region.

Avoid: Weak filler images like an image of a landscape. If your image is weak, consider using the Gradient Hero variant.

Safe zone: The image will always maintain an aspect ratio of 3:2. The text will overlap with the image on larger screens, so test it out on Studio.

Safe zone: The image will maintain an aspect ratio of 2:3 above mobile and 1:1 in mobile. If you have critical elements in the image (e.g., faces), keep them in the central 1:1 region.

What to do: Use an image that represents the people, outcomes, or values behind your work. A candid photo of the public that you helped or people that work in your agency often works best.

Avoid: Photos with any text on them. There will be an overlay on the images and this will obstruct any text.

Best practice: Place a dark CTA block directly under a bold hero banner to create a clear progression: impression → invitation. The contrast helps it stand out without interrupting flow.

Avoid: Dropping a dark CTA in the middle of your page. It visually slices the page and feels awkward.

Example: