Ideogram design specAI Products

Editorial, magazine-like AI image brand: a warm cream/paper canvas with near-black ink, an enormous Exposure serif display at a calm 400 weight and very tight -7% tracking, Geist body and uppercase Enter Mono breadcrumb eyebrows, deep near-black announcement blocks, full-pill buttons, and a single soft lavender #bd9fff accent with warm beige section surfaces.

Browse Ideogram in the interactive gallery

Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.

Marketing site

Source: ideogram.ai (live DOM, computed styles), 2026-07-18 (desktop 1512px). Coverage: home / marketing (Ideogram 4.0). App/generator: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified.

Visual Theme & Atmosphere

Editorial, magazine-like AI image brand: a warm cream/paper canvas set with an enormous Exposure serif display headline at a calm 400 weight and very tight negative tracking, so the hero reads like the cover of a design annual. Structure is quiet and typographic — an uppercase Enter Mono breadcrumb eyebrow, hairline rules, and near-black ink #232425 — while colour is rationed to a soft lavender #bd9fff accent and warm beige surfaces. Signature contrast: the serif Exposure display on cream vs a Geist sans voice inside deep near-black announcement blocks. Buttons are full pills. Nothing is neon; warmth, serif scale and restraint do the work, letting the generated imagery bring the colour. Feels: editorial, warm, refined, confident.

Color Palette & Roles

Surfaces

TokenHexRole / usage
brand-paper#fffdfbPrimary page background (warm white)
brand-cream#fff9f4Warm cream sections / text on dark
beige#ece7e0Warm beige inset surfaces / cards
ink-panel#232425Dark near-black announcement blocks
black#000000Sign-up button, deepest ink

Text

TokenHexRole / usage
brand-ink#232425Primary text, headings
muted#232425 @ lower opacitySecondary text on cream
cream-text#fff9f4Text on dark ink panels

Accent & semantic

TokenHexRole / usage
brand-blue#bd9fffSignature lavender accent, CTA pill
brand-blue-soft#efe8ffPale lavender tint / hover
red#b92b2bError / destructive

Borders

TokenHexRole / usage
brand-rulergba(35,36,37,.12)Hairline rules & dividers

Rule: chrome is warm-neutral (ink #232425 on paper/cream); the lavender #bd9fff is the single reserved accent (CTA pill, highlights), beige #ece7e0 segments sections, and generated imagery supplies the rest of the colour.

Typography Rules

RoleSize/LineWeightTracking
Heading XL (h1, Exposure)74 / 72400-0.07em (-5.18px)
Heading LG (Exposure)44 / 44400-0.07em (-3.08px)
Heading MD (Geist)40 / .88400-0.03em
Heading label17 / 20500-0.04em
Paragraph LG24 / 32400-0.03em
Paragraph MD18 / 26400-0.03em
Paragraph SM16 / 24400-0.03em
Mono eyebrow (Enter Mono)~12–13400wide, UPPERCASE

Patterns: the editorial signature is the Exposure serif at huge size, 400 weight and very tight -7% tracking; Geist carries UI and dark-block headings; body tracking is a consistent -0.03em. Eyebrows are uppercase mono.

Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.