Ideogram

Overview

Ideogram embodies 'Refined Minimalism'—a design philosophy that strips away ornamentation to reveal the essential. The visual language prioritizes typography as the primary design element, with Exposure serif headlines commanding attention through scale and weight rather than color. The palette is deliberately restrained: warm cream backgrounds (#fffdfb, #fff9f4) paired with deep ink (#232425) create high contrast for legibility, while a single accent color—the brand's signature lavender (#bd9fff)—punctuates key interactions and moments of emphasis. The aesthetic evokes a contemporary design studio: intentional, confident, and uncluttered.

The brand voice is precise and forward-thinking. Ideogram speaks to creative professionals and AI practitioners with clarity and respect for their intelligence. Sentences are direct, avoiding hype; vocabulary is technical when warranted but never jargon-heavy. The tone balances accessibility with sophistication—never condescending, always purposeful. Example: 'Prompt fidelity. Crystal-clear type. Reliable editing. A model made for people who need images to hold up beyond the prompt box.'

Colors

The color system operates on a principle of 'intentional restraint.' The primary surface palette—cream (#fffdfb), paper white (#fffdfb), and off-white (#fff9f4)—creates a warm, inviting canvas that reduces eye strain during extended design work. Text color is a near-black ink (#232425), chosen for its softness compared to pure black (#000000) while maintaining WCAG AAA contrast (21:1 ratio at 16px). This pairing is applied across all body text, labels, and interface elements.

The secondary accent color is a sophisticated lavender (#bd9fff), used sparingly on primary CTAs, hover states, and status indicators. This color appears in approximately 2-3% of the interface, creating visual hierarchy without overwhelming the composition. Supporting colors include a muted gray (#606066) for seconda

Typography

The type system pairs two distinct typefaces to create visual rhythm and hierarchy. Exposure—a high-contrast serif—is reserved exclusively for display and headline levels (74px, 48px, 34px), where its elegant proportions and dramatic serifs command attention. All body, label, and interface text uses Geist Variable, a contemporary geometric sans-serif optimized for screen legibility at small sizes. This pairing creates a clear cognitive distinction: serifs signal editorial content and brand voice, while sans-serif handles functional UI.

Typographic hierarchy is reinforced through scale and weight rather than color. Display text (74px, 400 weight, -0.02em tracking) sets the page narrative; headlines (48px, 400 weight) introduce sections; body text (16px, 400 weight, 24px line-height) mainta

Layout

The layout system uses a 12-column grid with a maximum container width of 1360px, maintaining readability on ultra-wide displays while preventing line lengths from exceeding 80 characters. The spacing scale is semantic and hierarchical: unit (2px) for micro-adjustments, xs (4px) for tight grouping, sm (12px) for related elements, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for page-level spacing. Gutters are consistently 24px on desktop, collapsing to 12px on mobile.

White space is treated as a design material, not a void. Sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. Cards and containers use md padding (24px) internally, with sm gaps (12px) between child elements. The design avoids centered t

Elevation & Depth

Depth in this system is achieved through subtle layering and shadow, not through dramatic color shifts. The elevation scale uses three distinct shadow values: sm (0 1px 2px rgba(35, 36, 37, 0.08)) for base cards and subtle separation, md (0 4px 12px rgba(35, 36, 37, 0.12)) for elevated cards and hover states, and lg (0 16px 40px rgba(35, 36, 37, 0.1)) for modals and floating elements. Shadows use the brand ink color at low opacity to maintain color harmony.

Level 1 (Base): The page background is surface (#fffdfb) with no shadow. Level 2 (Standard Card): Cards use 1px solid border at rgba(35,

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used functionally, not decoratively. Buttons and interactive elements use full border-radius (999px) to create a soft, approachable pill shape that signals interactivity. Standard cards and containers use 8px (DEFAULT) for subtle rounding that softens corners without appearing playful. Input fields use 8px to match cards, creating visual consistency. Larger containers and elevated surfaces use 10-12px (md/lg) to add visual distinction without breaking the geometric language.

The rationale: full-radius buttons (999px) are instan

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background #232425 (primary ink) with white text, 44px height, 0 16px padding, and full border-radius (999px). On hover, the background shifts to #f1f1f2 (primary-container) with ink text, maintaining the same dimensions. The transition uses 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes. Secondary buttons use a light background (#fff9f4) with ink text and a 1px border at rgba(35, 36, 37, 0.12); on hover, the background becomes #f5f1ed. Accent buttons (e.g., 'Try in App') use the brand lavender (#bd9fff) with white text; on hover, darken to #a87fe8. All buttons use label-md typography (13px, 500 weight) for consistent sizing across the interface.

Containers & Surfaces Cards are the pr

Do's and Don'ts

**Do**

• Do use Exposure serif for all display and headline text (74px, 48px, 34px) to establish editorial authority and brand voice.
• Do maintain the cream-to-ink contrast ratio (21:1) for all body text to ensure WCAG AAA accessibility at 16px and above.
• Do apply lavender (#bd9fff) sparingly—only on primary CTAs, hover states, and status indicators—to preserve its visual impact.
• Do use full border-radius (999px) on all buttons to create instant visual recognition of interactivity.
• Do separate sections with lg spacing (40px) to create breathing room and reduce cognitive load.
• Do apply transitions at 150ms cubic-bezier(0.4, 0, 0.2, 1) on all interactive state changes for consistent, purposeful motion.

**Don't**

• Don't use color to convey hierarchy in body text—use scale, weight, and typography pairing instead.
• Don't apply shadows larger than lg (0 16px 40px) or use blur effects; the system relies on clean borders and precise layering.
• Don't use border-radius values between 13px and 998px; stick to the defined scale (4px, 8px, 10px, 12px, 16px, 999px).
• Don't mix Exposure and Geist at the same size level; Exposure is for headlines only, Geist for all functional UI.
• Don't center-align body text or use centered layouts for content; left-align for professional, editorial feel.
• Don't apply the lavender accent color to more than 2-3% of the interface; overuse dilutes its impact and creates visual noise.