# ideogram.ai

Source: https://ideogram.ai/
Captured: 2026-10-23
Tags: saas, landing, mixed, both, editorial, minimal, bento, confident, elegant, premium, human, technical
Colors: #312f2a, #574c35, #fbfbfb, #7c7039, #998b4f, #79686f, #141919, #ada7a5
Type (h1): Exposure · 64px/64px · 400 · tracking -4.48px — "The open models for visual intelligence."
Type (h2): Geist Variable · 32px/36px · 500 · tracking -0.32px — "One platform. Three ways to create."
Type (h3): Geist Variable · 24px/28px · 500 — "Ideogram Creative"
Type (body): Geist Variable · 18px/26px · 400 · tracking -0.54px — "Prompt fidelity. Crystal-clear type. Reliable editing. A suite of models made fo"
Type (small): Geist Variable · 13px/13px · 500 — "Sign up"
Type (button): Geist Variable · 13px/13px · 500 — "Sign up"
Button: "Sign upSign up" — fill #bd9fff, text #272038, radius 999px, border 1px, padding 0px 10px, height 34px, type 13px/500
Radii: 999px (16), 30px (3), 8px (1), 16px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/ideogram-ai/hero.webp?v=5df2200f
- Page crop (mid-1): https://media.lvly.design/library/ideogram-ai/mid-1.webp?v=bf03dc23
- Page crop (mid-2): https://media.lvly.design/library/ideogram-ai/mid-2.webp?v=f9653ec6
- Hero (mobile): https://media.lvly.design/library/ideogram-ai/mobile-hero.webp?v=1f28a0d6
- Full page (desktop): https://media.lvly.design/library/ideogram-ai/full.jpg?v=d579c190
- Full page (mobile): https://media.lvly.design/library/ideogram-ai/mobile-full.jpg?v=dcae335b
- Clip preview (mp4): https://media.lvly.design/library/ideogram-ai/video-xhskyt.preview.mp4?v=432127d2

An AI image platform that lets its own output do the branding: the hero is a full-bleed, golden-hour photo of a hillside where the word "Ideogram" is planted in wildflowers, so the product's ability to render type is shown in the first frame before anything is claimed. Over it sits a tightly tracked serif display headline (Exposure, 64px, -4.48px tracking) with plain Geist body copy and a soft lavender pill CTA. Below the fold the page alternates bands: white with a logo strip, three soft-gradient product cards, a full-width video panel, a saturated lavender API band with a dark code block, a near-black navy enterprise band with fashion photography and a testimonial, a masonry gallery of community work that fades into white, a two-column FAQ, and a footer that ends in a giant faded wordmark over a lavender wash. The chrome is thin and quiet: one lavender pill, ghost pills, hairlines. All the color comes from imagery and one pastel violet.

## Steal-worthy details

- Brand name rendered inside the hero photograph (lettering made of flowers on a hillside), so the image works as both the logo and a product demo. A generative tool proving its typography claim without a caption
- Serif display headline at 64/64 with very heavy negative tracking (-0.07em) set against neutral Geist UI text. The hairline-tight serif reads as editorial and expensive while the sans keeps the product side plain
- Floating release-video card bottom-right of the hero: a pale paper-textured tile with a one-line serif title and a plain "Play release video" caption under it. A launch announcement that never interrupts the headline
- CTA pair as a soft lavender pill (#bd9fff fill, #272038 text, 13px/500) next to a translucent ghost pill with a 1px light border. The same pair repeats in the nav, so the hierarchy stays consistent everywhere
- Customer logos in a hard white strip directly under the full-bleed photo, led by a two-line gray caption on the left. The cut from photo to paper clearly marks where the hero ends
- Three product cards whose tops are blurred mesh gradients (pink to violet, teal to green, violet to magenta) with only a centered white label. Each product gets an identity color without any illustration
- API section as a full-bleed saturated lavender band holding a near-black code panel: the brand color becomes a backdrop for developer content instead of just a button fill
- Community masonry gallery that fades to white at the bottom with a single dark pill ("Try Ideogram") sitting in the fade. The fade suggests the gallery goes on and ends the section without a hard cutoff
- Footer that ends in an oversized, low-contrast serif wordmark cropped by the page edge over a lavender-to-white gradient

## Style recipe

Pair a serif display face (Exposure or a similar high-contrast serif such as GT Super or Editorial New) at weight 400 for H1 only, around 64px with line-height 1.0 and tracking near -0.07em, with a neutral grotesk (Geist) for everything else: H2 32/36 weight 500 at -0.01em, H3 24/28 weight 500, body 18/26 at -0.03em, UI and buttons 13px weight 500. Keep the canvas white (#ffffff, panels #fbfbfb) with warm near-black ink (#312f2a for text, #141919 for the darkest surfaces). Use a single pastel violet accent, #bd9fff, with deep-violet text (#272038) on it. It fills the primary pill button, then shows up as one full-bleed band and a gradient wash at the very bottom of the page. Let photography and generated imagery carry every other color; the UI itself stays neutral. Use full pills (999px radius, 34px tall in nav, around 40px for hero CTAs, 10–18px horizontal padding) and pair every primary with a ghost pill: transparent, 1px hairline border, ink text, or white-alpha on photos. Large media panels and cards use 16–30px radii, small chips 8px. Build the page from alternating full-width bands (white, lavender #bd9fff, deep navy-black around #15121f) so the rhythm comes from changes in surface color rather than from dividers. Open with a full-bleed photographic hero that has a bottom-left text stack, then cut hard to white. Give product cards a blurred mesh-gradient top with a white label and plain text below. Set code on near-black panels in a monospace face. Finish image grids with a fade to white and one dark pill (#1d1a2b) as the CTA. Hairline borders only, no drop shadows, generous 120–160px vertical section padding, 80px side gutters at 1440px.