# Ideogram — Marketing Site Design Spec

> 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.

## 1. 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.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| brand-paper | `#fffdfb` | Primary page background (warm white) |
| brand-cream | `#fff9f4` | Warm cream sections / text on dark |
| beige | `#ece7e0` | Warm beige inset surfaces / cards |
| ink-panel | `#232425` | Dark near-black announcement blocks |
| black | `#000000` | Sign-up button, deepest ink |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| brand-ink | `#232425` | Primary text, headings |
| muted | `#232425` @ lower opacity | Secondary text on cream |
| cream-text | `#fff9f4` | Text on dark ink panels |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| brand-blue | `#bd9fff` | Signature lavender accent, CTA pill |
| brand-blue-soft | `#efe8ff` | Pale lavender tint / hover |
| red | `#b92b2b` | Error / destructive |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| brand-rule | `rgba(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.

## 3. Typography Rules

- Display: `"Exposure", Georgia, serif` — a high-contrast serif set very large at 400 with extreme negative tracking.
- UI / Body: `"Geist Variable", Geist, ui-sans-serif, system-ui, sans-serif`.
- Labels / eyebrows: `"Enter Mono", monospace` — uppercase breadcrumbs.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Heading XL (h1, Exposure) | 74 / 72 | 400 | -0.07em (-5.18px) |
| Heading LG (Exposure) | 44 / 44 | 400 | -0.07em (-3.08px) |
| Heading MD (Geist) | 40 / .88 | 400 | -0.03em |
| Heading label | 17 / 20 | 500 | -0.04em |
| Paragraph LG | 24 / 32 | 400 | -0.03em |
| Paragraph MD | 18 / 26 | 400 | -0.03em |
| Paragraph SM | 16 / 24 | 400 | -0.03em |
| Mono eyebrow (Enter Mono) | ~12–13 | 400 | wide, 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.

## 4. Component Stylings

### Buttons (all full pills, radius `999px`, 13px 500)
- **Primary (dark)**: bg `#000000`/`#232425`, text cream `#fff9f4`. ("Sign up".)
- **Secondary (cream)**: bg `#fff9f4`/paper, text ink `#232425`, subtle border. ("Login" / "Learn more".)
- **Accent (lavender)**: bg `#bd9fff`, text ink `#232425`. ("Try in App".)

### Nav
- On paper: Ideogram brain-glyph logo + wordmark left, center dropdown links (Models / Features / Open source / API / MCP / App / Enterprise), right cream Login pill + dark Sign-up pill.

### Eyebrow / breadcrumb
- Uppercase Enter Mono breadcrumb ("IDEOGRAM 4.0 / OPEN SOURCE / API MCP APP"), muted ink.

### Cards / announcement blocks
- Large deep near-black `#232425` blocks holding a mono eyebrow, a Geist heading, gray sub-copy, pill CTAs and product imagery. Warm beige `#ece7e0` cards elsewhere.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Max content generous; left-aligned editorial hero with the serif headline spanning two lines.
- Mono breadcrumb eyebrow above the hero; hairline `rgba(35,36,37,.12)` rules segment sections.
- Deep near-black announcement blocks alternate with the warm paper canvas.
- Button radius full-pill; type scale carries hierarchy.

## 6. Depth & Elevation

- Radii: buttons full-pill `999px`; cards/blocks large rounded (announcement block corners ~16–24px). Base `--brand-button-radius 999px`.
- Elevation: largely flat — warm surfaces separated by hairline rules and by the dark-vs-cream contrast rather than shadows. Imagery sits flush in blocks.

## 7. Motion

- Restrained: hover color/opacity micro-transitions; dropdown nav menus. No heavy scroll library confirmed. Ease default cubic-bezier.

## 8. Backgrounds, Effects & WebGL

- Flat warm solid surfaces (paper/cream/beige) and deep near-black blocks; contrast, not effects, creates depth.
- Colour arrives through the generated product imagery placed inside announcement blocks and grids.
- No confirmed WebGL hero, grain or background video. The brain-glyph logo and lavender accent are the brand marks.

## 9. Do's and Don'ts

### Do
- Keep the canvas warm paper/cream (`#fffdfb` / `#fff9f4`) with near-black ink `#232425`.
- Set the hero in Exposure serif at huge size, 400 weight and very tight -7% tracking.
- Use Geist for UI, body and dark-block headings; use uppercase Enter Mono breadcrumbs.
- Make all buttons full pills; reserve lavender `#bd9fff` for the accent CTA.
- Segment sections with warm beige `#ece7e0` and hairline `rgba(35,36,37,.12)` rules; alternate with deep near-black blocks.

### Don't
- Don't set the display in a sans face — the editorial look depends on the Exposure serif.
- Don't add bold weights; everything is 400 (labels 500) with size + tracking doing the work.
- Don't introduce a second bright accent; lavender is the only one.
- Don't square off the buttons — they are full pills.
- Don't switch to a stark white or cold canvas; it is warm paper/cream.

## 10. Responsive Behavior

- Fluid editorial layout; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fffdfb` / cream `#fff9f4` · Ink `#232425` · Beige surface `#ece7e0` · Rule `rgba(35,36,37,.12)` · Accent lavender `#bd9fff` (soft `#efe8ff`)
- Fonts: Exposure serif (display, 74px, -7%) / Geist (UI+body, -3%) / Enter Mono (uppercase eyebrows) · Body 16–18px · Button radius full-pill · Button 13px 500
- Focus: not captured · Hover: subtle color/opacity shift; lavender-soft tint

<ideogram_design_language>
Use the Ideogram design language: an editorial, magazine-like AI image brand on a warm paper/cream canvas (#fffdfb / #fff9f4) with near-black ink #232425. The hero is an enormous Exposure serif display set at a calm 400 weight with very tight negative tracking (74px at -0.07em / -5.18px) over an uppercase Enter Mono breadcrumb eyebrow; Geist Variable carries all UI, body (tracking -0.03em) and the headings inside deep near-black #232425 announcement blocks, which alternate with the warm canvas to create depth without shadows. Colour is rationed to a single soft lavender accent #bd9fff (with a pale #efe8ff tint) reserved for the accent CTA and highlights, warm beige #ece7e0 segments sections, and hairline rules are rgba(35,36,37,.12); the rest of the colour comes from generated product imagery placed flush in blocks. All buttons are full pills (radius 999px, 13px/500): a dark primary (#000/#232425 with cream text), a cream secondary, and the lavender accent. Feels: editorial, warm, refined, confident. Avoid: setting the display in a sans face, bold weights, a second bright accent, squared-off buttons, or a stark-white/cold canvas.
</ideogram_design_language>