Ideogram Design System

Overview

Ideogram's marketing surface is the gallery-first archetype in the AI image-generation category — a near-white explore wall where the chrome shrinks to hairlines and the generated tiles do the talking. The canvas is {colors.canvas} ("#ffffff") with a slightly cooler {colors.canvas-cool} ("#f6f6f7") underneath the sign-in modal, and the page renders as a vertical stack of irregular thumbnails with no captions, no overlay metadata, no decorative chrome between rows. The brand wordmark, "What will you create?" prompt at 36px, and the input bar all sit in a thin band at the top; everything beneath is image.

Hairline-as-elevation: where most AI surfaces lean on shadow tiers to separate cards from canvas, Ideogram draws 581 of its 615 {colors.hairline} ("#e5e7eb") occurrences as 1px border strokes, not fills. The sidebar divider, the modal frame, every gallery-tile edge, the prompt input outline, and the avatar ring are all the same hairline. There is one stroke weight in the entire system, and depth is the lattice that 1px stroke draws. Drop shadows are absent — --tw-shadow is declared as a zero-alpha string in the page's :root.

Graphite voltage scarcity: the page declares a cyan {colors.cyan-accent} ("#48bdff") and a violet {colors.violet-accent} ("#7e4dda") in gradient marks (the brand glyph, an avatar dot, a hover-borrow), but the primary CTA is {colors.graphite} ("#0e0e10") — the same graphite that carries the page's text at 521 occurrences. Where the category convention is to spend brand color on the Get Started button, Ideogram refuses: the chromatic tints are reserved for tiny decorative marks, and the load-bearing CTA reads as authoritative graphite against the gallery's saturation. The model output is allowed to be the only thing on the page that's chromatic.

Single-weight body: Manrope runs at weight 600 across body-md (14px / 18px), body-sm (13px / 16px), heading-sm (14px / 21px / -0.56px tracking), and every sidebar link. There is no weight-400 body and no weight-500 step. The only weight-400 face on the page is the CTA label itself at 16px / 24px, and the only weight-700 faces are the 36px display, the 22px h2, and the 10px uppercase micro label. The hierarchy is built from size, not weight.

Key Characteristics:

• Near-white canvas {colors.canvas} ("#ffffff") paired with {colors.canvas-cool} ("#f6f6f7") underneath modal scrims. The defining surface choice — no dark mode on the marketing surface.
• Manrope at weight 600 across body, sidebar, chips, and headings. The single-weight discipline is the typographic identity.
• Hairline {colors.hairline} ("#e5e7eb") drawn as 1px stroke 581 of 615 times. The entire elevation system.
• Graphite {colors.graphite} ("#0e0e10") as both ink and primary CTA fill. Brand color hides inside text, not behind buttons.
• 4px corner {rounded.xs} ("4px") on 140 of the page's measured radii. The gallery-tile geometry.
• Cyan {colors.cyan-accent} ("#48bdff") and violet {colors.violet-accent} ("#7e4dda") only appear inside small gradient marks. Visible in the brand glyph, absent from CTAs and body emphasis.
• Section labels in {typography.label-uppercase} (10px / 700 / 0.2px tracking, uppercase). Used only on sidebar group headers — the page's lone tracking signal.
• Three CTA shapes — {components.button-primary} (graphite-filled, 10px corner), {components.button-secondary} (white-on-hairline, 10px corner), {components.filter-chip} (4px corner with hairline border).

Colors

Ink & graphite

• Graphite ({colors.graphite} — "#0e0e10") — frequency 538. Used as text (521), shadow (14), background (2), border (1). The page's load-bearing ink and the primary CTA fill. Wired across nav links, sidebar text, body copy, and the Get Started button face. Reads as graphite-black, never pure void.
• Graphite Soft ({colors.graphite-soft} — "#18181b") — frequency 4. Used as background (4). The hover-darker shade behind the primary CTA and the inline avatar circle in the top nav.
• Graphite Elevated ({colors.graphite-elev} — "#27272a") — frequency 9. Used as text (5), border (4). The single-tone-up graphite for hover affordances on outlined chips.
• Ink Muted ({colors.ink-muted} — "#585964") — frequency 1. Used as text (1). The section-label color in the sidebar — the one tone between graphite text and the lighter hairline tier.
• Ink Faint ({colors.ink-faint} — "#9b9ba1") — frequency 2. Used as text (2). Tertiary captions inside the modal and below dropdown labels.
• Silver ({colors.silver} — "#ccccce") — frequency 28. Used as gradient (28). The gradient stop that defines the soft-fade behind the brand glyph and avatar marks.

Canvas

• Canvas ({colors.canvas} — "#ffffff") — frequency 191. Used as background (45), text (81), gradient (35), border (30). The dominant surface plus the inverse text color on graphite CTAs. Wired to --tw-ring-offset-color.
• Canvas Cool ({colors.canvas-cool} — "#f6f6f7") — folded into the canvas cluster. The slightly-cooler floor beneath modal scrims and the sidebar rail.
• Canvas Mist ({colors.canvas-mist} — "#f7f7f8") — the third stop in the white cluster, used as the rest state for sidebar links.
• Void ({colors.void} — "#000000") — frequency 10. Used as text (6), shadow (4). The pure-black drop-shadow stop on dropdown popovers (rare — drop shadows are otherwise absent).

Hairline lattice

• Hairline ({colors.hairline} — "#e5e7eb") — frequency 615. Used as border (581), background (28), gradient (6). The structural workhorse — every 1px stroke on the page is this tone. Not used as a fill or a text color.
• Hairline Soft ({colors.hairline-soft} — "#ececee") — clustered into the hairline group. The hover/selected fill on sidebar links — the only place the lattice tone appears as a background plane.
• Hairline Faint ({colors.hairline-faint} — "#eeebfc") — the violet-tinted hairline that surfaces inside the sign-in modal frame border.

Voltage (reserved)

• Cyan Accent ({colors.cyan-accent} — "#48bdff") — frequency 6. Used as gradient (6). Surfaces only inside the brand glyph mark — never on CTAs, never on body emphasis, never on links. The chromatic identity held in reserve.
• Cyan Tint ({colors.cyan-tint} — "#d6efff") — frequency 6. Used as gradient (6). The lighter stop in the brand glyph gradient.
• Violet Accent ({colors.violet-accent} — "#7e4dda") — frequency 1. Used as text (1). The borrowed accent that appears on a single inline link inside the modal copy ("by continuing you agree…").
• Violet Mid ({colors.violet-mid} — "#8864e4") — frequency 1. Used as border (1). The 1px ring on the avatar pip when hovered.

Typography

Font family

The system runs Manrope across every text role on the marketing surface — display, h2, body, sidebar, chips, the lone uppercase label. The fallback stack walks system-ui, -apple-system, sans-serif. Manrope is the only family declared on the page; there is no monospace, no serif, no secondary sans. The brand wordmark itself is set in Manrope.

Hierarchy

Principles

The body sits at weight 600 by default — not 500, not 400. Where most product surfaces ladder weight 400 body / 600 strong / 700 display, Ideogram skips the 400 step entirely on chrome and reserves 700 for the 36px hero, the 22px h2, and the 10px uppercase label. The CTA label inverts the convention by dropping to weight 400 at 16px — the lighter weight reads as confident against the graphite fill rather than shouting. There is no italics, no underline-on-default, and no all-caps below 10px.

Substitutes

If Manrope is unavailable, Plus Jakarta Sans is the closest open-source substitute — both share a slightly geometric, slightly humanist set of curves at the 13-14px body sizes Ideogram leans on. Inter at weight 600 is the next-closest match but reads a hair more neutral than Manrope's character. Avoid SF Pro and Roboto — they collapse the wordmark's specific shoulder.

Layout

Spacing system

• Base unit: 4px.
• Tokens: {spacing.xxs} ("2px") · {spacing.xs} ("4px") · {spacing.sm} ("8px") · {spacing.md} ("12px") · {spacing.base} ("16px") · {spacing.lg} ("24px") · {spacing.xl} ("32px") · {spacing.2xl} ("48px").
• Gallery padding: 4px 4px 48px (28 occurrences) — the dominant grid padding shorthand, tight on three sides and generous at the bottom.
• Pill chip padding: 6px 10px (9 occurrences) — the universal filter-chip geometry that carries every sidebar action button.
• Prompt-input padding: 0px 124px 0px 24px (6 occurrences) — asymmetric to make room for the submit pip on the right.

Grid & container

• Gallery composition: vertical masonry — irregular tile heights (square, tall portrait, short landscape) packed at 4px gutters in a 3-up to 5-up grid depending on viewport. No captions on the tiles themselves.
• Sidebar rail: fixed left rail with {components.sidebar-link} items at 32px row height. Carries top-level nav ("Home", "My Images", "Collections", "My Boards") and a label-uppercase divider ("CREATE", "TOOLS") between sections.
• Hero band: centered single column above the gallery with the 36px display prompt and the {components.prompt-input} (~56px height) directly beneath.
• Sign-in modal: centered overlay at {rounded.xl} (12px) corner, ~360px wide, padded 24px on all sides, hairline border on the canvas-cool scrim.

Rhythm

The page anchors on a 12px vertical rhythm inside the sidebar rail and a 4px gutter inside the gallery. There is no luxury 64px or 96px section spacing — the gallery starts ~16px below the prompt input and runs full-bleed to the footer. The hierarchy lives in tile saturation, not in vertical whitespace.

Elevation & Depth

The elevation philosophy is hairline-as-elevation — depth comes from a 1px stroke in {colors.hairline} rather than from CSS box-shadow. The page's :root declares --tw-shadow as a zero-alpha rest state, and most surfaces honor it. The single observed shadow lives on dropdown popovers (graphite at 8% alpha, 0px 0px 8px) and is the only depth primitive that lifts above the lattice.

The gallery tiles supply their own visual depth through image saturation — generated thumbnails carry every chromatic range the chrome refuses to render. The wall reads as a contact-sheet floating on the lattice rather than a stack of cards casting shadows.

Shapes

Border radius scale

The radius ladder is unusually granular — 4px, 6px, 8px, 10px, 12px — but each tier is wired to a specific role, not interchangeable. A gallery tile is always 4px; an input is always 8px; the primary CTA is always 10px. Where most current-generation systems collapse to a 3-tier scale (sm / md / full), Ideogram keeps five interior tiers so the chrome reads as graded rather than uniform.

Imagery & illustrations

The gallery is the page's dominant visual asset — irregular generated thumbnails covering photography, typography, posters, character studies, illustrations. The brand glyph (the only place the cyan-and-silver gradient appears) is a small circular mark in the top-left of the sidebar. There is no decorative illustration, no hand-drawn line work, no marketing photography — only model output and the wordmark.

Components

Top navigation

{components.top-nav} — Light nav bar pinned to the top of the page. Background {colors.canvas} ("#ffffff"), text {colors.graphite}, 1px bottom border in {colors.hairline}. Carries the brand glyph at left, the search field at center, and the avatar pip at right. Padding "12px 16px", height "56px".

Sidebar

{components.sidebar-rail} — Fixed-left navigation rail. Background {colors.canvas}, 1px right border in {colors.hairline}, padding "12px". Stacks {components.sidebar-link} rows and section labels.

{components.sidebar-link} — Default rail row. Background transparent, text {colors.graphite}, type {typography.body-sm} (Manrope 13px / 600), rounded {rounded.xs} (4px), padding "6px 10px", height "32px".

{components.sidebar-link-active} — Hover/selected rail row. Background {colors.hairline-soft} ("#ececee"), same type and geometry. The only place the lattice tone appears as a fill rather than a stroke.

{components.sidebar-section-label} — Uppercase group label. Text {colors.ink-muted} ("#585964"), type {typography.label-uppercase} (Manrope 10px / 700 / 0.2px tracking). Padding "8px 12px 4px".

Hero & prompt

{components.hero-prompt} — The 36px "What will you create?" display headline. Type {typography.display-hero} (Manrope 36px / 700 / 45px leading), text {colors.graphite}, padding "0". The only display-tier face on the page.

{components.prompt-input} — The wide prompt field beneath the hero headline. Background {colors.canvas}, type {typography.body-md}, rounded {rounded.md} (8px), padding "0px 124px 0px 24px" (asymmetric to clear the submit pip), height "56px", 1px hairline border in {colors.hairline}.

{components.prompt-submit} — Circular submit pip anchored inside the prompt input. Background {colors.graphite}, text {colors.on-graphite}, rounded {rounded.full} (9999px), height "32px". The only graphite mark inside the input.

Buttons

{components.button-primary} — The signature CTA. Background {colors.graphite} ("#0e0e10"), text {colors.on-graphite}, type {typography.button-md} (Manrope 16px / 400 — the only weight-400 face on the page), rounded {rounded.lg} (10px), padding "0px 12px", height "40px". Used for "Get started" in the top nav and the primary action throughout.

{components.button-primary-hover} — Hover variant. Background shifts to {colors.graphite-soft} ("#18181b") — a single tone-up rather than a shadow lift.

{components.button-secondary} — Outlined light pill. Background {colors.canvas}, text {colors.graphite}, type {typography.body-md} (Manrope 14px / 600), rounded {rounded.lg} (10px), padding "6px 10px", height "32px", 1px border in {colors.hairline}. Used for "Sign in" affordances and secondary actions.

Filter chips

{components.filter-chip} — Rest-state filter pill in the explore toolbar. Background {colors.canvas}, text {colors.graphite}, type {typography.body-sm} (Manrope 13px / 600), rounded {rounded.xs} (4px — not pill-shaped), padding "6px 10px", height "28px", 1px border in {colors.hairline}.

{components.filter-chip-active} — Selected filter chip. Background {colors.graphite}, text {colors.on-graphite}, same geometry. The graphite fill is the only selection indicator — no border lift, no shadow.

Gallery

{components.gallery-grid} — The dominant page surface. Background {colors.canvas}, padding "4px 4px 48px" (the 28-count grid padding). Stacks {components.gallery-tile} items in a masonry layout.

{components.gallery-tile} — A single generated-image tile. Background {colors.hairline-soft} ("#ececee") as the skeleton fill before the image loads, rounded {rounded.xs} (4px), 1px border in {colors.hairline}. Carries no caption overlay at rest.

Sign-in modal

{components.sign-in-modal} — Centered overlay. Background {colors.canvas}, text {colors.graphite}, type {typography.body-md}, rounded {rounded.xl} (12px), padding "24px", 1px border in {colors.hairline}. Stacks the title, three OAuth buttons, and the terms line in a vertical column.

{components.oauth-button} — A single sign-in option (Google, Apple, Microsoft). Background {colors.graphite}, text {colors.on-graphite}, type {typography.body-md}, rounded {rounded.md} (8px), padding "12px", height "44px". Three stack vertically inside the modal.

Brand mark

{components.brand-glyph} — The wordmark's cyan glyph. Background {colors.cyan-accent} ("#48bdff") gradient-blending to {colors.silver} ("#ccccce"), rounded {rounded.full} (9999px). The only place the cyan voltage surfaces on the page.

Do's and Don'ts

Do

• Anchor every page on the near-white canvas — {colors.canvas} ("#ffffff") paired with {colors.canvas-cool} ("#f6f6f7") for modal scrims. Inverting to dark on the marketing surface breaks the gallery's contact-sheet read.
• Render every text role in Manrope at weight 600 unless it's the 36px display (700), the 22px h2 (700), the 10px uppercase label (700), or the CTA label (400). The single-weight discipline is the typographic identity.
• Reserve {colors.cyan-accent} ("#48bdff") and {colors.violet-accent} ("#7e4dda") for gradient marks only. Painting a CTA cyan puts brand voltage on the same plane as the generated tiles.
• Use 4px corners on gallery tiles, sidebar links, and chips. Pulling tiles to 8px makes the wall read as cards rather than a contact-sheet.
• Use the graphite-soft hover ({colors.graphite-soft} — "#18181b") on the primary CTA — a single tone-up, not a shadow lift.
• Treat {colors.hairline} ("#e5e7eb") as the entire elevation system. Add a shadow tier and the lattice's structural role collapses.

Don't

• Don't use {colors.cyan-accent} ("#48bdff") on text or CTA fills — it appears only as a gradient stop (6 occurrences, all gradient), never as a flat fill on chrome. For a chromatic accent on type, use {colors.violet-accent} ("#7e4dda") on a single inline link rather than spreading either tone across links.
• Don't pull the primary CTA to a 4px or 6px corner. The 10px radius is wired to one component — the {components.button-primary} — and dropping it makes the button read as a chip.
• Don't run body type at weight 400. The page's only weight-400 face is the CTA label at 16px; switching {typography.body-md} to 400 collapses the single-weight discipline.
• Don't apply drop shadows below the dropdown tier. The page declares --tw-shadow as a zero-alpha rest state and renders zero shadows on cards, inputs, or the modal. The lattice is the depth system.
• Don't use a 4px radius on the prompt input. The 8px corner is the one tier that separates the input from the chip row — drop it to 4px and the input reads as a chip-of-chips.
• Don't pair Manrope with a serif display. The single-family discipline is the brand signature — switching the 36px hero to a serif inverts the gallery-first framing.

Known Gaps

• The model-selection chips, prompt-editor toolbar, and aspect-ratio picker live behind the sign-in wall on the captured surface. Their tokens are inferred from the visible sidebar rail and the prompt input rather than the authenticated studio.
• The hero heading and h2 extractor entries returned null on this run (the sign-in modal occluded the underlying text). The display-hero token is composed from the 36px / 700 row in the typography table; the display-h2 from the 22px / 700 / -0.88px row.
• Dark-mode tokens are not declared in the captured :root — the explore page never inverts on the marketing surface, and any in-app dark mode would need a separate extraction.
• Animation timings, focus rings on the prompt input, and the exact hover deltas on gallery tiles are not captured. The page's interactivity is too subtle to read from a static snapshot.
• Form-validation states beyond the rest input (error, success, warning) are not represented — the prompt input never errored on the captured surface.
• The cyan and violet gradient marks (brand glyph, avatar pip) are treated as content assets rather than system tokens. Their exact gradient stops and angles are not formalized here.