# Ideogram · Design system migration spec

> Source: https://ideogram.ai  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in applying editorial design principles to a modern tech product, creating a sophisticated and trustworthy brand identity.

## 1. Identity DNA

The Ideogram design system begins with a deliberate collision of disciplines: the precise authority of a high-end design studio fused with the clean, functional clarity of a modern technology startup. This identity is built on a foundation of confident minimalism, where every element serves a purpose and the visual language speaks with the assured tone of a premium publication.

**One-liner:** A premium AI image generation platform with a refined, editorial aesthetic.
**Keywords:** AI · image generation · design · open source · typography
**Analogy:** A high-end design studio merged with a modern tech startup.

## 2. Color

The color system is defined by a high-contrast editorial palette, using a warm off-white (#FFF9F4) base that avoids the sterile feel of pure white. This is paired with dark ink for legibility and a signature lavender accent (#BD9FFF) reserved exclusively for interactive elements, creating a clear visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF9F4` | main background |
| `--bg-soft` | `#EDE7E0` | card background |
| `--ink` | `#232425` | body text |
| `--ink-soft` | `rgba(35,36,37,0.72)` | secondary text |
| `--muted` | `rgba(35,36,37,0.72)` | placeholder |
| `--muted-soft` | `rgba(255,249,244,0.72)` | weak hint |
| `--accent` | `#BD9FFF` | single accent |
| `--line` | `rgba(35,36,37,1.0)` | divider |

**Color principle:** High-contrast editorial palette with a warm, off-white base and a vibrant lavender accent for interactive elements.

The palette's restraint ensures content and imagery remain the primary focus, with color acting as a functional guide rather than a decorative flourish.

## 3. Typography

Typographic voice is split between two distinct categories: a high-contrast didone-serif commands display headlines with tight tracking for impact, while a clean humanist sans-serif carries body text for optimal readability. Small text and labels use uppercase tracking to create a distinct, navigational sub-layer.

- **Display:** didone-serif
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 74px | 1.0 | 400 | -5.18px | Hero headline |
| h1 | 48px | 1.1 | 400 | -3.08px | Section headlines |
| body | 16px | 1.5 | 400 | 0px | Default body text |
| caption | 11px | 1.2 | 500 | 0.11px | Breadcrumbs and labels |

**Type rules:**
- Display type is a high-contrast serif with tight tracking.
- Body text uses a clean humanist sans-serif.
- Small text uses uppercase tracking for labels and navigation.

## 4. Spacing

Spacing follows a generous, vertical rhythm, with major section blocks typically set apart by 80px of padding to establish clear visual breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is established through generous padding, typically 80px on major section blocks.

## 5. Surfaces

Surface treatments are intentionally understated, using a subtle, near-invisible box-shadow (rgba(35, 36, 37, 0.08)) to lift elements from the warm background. Borders are minimal—a single, dark 1px line (#232425) provides structure without weight.

- **Radius:** sm 4px · md 8px · lg 19px · pill 999px
- **Shadows:**
  - rgba(35, 36, 37, 0.08) 0px 1px 2px 0px
- **Borders:** 1px solid #232425

## 6. Layout

The layout skeleton begins as a spacious, single-column editorial format designed to frame content with ample whitespace. For feature showcases, this expands into a multi-column grid, allowing for structured comparisons while maintaining the system's core principle of generous padding.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A single-column editorial layout that expands into a multi-column grid for feature showcases.

## 7. Motion & Interaction

Motion is minimal and purposeful, favoring utility over spectacle. Transitions are brief (0.16s to 0.18s) and limited to color, background, and border properties, with content reveals using simple fades and slides.

- **Durations:** micro 150ms · small 180ms · medium 450ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Fade and slide for content transitions.
  - Hover color and background shifts on interactive elements.

- **Hover:** Subtle color shifts and opacity changes.
- **Click:** Immediate visual feedback with no complex animations.
- **Transition:** 0.16s to 0.18s transitions for color, background, and border properties.
- **Keyboard:** Standard tab-based focus for navigation and buttons.

## 8. Voice & Don'ts

The editorial voice is confident, professional, and design-focused, delivering concise, impactful statements in headlines and direct, action-oriented copy for calls to action. This tone extends to a deliberate avoidance of jargon, overly casual language, and visual clutter.

- **Tone:** Confident, professional, and design-focused.
- **Headline style:** Concise, impactful statements using a large serif font.
- **CTA style:** Direct and action-oriented, often using pill-shaped buttons.
- **Avoid:** Jargon-heavy technical descriptions / Overly playful or casual language / Cluttered layouts

### Don'ts
- ❌ Don't use a bright white (#FFFFFF) for the primary background — the screenshot shows a warm off-white (#FFF9F4) instead.
- ❌ Don't use generic sans-serif for headlines — the screenshot shows a high-contrast serif font.
- ❌ Don't use a standard blue for accents — the screenshot shows a distinct lavender (#BD9FFF) for interactive elements.
- ❌ Don't use sharp, square corners on buttons — the screenshot shows fully rounded, pill-shaped buttons.
- ❌ Don't use heavy, blocky shadows — the screenshot shows very subtle, almost invisible box-shadows.
- ❌ Don't use a dense, cramped layout — the screenshot shows generous whitespace and padding around content blocks.

The system deliberately forgoes bright white backgrounds, generic sans-serif headlines, and square corners to preserve its signature refined and trustworthy aesthetic.

## System Prompt (paste into AI tool)

```
A premium AI image generation platform with a refined, editorial aesthetic. The design relies on a high-contrast palette featuring a warm off-white (#FFF9F4) background, dark ink (#232425), and a vibrant lavender accent (#BD9FFF). Typography pairs a high-contrast didone-serif for headlines with a clean humanist-sans for body text. Critical don'ts: avoid pure white backgrounds, avoid generic sans-serif headlines, and avoid square corners on buttons. The layout is spacious and editorial, prioritizing clarity and visual impact.
```
