What is Ideogram's primary brand color?

Ideogram has no chromatic primary in the load-bearing sense. The CTA is graphite black (#0e0e10) on a near-white canvas (#ffffff / #f6f6f7), and the page's structural workhorse is the hairline #e5e7eb, which appears 615 times on the captured surface — 581 of those as 1px border strokes. The only chromatic accents are a cyan #48bdff and a violet #7e4dda that surface inside small gradient marks (the brand glyph, the avatar dot, a hover borrow). Voltage is held in reserve.

What typography does Ideogram use, and what should I use as a substitute?

Ideogram runs Manrope across every text role on the marketing surface. Body sits at 13px / 16px leading at weight 600, secondary body at 14px / 18px also weight 600, h2 at 22px / 28px weight 700 with -0.88px tracking, the lone display at 36px / 45px weight 700, and a small label tier at 10px / 14px weight 700 in uppercase with 0.2px tracking. There is no weight-400 body and no weight-500 in the system — the page is weight 600 by default. If Manrope is unavailable, Plus Jakarta Sans is the closest open-source substitute; Inter at weight 600 also works but lacks Manrope's slightly geometric curves.

Why does almost everything sit at a 4px corner?

Ideogram is one of the rare AI surfaces in the 2024-2026 cohort that anchors on a 4px corner rather than 8px or 12px. The extracted radii distribution is heavily weighted to 4px (140 occurrences) with 8px (28) reserved for the prompt input, 6px (19) for chip-tier elements, 10px (11) on the primary CTA, and 12px (7) on a small set of cards. The 4px workhorse is the gallery tile and the inline action buttons — pull a tile to 8px and the wall starts reading as cards rather than a contact-sheet.

Why is the primary CTA graphite black instead of cyan?

The cyan #48bdff and the violet #7e4dda only ever appear inside small gradient marks — the brand glyph, an avatar tile, a hover-borrow on a thumbnail. Painting the Get Started CTA cyan would put brand voltage on the same plane as the generated tiles, which already carry every saturation in the visible spectrum. Graphite #0e0e10 reads as authoritative against the user's images without competing with them. The CTA is filled #0e0e10, text #ffffff, type 16px / 400 (the only weight-400 face on the surface), padding 0px 12px, height 40px, corner 10px.

What is the role of #e5e7eb on this page?

The hairline #e5e7eb is the most-used color in the extraction (615 occurrences) and 581 of those are border strokes, not fills. It draws the sidebar divider, the modal frame, every gallery-tile edge, the prompt input outline, and the avatar ring. Ideogram does not use shadow for elevation on the marketing surface — the hairline is the entire elevation system, paired with the near-white canvas. Treat it as structural infrastructure rather than a tint.

What's missing from this DESIGN.md spec?

A handful of items in the Known Gaps section. The model-selection chips, prompt-editor toolbar, and aspect-ratio picker live behind the sign-in wall on the captured surface, so their tokens are inferred from the visible row rather than the authenticated studio. Hero heading and h2 styles were not isolated by the extractor on this run (the modal occluded them), so the display-hero token is composed from the 36px / 700 entry in the typography table. Dark-mode tokens, animation timings, and form-validation states are not represented — the explore page never inverts to dark on the marketing surface.

Ideogram Design System

Ideogram's design system as a DESIGN.md file.

About Ideogram DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source ideogram.ai

AI & LLM Platforms
Design & Creative Tools

Ideogram is the image-and-typography generation studio behind one of the most legible AI image models, and its marketing surface is built so the gallery does the talking. The canvas is a near-white floor — "#ffffff" with a slightly cooler "#f6f6f7" beneath the sign-in modal — and the only chromatic accents are a cyan "#48bdff" and a violet "#7e4dda" that surface inside small gradient marks (the brand glyph, an avatar dot, the violet borrow on a hover state). The hero is the explore grid itself: irregular tile heights, full-bleed thumbnails, no captions on the tiles. Where most AI generators lead with a "What will you create?" headline at 60px or 72px, Ideogram renders the same prompt at 36px in Manrope 700 and lets the wall of generated images carry the page beneath it.

This DESIGN.md packages that restraint into a machine-readable spec built on the Google Labs format. Inside: 18 color tokens grouped into graphite text and surface ("#0e0e10", "#18181b", "#27272a"), near-white canvas ("#ffffff", "#f6f6f7"), the hairline lattice "#e5e7eb" (615 occurrences, 581 of them as 1px borders), and a small voltage pair of cyan "#48bdff" plus violet "#7e4dda" used only inside gradient marks. Eight Manrope tokens — display-hero at 36px / 700, h2 at 22px / 700 with -0.88px tracking, body-md at 13px / 600, label-uppercase at 10px / 700 / 0.2px tracking — plus six radii (4px, 6px, 8px, 10px, 12px, full) and seventeen component recipes.

Drop the file into Claude, Cursor, or GitHub Copilot and the agent will reproduce Ideogram's gallery-first discipline — graphite CTA on near-white, 4px corners everywhere except the 10px CTA, single-weight Manrope across roles — rather than defaulting to a generic AI-product theme with cyan brand buttons and oversized hero type. Or reference the tokens directly: every hex, padding shorthand, and tracking value is a quoted string ready for Tailwind config or CSS variables. The system is worth studying because it answers a hard category question by inversion: when the model is the product, the marketing chrome can disappear into hairlines.

What makes it distinct

Gallery-as-canvasgenerated tiles fill the viewport while the chrome shrinks to 13px Manrope labels and 1px hairlines in #e5e7eb
Single-weight disciplineManrope at weight 600 carries h1, body, nav, and CTA labels; no weight-400 body and no weight-700 display
Graphite voltagethe primary CTA is filled with #0e0e10 graphite black at a 10px corner, not the cyan or violet that appear elsewhere
4px corner workhorse140 of 209 measured radii sit at 4px, with 8px reserved for the input field and 10px for the CTA only
Hairline-heavy chrome581 of 615 occurrences of #e5e7eb are border strokes, the lattice the gallery floats on top of

Live at ideogram.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

ideogram.ai

Explore Ideogram

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Ideogram design system FAQ

Common questions about Ideogram's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Ideogram — official site

The image-and-typography generation studio behind the Ideogram model family.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Ideogram in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→