ideogram.ai

Ideogram | AI apps and models in one platformsaved 12h ago · captured 12h ago

Nine details, nine pinned.

View as Markdown ↗

Colors8 colors · ground #312F2A

ground#312f2a·39.77%#574c35·16.97%#fbfbfb·11.72%#7c7039·10.54%#998b4f·5.26%#79686f·3.51%#141919·3.21%#ada7a5·2.91%

Sized by coverage · click to copy.

Typography2 families · 5 styles · Exposure, Geist Variable

The open models for visual intelligence.

Exposure · 64/64 · 400 · -4.48px

One platform. Three ways to create.

Geist Variable · 32/36 · 500 · -0.32px

Ideogram Creative

Geist Variable · 24/28 · 500 · normal

Body

Prompt fidelity. Crystal-clear type. Reliable editing. A suite of models made fo

Geist Variable · 18/26 · 400 · -0.54px

Small

Geist Variable · 13/13 · 500 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsSign upSign up1 style

Sign upSign up

primary · fill #bd9fff · label #272038 · radius 999px · border 1px · padding 0px 10px · height 34px · type 13px / 500

Shape4 radii · 21 uses

999px16 uses · 76%

30px3 uses · 14%

8px1 use · 5%

16px1 use · 5%

AnalysisAn 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 abilit…

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.

Style recipePair 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…

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.

Details9 worth noting

ideogram.ai — the captured page — Landing, 1440 × 900 · captured Oct 23, 2026

1Wordmark grown into the hero photo
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
2Ultra-tight serif headline over sans UI
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
3Corner release-video card
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
4Lavender pill plus ghost pill
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
5White logo strip under photo hero
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
6Mesh-gradient product card tops
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
7Lavender band framing a dark code panel
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
8Masonry gallery fading into a CTA
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
9Giant faded wordmark footer
Footer that ends in an oversized, low-contrast serif wordmark cropped by the page edge over a lavender-to-white gradient