Hero carousel assets — Launchpad & Marketplace.
The big rotating banner at the top of the Launchpad and Marketplace. This page is the spec and step-by-step for the artwork that goes behind each slide — sizes, safe zones, formats, and an export checklist.
The hero carousel is a full-width, auto-rotating banner. Each slide is clean artwork with the eyebrow, title, body copy, and button added as live text on top — so your image should never contain baked-in words. The same image has to survive two very different crops: a wide cinematic banner on desktop and a tall portrait on mobile.
Core specifications
The image is placed with object-fit: cover, so it is cropped, never letterboxed. Anything near an edge can be cut off, and the crop is different on desktop (wide) vs mobile (tall). Design for the shared centre, not the full rectangle.
Safe zones & composition
- Text zone — keep it quiet. On desktop the eyebrow, Anton title (up to ~64px), body (~46 characters wide) and button sit on the left ~40% over a dark scrim. On mobile they move to the bottom ~45%. Don't put faces, logos, or fine detail there — the text and scrim will cover it.
- Focal subject — centre / right, upper. Place the hero subject inside the centre 3:4 band so it survives the mobile crop, biased slightly right of centre so it clears the desktop text on the left.
- Edge margin. Keep essential elements at least 5% in from every edge (the dashed inset). Full-bleed background is fine; important detail is not.
- Contrast for white text. Titles render in white with a soft shadow. Make sure the text side reads against the art — darker or lower-detail there, or lean on the built-in scrim.
What each slide needs
The artwork is one layer; everything else is supplied as slide data (and edited in the carousel config, not the image):
| Element | Who provides it | Notes |
|---|---|---|
| Background art | You (this spec) | Clean image, no text, 16:6 master |
| Eyebrow | Slide data | Short label, e.g. “Featured Collection”, “Now on the Launchpad” |
| Title | Slide data | Anton, short — a few words |
| Body | Slide data | One or two lines, ~46 characters wide |
| Button | Slide data | Label + link (e.g. “View Collection”) |
Do
- Export a clean 16:6 master at 2560 × 960.
- Keep the subject in the centre 3:4 band.
- Leave the left/bottom quiet for text.
- Use sRGB WebP/JPG under 500 KB.
- Test both the wide and portrait crops before shipping.
Don't
- Bake titles, taglines, or logos-as-text into the image.
- Put faces or key detail in the left text zone.
- Push important elements to the edges.
- Ship a busy, high-contrast area behind the title.
- Upload PNGs or huge multi-MB files.
Step by step
- 1. Set the canvas. New document at 2560 × 960, sRGB.
- 2. Mark the guides. Add a 5% edge inset, a left-40% text zone, and a centred 960-tall × 720-wide box (the 3:4 mobile crop).
- 3. Compose. Subject inside the centre box, quiet area on the left.
- 4. Check the crops. Preview the full 16:6 and the centre 3:4 — the subject must read in both.
- 5. Export. WebP or JPG q80–85, confirm ≤ 500 KB. Optionally export a dedicated 1080 × 1440 portrait if the centre crop needs different art.
- 6. Hand off. Supply the image plus the eyebrow, title, body, and button label + link for the slide.
Export checklist
- 16:6 master — 2560 × 960, sRGB, no baked-in text.
- Subject inside the centre 3:4 band; left/bottom kept quiet.
- 5% edge-safe margin respected.
- WebP / JPG q80–85, ≤ 500 KB.
- (Optional) 1080 × 1440 portrait crop for mobile.
- Slide copy supplied separately: eyebrow, title, body, button.
Reference component: html-mockups/hero-carousel.html. The landing page uses a different hero — see Hero carousel assets — Landing page.