Skip to content
DesignMunkDesignMunk Submit a site

Ideogram

ideogram.ai
A model made for images that hold up beyond the prompt box.
AI Developer Tools Astro Homepage Exposure Geist
Share Visit site
ideogram.ai DESKTOP · 1440
Ideogram

AI Breakdown

Design export

---
version: alpha
name: Ideogram
description: A model made for images that hold up beyond the prompt box.
colors:
  primary: "#ffffff"
  secondary: "#94908c"
  tertiary: "#272038"
  neutral: "#18426a"
  border: "#374151"
  brand-nero: "#262626"
  brand-pearl-brite: "#e7e5e2"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Exposure
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.07em
  headline-md:
    fontFamily: Geist Variable
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: Geist Variable
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
  headline-xs:
    fontFamily: Geist Variable
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Geist Variable
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.53
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 32px
  lg: 60px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 14px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 14px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Ideogram: Editorial Serif Headlines on a Dark, Creative Grid

## Overview

Ideogram's system is dark, editorial, and product-forward. The interface balances creative photography and gradients with highly readable UI copy. Density is medium: big headline energy, compact body size, and decisive spacing between sections. The audience spans designers, marketers, and developers; tone should feel confident, technical, and hands-on rather than whimsical.

## Colors

- Primary (#ffffff): Default text on dark surfaces and the fill for primary CTAs.
- Secondary (#94908c): Muted UI text for captions, meta labels, and subdued links.
- Tertiary (#272038): Deep accent used for text inside white buttons and dark headings on light surfaces.
- Neutral (#18426a): Core dark surface for sections and cards.
- Border (#374151): Hairline dividers, card outlines, and input borders.
- brand-nero (#262626): Near-black alternative surface for header/footer bands and overlays.
- brand-pearl-brite (#e7e5e2): Warm light surface for inverted blocks and gentle tints.
- surface ({colors.neutral}): Alias to the main background (#18426a).
- on-surface ({colors.primary}): Alias to the default foreground on dark surfaces (#ffffff).

## Typography

- Headline LG — Exposure, 64px/1, weight 400, letter-spacing -0.07em. Display serif for hero statements and marquee headlines. Exposure is self-hosted; substitutes: Playfair Display, Cormorant Garamond, or Libre Caslon Display (all Google) for high-contrast editorial tone.
- Headline MD — Geist Variable, 32px/1.13, weight 400, -0.01em. Section intros and key value props. Geist Variable is self-hosted; freely available substitutes: Geist (Google) is the closest; Manrope (Google) works as a neutral, modern sans.
- Headline SM — Geist Variable, 24px/1.17. Card titles and secondary section headings.
- Headline XS — Geist Variable, 20px/1.2. FAQ questions, small banners, and UI headings.
- Body MD — Geist Variable, 15px/1.53. Descriptive copy, bullets, and UI text. If Geist Variable isn't available, use Geist (Google) 15px/1.53 or Manrope with similar metrics.

## Layout

Spacing runs 10/20/32/60/100px for fine-to-coarse rhythm. Use 60–100px for section breaks, 32px for card gutters and vertical stacks within sections, and 20px for compact element groups (buttons, meta). A 12-column grid with 32px gutters supports three-up feature blocks and mixed media + copy pairs. Keep readable line lengths (~60–75ch) and allow hero media to bleed full-width.

## Elevation & Depth

Depth is minimal. One atmospheric shadow (rgba(39, 32, 56, 0.55) 0 30px 70px -42px) is available for floating media, sticky toolbars, or modals. Other shadow sizes are none; hierarchy is expressed through tone (neutral vs brand-nero), borders (#374151), and whitespace.

## Shapes

Cards use an 8px radius for approachable but professional edges. Interactive controls adopt fully rounded pills (9999px), including the 40px-tall primary button. Links are square by default (0px) to read as text rather than chips.

## Components

Button variants
- Primary button: 40px height; padding 14px 16px; pill radius 9999px; background #ffffff; text #272038. Use for the leading action per section.
- Secondary button: 40px height; padding 14px 16px; pill radius 9999px; text #ffffff; no fill by default; pair beside primary.
- Link button: Text-only, radius 0px; color #ffffff for on-dark contexts.

Card
- Background #18426a; text #ffffff; radius 8px; padding 16px. Use for feature tiles, code examples, and FAQ items.

### Hero Masthead
- Full-bleed image or media background with a dark overlay. Headline uses Exposure 64px/1/-0.07em. Supporting body at 15px Geist. Actions: primary and secondary side-by-side; keep 20–32px spacing.

### Video Teaser Dock
- Small media tile pinned near the hero copy. Card spec: 8px radius, on-surface text, optional sm shadow for lift. Include a caption like "Play release video."

### Logo Wall
- Monochrome client logos in a single row. Use border color #374151 for subtle separators if needed; 20–32px gap between marks.

### Three-Way Platform Grid
- Three equal cards for Creative, API, and Agents. Card: #18426a background, 8px radius, 16–32px internal padding. Headline MD (32px) + Body MD (15px). Include two actions per card where applicable.

### API Code Card
- Card with #18426a background, optional 1px #374151 border. Heading SM (24px) and a code block. Keep 16–32px padding and allow horizontal scroll on small screens.

### Enterprise Testimonial
- Quote set in Headline SM (24px) with 15px attribution. Use #374151 border top or side to anchor the block.

### Community Gallery
- Responsive image grid (3×N). Tiles adopt 8px radius; use sm shadow on hover for lift.

### FAQ Accordion
- Question set in Headline XS (20px) with 1px #374151 dividers. Answers use Body MD (15px). Expand/collapse chevrons align to the right; 16px inner padding.

### Footer Columns
- Multi-column link lists with small headings in Headline XS (20px). Surface can shift to brand-nero #262626 for contrast; links remain #ffffff.

## Do's and Don'ts

- Do reserve Exposure (64px, -0.07em) for marquee headlines; keep other headings in Geist for clarity.
- Do use the white primary pill (40px tall) as the main CTA on dark sections; pair a ghost secondary to its right.
- Do build spacing in 20/32/60/100px steps; avoid ad-hoc margins that break the section rhythm.
- Do keep borders subtle (#374151) and use the single sm shadow sparingly for media or overlays.
- Don't introduce additional shadow sizes or colored borders; depth is tonal.
- Don't square off interactive pills or mix radii; cards stay 8px, buttons are fully rounded.

## Agent Prompt Guide

Quick color reference — Text: #ffffff; Background: #18426a; Border: #374151; Accent: #272038.

1) Build the hero
- Background: full-bleed image with a dark overlay on #18426a.
- H1: Exposure, 64px, weight 400, line-height 1, letter-spacing -0.07em, color #ffffff.
- Body: Geist Variable (or Geist), 15px/1.53, color #ffffff at 80% opacity if needed.
- Primary CTA: 40px height, padding 14px 16px, radius 9999px, background #ffffff, text #272038.
- Secondary CTA: 40px height, padding 14px 16px, radius 9999px, text #ffffff.

2) Three-way features grid
- Grid: 3 columns, 32px gap.
- Card: background #18426a, text #ffffff, radius 8px, padding 16–32px.
- Titles: Geist Variable 24px/1.17; Descriptions: 15px/1.53.
- Buttons per card: primary + link per specs above.

3) API code block
- Wrapper card: #18426a with 1px border #374151, radius 8px, padding 32px.
- Heading: Geist Variable 24px; code text may reuse body (15px) with monospace fallback if needed.
- Include a copy button styled as link (#ffffff, radius 0px).

4) FAQ accordion
- Item wrapper: card spec (radius 8px, padding 16px) with a 1px #374151 divider between items.
- Question: Geist Variable 20px; Answer: 15px.
- Expand icon: text color #ffffff at 70% opacity.
- Keep section margin-top and margin-bottom at 60–100px.

## Similar Brands

- Runway: Dark creative AI with strong media and pill CTAs; Ideogram is calmer and more editorial with a serif hero.
- OpenAI: Product-led dark surfaces and clean grids; Ideogram adds bolder display type and more visual texture.
- Canva: Broad creative audience and gallery proof; Ideogram is darker and more technical, with API and agents foregrounded.
- Anthropic: Serious, research-driven tone; Ideogram is more expressive visually while keeping developer pathways prominent.

More like this

Browse AI →
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 15 hours ago
openlayer.com
Openlayer AI
Openlayer
Control your AI, layer by layer.
Homepage · 17 hours ago