--- version: alpha name: Ideogram description: A bright white creative studio where Exposure VAR headlines in tight negative tracking meet Manrope's precision in the UI, a lime-green badge is the only chromatic signal in an otherwise near-monochrome system, and a frosted-glass prompt bar floated on pure white invites you to make something. colors: # Surface / canvas background: "#ffffff" # pure white — the app's open creative canvas surface: "#f4f4f5" # soft-gray fills for active nav items, chips, tool tiles surface-muted: "#f7f7f8" # faint warm-white hover wash, alternate rows surface-dark: "#232425" # near-black sidebar, primary button fill, generate icon prompt-glass: "#f2f2f3" # was rgba(255,255,255,0.95) — Google format requires hex; frosted prompt bar # Ink / text ink: "#232425" # near-black primary text, headings, nav labels ink-secondary: "#767679" # muted labels, section headers, placeholder text — darkened from #a5a5ac for min 3:1 on white ink-muted: "#585964" # captions, metadata, lower-emphasis copy on-dark: "#ffffff" # white text / icons on the near-black surface on-badge: "#458209" # deep forest-green label on the lime badge # Brand accent — the lime signal accent: "#d4fe9a" # the lime-green "NEW" badge fill; the one chromatic note in the chrome accent-hover: "#c5f77a" # slightly deeper lime for hover on accent elements accent-text: "#458209" # forest-green text used on the lime badge # State surface-hover: "#ebebec" # hovered chip / nav item (slightly darker than surface) focus-ring: "#2563eb" # Tailwind default ring color for keyboard focus # Borders border: "#e5e7eb" # standard hairline — horizontal dividers, card edges border-mid: "#e2e2e4" # slightly stronger separator, input outlines # Shadow tint (opaque approximation — elevation table) shadow-soft: "#0e0e10" # was rgba(14,14,16,0.03) — Google format requires hex; multi-layer panel shadow typography: display-hero: fontFamily: "\"Exposure VAR\", sans-serif" fontSize: 44px fontWeight: 400 lineHeight: 1.0 letterSpacing: -2.64px display: fontFamily: "\"Exposure VAR\", sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1.6px heading: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: -0.48px heading-sub: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: -0.18px body-large: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-label: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px label: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px caption: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0px badge-label: fontFamily: "Manrope, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 48px 5xl: 64px 6xl: 96px rounded: sm: 6px md: 10px lg: 16px xl: 28px badge: 40px full: 9999px components: button-primary: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 20px button-primary-hover: backgroundColor: "#3a3b3c" textColor: "{colors.on-dark}" button-primary-active: backgroundColor: "#181819" textColor: "{colors.on-dark}" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 12px border: 1.5px solid {colors.border-mid} button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 6px 10px button-ghost-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" button-generate: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.full}" padding: 10px 10px button-generate-hover: backgroundColor: "#3a3b3c" textColor: "{colors.on-dark}" nav-item: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-label}" rounded: "{rounded.md}" padding: 6px 10px nav-item-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" nav-item-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" prompt-bar: backgroundColor: "{colors.prompt-glass}" textColor: "{colors.ink}" typography: "{typography.body-large}" rounded: "{rounded.xl}" padding: 12px 20px prompt-bar-focus: backgroundColor: "{colors.prompt-glass}" textColor: "{colors.ink}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 20px card-hover: backgroundColor: "{colors.surface-muted}" textColor: "{colors.ink}" image-tile: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0px badge: backgroundColor: "{colors.accent}" textColor: "{colors.on-badge}" typography: "{typography.badge-label}" rounded: "{rounded.badge}" padding: 2px 8px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-large}" rounded: "{rounded.md}" padding: 10px 14px border: 1.5px solid {colors.border-mid} input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" chip: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 6px 12px chip-hover: backgroundColor: "{colors.surface-hover}" textColor: "{colors.ink}" modal: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 20px --- # Ideogram Design System ## Overview Ideogram is built around a single, poetic promise: any idea can become an image. The interface honors that promise with unusual restraint. The canvas is pure white (`{colors.background}`), almost aggressively so — a blank page that insists the generated image will be the most interesting thing on it. There are no gradient heroes, no saturated brand panels. The near-black `{colors.surface-dark}` appears only where something truly needs to be done: the sidebar itself, the primary CTA, the generate arrow. Everything else recedes into white and pale-gray neutrals. The signature visual move is typographic. A display variable font called **Exposure VAR** sets the page headline at 44px with -2.64px letter spacing — tight, editorial, slightly unconventional for a tool that is often described as accessible. It reads more like a magazine cover than a SaaS dashboard. The moment you start typing into the frosted-glass prompt bar (`{colors.prompt-glass}`, `{rounded.xl}` radius), the interface steps back further, and the only invitation is the near-black circular arrow button. Below the headline, **Manrope** — a geometric humanist sans at weights 400 through 700 — handles the entire remaining UI: nav labels, chips, captions, modal text. The contrast between Exposure VAR's expressive headline and Manrope's precision creates a productive tension: this is a creative tool that also works. Color is used as pure signal. The entire system is near-monochrome except for a single lime-green badge (`{colors.accent}`) that marks new features. That lime — electric but small — is the only chromatic note in the chrome. It appears once in the nav as a "NEW" pill next to Apps, then nowhere else. The shadow system is a six-layer soft cloud on white cards, so subtle it reads as paper thickness rather than depth. The result is an interface that feels physically quiet and mentally open: you arrive at a white page with a blinking cursor and the question "What will you create?" **Key Characteristics:** - Pure white canvas (`{colors.background}`) — no tinted backgrounds, no gradient headers; the page is a blank page - **Exposure VAR** (variable display font) at 44px / -2.64px tracking for the hero headline — editorial, not SaaS - **Manrope** (geometric humanist sans, weight 200–800) for the entire UI: nav, labels, buttons, captions - Near-black `{colors.surface-dark}` reserved for the sidebar column, primary CTA, and the generate icon button - A frosted-glass prompt bar with `{rounded.xl}` (28px) radius and white-tinted fill (`{colors.prompt-glass}`) - A single chromatic signal: lime-green `{colors.accent}` badge, used only for "NEW" feature labels - Soft-gray surface `{colors.surface}` (10px radius) for active nav items and chips — gentle, not heavy - Multi-layer low-opacity shadow on floating cards (`{colors.shadow-soft}`) — more paper texture than depth - `nova-*` custom component system on top of MUI — `nova-base-button`, `nova-pill-button`, `nova-badge` - 10px rounded corners on all interactive controls; 16px on cards; 28px on the prompt bar; 40px on badges - Hairline borders `{colors.border}` only where structural separation is truly needed - Typography categories: text is in `{colors.ink}` at weights 400/500/600/700; secondary in `{colors.ink-secondary}` ## Colors ### Surface & Canvas - **Pure White** (`{colors.background}`): The complete application background — no ambient tint, no gradient. The white invites generation. - **Soft Gray** (`{colors.surface}`): Active nav items, chips, and hover states on the white ground. 10px radius tiles. - **Faint Gray** (`{colors.surface-muted}`): Subtle alternate fills, hover washes; lighter than `{colors.surface}`. - **Near-Black** (`{colors.surface-dark}`): The sidebar column, the "Get started" and primary CTA buttons, the generate icon. The only real dark mass in the interface. - **Frosted Glass** (`{colors.prompt-glass}`): The prompt bar fill — a near-white with slight translucency baked into the opaque token, layered over the white canvas. ### Ink / Text - **Primary** (`{colors.ink}`): Near-black at `#232425` — all body text, nav labels, button labels. Comfortable contrast on white without harsh pure-black. - **Secondary** (`{colors.ink-secondary}`): Muted gray for section headers (Library, Tools, API), placeholder text, supporting copy. - **Muted** (`{colors.ink-muted}`): Captions, metadata, lowest-emphasis help text. - **On Dark** (`{colors.on-dark}`): White text and icons that sit on `{colors.surface-dark}` surfaces. - **On Badge** (`{colors.on-badge}`): Deep forest-green label text inside the lime badge. ### Brand Accent - **Lime Badge** (`{colors.accent}`): The singular chromatic signal — a lime-green pill marking new features. Never used as a surface fill for whole panels. Forest-green text (`{colors.accent-text}`) ensures legibility. ### Borders & Shadows - **Hairline** (`{colors.border}`): Section dividers and card edges. Standard at `#e5e7eb`. - **Mid Border** (`{colors.border-mid}`): Input outlines, slightly stronger separators at `#e2e2e4`. - **Shadow Soft** (`{colors.shadow-soft}`): Base tone for the multi-layer card shadow (original values `rgba(14,14,16,0.02–0.03)` — opaque token used in the elevation table). ## Typography ### Font Families - **Display / Hero**: `Exposure VAR` — a variable-axis expressive display typeface. Used for the main "What will you create?" question and hero-scale text. Fallback: `sans-serif`. Real italic / weight axes vary; this system keeps it at weight 400 with extreme negative tracking. - **UI / Body**: `Manrope` — loaded via Google Fonts at `wght@200..800`. A geometric humanist sans with warm curves. Fallback stack: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif`. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 44px / 400 / -2.64px — the app headline ("What will you create?") | | `display` | 32px / 400 / -1.6px — marketing section headings | | `heading` | 24px / 700 — modal titles, feature headings | | `heading-sub` | 18px / 600 — card headers, tool category titles | | `body-large` | 16px / 500 — prompt bar text, primary UI prose | | `body` | 14px / 400 — standard body, nav drawer copy | | `nav-label` | 16px / 400 — sidebar navigation links | | `button-ui` | 16px / 400 — all button labels | | `label` | 14px / 500 — chips, tags, secondary labels | | `caption` | 13px / 400 — image metadata, timestamps | | `badge-label` | 10px / 700 — the lime "NEW" badge text | ### Principles - **Two families, one boundary**: Exposure VAR invites; Manrope does. The boundary is clear — display for hero moments, Manrope for all operational text. - **Tight at large, open at small**: display sizes carry heavy negative tracking (-2.64px at 44px); body text is near-zero. Headlines feel confident and compressed; body text breathes. - **Weight as hierarchy**: Manrope runs from 400 (nav labels, body) through 500 (labels, body-large) to 600/700 (headings). The boldest weights are rare — they mark genuine headings, not decoration. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base rhythm is 4px; the scale moves through 8/12/16/20/24 inside components, then 32/48/64/96 for section spacing. The app feels open but not wasteful — major vertical rhythm is comfortable, not airy. ### Grid & Container - Persistent left sidebar: dark `{colors.surface-dark}` column, ~200px wide, pinned full-height. Houses nav icons + labels in labeled groups (Library, Tools, API). "Sign in" and "Get started" at the foot. - Central content area: open white canvas. On the landing state, a single centered prompt bar (`{rounded.xl}`) floats below the display-hero headline. - Below the prompt bar: a responsive image gallery grid (masonry-style, variable-aspect tiles). Gallery fills edge to edge on the white canvas. ### Whitespace Philosophy - **The white is the product**: Ideogram's blank canvas is a deliberate aesthetic choice. The interface does not fill space — it protects the white. - **Sparse chrome, focused prompting**: the only heavy chrome is the sidebar. Everything else minimizes visual weight so the prompt field and the generated imagery dominate. - **Pixel-friendly gutters**: image tiles are separated by small consistent gutters; cards carry just enough padding to breathe. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` hairline only | Section dividers, most UI on white | | Paper (Level 1) | Multi-layer `rgba(14,14,16,0.00–0.03)` — six stops | Floating context menus, suggestion panels over the white canvas | | Card (Level 2) | `0 9px 21px` + `0 37px 37px` + `0 84px 50px` etc. (`{colors.shadow-soft}`) | Dropdown menus, image-action context cards | | Modal (Level 3) | Same multi-layer shadow + background scrim `rgba(0,0,0,0.7)` | Sign-in modal, full-screen overlay | | Focus Ring | `0 0 0 2px {colors.focus-ring}` (Tailwind default) | Keyboard focus on interactive elements | **Shadow Philosophy**: On a pure-white canvas, conventional drop shadows print as visible but subtle. Ideogram uses a multi-layer radially-graduated shadow — six `rgba` values from 0% to 3% opacity at escalating blur radii — to create the effect of a card resting at a slight physical height above the page. At most sizes this reads as paper texture, not as a graphic shadow. There is no dark scrim on the canvas itself; the background dims to `rgba(0,0,0,0.7)` only for modals. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 6px | Small inner chips, secondary icon buttons | | `md` | 10px | Standard buttons, nav active items, input fields | | `lg` | 16px | Cards, context menus, image tiles | | `xl` | 28px | The prompt bar — the signature large-radius input | | `badge` | 40px | The lime "NEW" badge pill | | `full` | 9999px | The generate / send icon button (circular) | The shape language is graduated and purposeful. Interactive controls use 10px — comfortable and modern without going full-pill. Cards step up to 16px for a softer block. The prompt bar at 28px is the distinctive statement: it reads as a friendly, inviting oval rather than a form field. The circular generate button at `{rounded.full}` completes the family — a circle pressed against the oval bar. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Near-black (`{colors.surface-dark}`) fill, white text, 10px radius. "Get started" — the main call to action on the landing state. Hover darkens slightly. - **`button-secondary`** — Transparent fill, `{colors.ink}` text, 1.5px border in `{colors.border-mid}`, 10px radius. "Sign in" — the quieter secondary action. - **`button-ghost`** — Transparent, near-black text. Inline actions, toolbar buttons; hover fills `{colors.surface}`. - **`button-generate`** — Near-black circular icon button (`{rounded.full}`) next to the prompt bar. The send/generate trigger. ### Navigation - **`nav-item`** — Transparent background, `{colors.ink}` label, `{typography.nav-label}`. On active state fills `{colors.surface}` at `{rounded.md}`. Sidebar group labels (Library, Tools, API) use `{colors.ink-secondary}` as section headers. ### Prompt Bar - **`prompt-bar`** — The app's signature component: frosted-white `{colors.prompt-glass}` fill, `{rounded.xl}` (28px) radius, Manrope body-large text. Placeholder in `{colors.ink-secondary}`. Paired with the circular `{components.button-generate}` at the trailing edge. ### Cards & Tiles - **`card`** — White fill, `{rounded.lg}` radius, multi-layer paper shadow for floating menus and context panels. - **`image-tile`** — The gallery building block. Soft-gray `{colors.surface}` fill, `{rounded.lg}` corners, zero padding — images bleed to the rounded edge. ### Badges & Chips - **`badge`** — Lime-green `{colors.accent}` fill, forest-green `{colors.on-badge}` label at `{typography.badge-label}` (10px/700), 40px radius. Used exclusively for "NEW" feature markers. - **`chip`** — Soft-gray `{colors.surface}` fill, `{rounded.md}` radius — active nav items and filter chips. ### Inputs & Modals - **`input`** — White fill, `{rounded.md}` radius, `{colors.border-mid}` outline. Focus state adds the Tailwind default `{colors.focus-ring}` ring. - **`modal`** — White fill, `{rounded.lg}` radius, 20px padding, multi-layer shadow. Sign-in modal is a centered dialog over a `rgba(0,0,0,0.7)` scrim. ## Do's and Don'ts ### Do - Keep the canvas pure white (`{colors.background}`) — the blank page is a design choice, not an oversight - Use Exposure VAR (`{typography.display-hero}`) only for the hero question / invitation; keep all UI text in Manrope - Apply -2.64px tracking to the hero display text — the compression is what makes it feel editorial, not decorative - Set near-black `{colors.surface-dark}` for the sidebar, primary buttons, and the generate icon only — this darkness is load-bearing - Limit the lime accent (`{colors.accent}`) to exactly one new-feature badge; never paint a whole surface or panel with it - Use the multi-layer paper shadow on cards and menus — single-value shadows feel off-brand - Give the prompt bar `{rounded.xl}` (28px) — the large radius is the product's most recognizable UI shape - Pair the circular generate button (`{rounded.full}`) with the oval prompt bar — the circle-on-oval geometry is intentional - Use `{colors.ink-secondary}` for section headers and placeholder text; reserve `{colors.ink}` for actionable labels ### Don't - Don't introduce gradient backgrounds or colored hero panels — Ideogram is a blank white page, always - Don't use Exposure VAR below 28px or in body text — its tightened tracking only works at display scale - Don't add a second chromatic accent; the lime badge is the system's only color. Additional hues fracture the quiet - Don't round buttons to `{rounded.full}` (pill shape) — button radius is 10px (`{rounded.md}`); only the generate icon is a full circle - Don't apply heavy drop shadows; use the graduated multi-layer shadow at 2–3% opacity, not a single strong drop - Don't add visual noise to the gallery area — image tiles should feel like a grid of clean portals on white paper - Don't use Manrope below weight 400 in the UI — the 200–300 weights exist in the font but read as too fragile for controls --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <768px | Sidebar collapses to an icon rail or bottom navigation; prompt bar goes full-width; headline scales from 44px toward ~28px | | Tablet | 768–1023px | Sidebar may stay as a narrow icon rail; gallery drops to 2–3 columns; prompt bar stays centered | | Desktop | 1024–1279px | Full persistent sidebar at ~200px; prompt bar centered in the main area; gallery 4+ columns | | Large | ≥1280px | Sidebar + wide gallery; prompt bar max-width ~860px; generous gutter between sidebar and content | ### Touch Targets - Buttons at `{rounded.md}` carry comfortable 10px–20px vertical padding — thumb-friendly - Nav items use 6px 10px padding; the sidebar touch surface is generous - The generate circular button is sized for touch at ~40px × 40px ### Collapsing Strategy - **Navigation**: persistent sidebar → icon rail → bottom bar; section labels (Library, Tools, API) collapse into icons - **Prompt bar**: stays centered, compresses width to match the viewport; `{rounded.xl}` maintained at all sizes - **Headline**: Exposure VAR scales fluidly; tracking reduces proportionally at smaller sizes - **Gallery**: steps from masonry to fewer columns; tile aspect ratios preserved ### Image Behavior - Generated images fill `{components.image-tile}` with `{rounded.lg}` corners; aspect ratios preserved - The gallery reflows into fewer columns as the viewport shrinks, maintaining consistent gutter spacing --- ## Agent Prompt Guide ### Quick Color Reference - Background: Pure White (`{colors.background}`) - Text: Near-Black (`{colors.ink}`) - Dark fills: Near-Black (`{colors.surface-dark}`) for sidebar, primary buttons, icons - Secondary text: Muted Gray (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Brand signal: Lime badge fill (`{colors.accent}`) — use sparingly, once per surface ### Example Component Prompts - "Build the hero prompt bar: frosted-white (`{colors.prompt-glass}`) fill, `{rounded.xl}` radius (28px), 12px 20px padding, Manrope 16px/500 (`{typography.body-large}`) in `{colors.ink}` with a `{colors.ink-secondary}` placeholder reading 'Generate new or upload & edit...'; pair with a near-black circular send button (`{colors.surface-dark}` fill, `{rounded.full}`, 10px padding) at the trailing edge" - "Create the primary CTA button: near-black (`{colors.surface-dark}`) fill, white (`{colors.on-dark}`) Manrope 16px label, `{rounded.md}` (10px) radius, 10px 20px padding — e.g. 'Get started'; hover lightens the fill to `#3a3b3c`" - "Render the secondary 'Sign in' button: transparent fill, near-black (`{colors.ink}`) label, 1.5px `{colors.border-mid}` outline, `{rounded.md}` (10px) radius, 10px 12px padding; hover fills `{colors.surface}`" - "Design the sidebar: near-black (`{colors.surface-dark}`) column ~200px wide; white icon + Manrope 16px/400 labels in `{colors.on-dark}`; active nav item gets a `{colors.surface}` tile at `{rounded.md}` (mapped as inverted chip since the sidebar is dark — adjust to `rgba(255,255,255,0.1)` on the near-black surface)" - "Make the 'NEW' feature badge: lime-green (`{colors.accent}`) fill, forest-green (`{colors.on-badge}`) Manrope 10px/700 text, 40px (`{rounded.badge}`) radius, 2px 8px padding — attaches inline after a nav label" - "Build a context menu card: white (`{colors.background}`) fill, `{rounded.lg}` (16px) radius, 20px padding, six-layer paper shadow (`0 9px 21px rgba(14,14,16,0.03)`, `0 37px 37px rgba(14,14,16,0.03)`, `0 84px 50px rgba(14,14,16,0.02)`, progressively fainter) — for dropdowns and suggestion panels" ### Iteration Guide 1. Start on pure white (`{colors.background}`). If any surface has a tint or gradient, remove it — the white is intentional. 2. Set the hero text in Exposure VAR at 44px, weight 400, letter-spacing -2.64px. If it looks too tight, it's correct; the compression is the signature. 3. Place the prompt bar as an oval pill (`{rounded.xl}`) in the center of the white space. Pair the circular generate arrow (`{rounded.full}`) at its right edge. 4. The sidebar is the one dark mass: near-black (`{colors.surface-dark}`). Keep everything else in white or light grays. 5. Lime (`{colors.accent}`) appears at most once — on the one feature badge. If it's painting a button or panel, remove it. 6. Shadows on floating elements should be six-layered and near-invisible (2–3% opacity max). A single-value `box-shadow: 0 4px 8px rgba(0,0,0,0.2)` is too heavy. 7. The distinctive radius pattern: buttons = 10px, cards = 16px, prompt bar = 28px, badges = 40px, generate icon = full circle. Resist the urge to make buttons into pills. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Ideogram. Brand names and trademarks belong to their respective owners.