different-ai/openwork · warning · Error

Use a horizontal wordmark between 1.5:1 and 8:1.

Error message

Use a horizontal wordmark between 1.5:1 and 8:1.

What it means

createBrandAssetDraft in brand-appearance-screen.tsx validates uploaded brand assets before creating a draft. An image classified as a wordmark (kind !== "icon") must be at least 128×32 px and have a width:height aspect ratio between 1.5:1 and 8:1. This Error is thrown when the decoded image is wide enough to be a wordmark but too wide or too tall relative to its width (aspect < 1.5 or > 8), so the UI rejects it before producing a preview draft.

Source

Thrown at ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx:51

  if (file.size > BRAND_ASSET_MAX_BYTES) throw new Error("Use an image under 2 MB.");

  let image: ImageBitmap;
  try {
    image = await createImageBitmap(file);
  } catch {
    throw new Error("OpenWork could not decode that image.");
  }

  const { width, height } = image;
  image.close();
  if (width > 4096 || height > 4096) throw new Error("Use an image no larger than 4096×4096 pixels.");
  if (kind === "icon") {
    if (width < 64 || height < 64) throw new Error("Use a square icon at least 64×64 pixels.");
    if (width !== height) throw new Error("Use a square image for the app icon.");
  } else {
    const aspectRatio = width / height;
    if (width < 128 || height < 32) throw new Error("Use a wordmark at least 128×32 pixels.");
    if (aspectRatio < 1.5 || aspectRatio > 8) throw new Error("Use a horizontal wordmark between 1.5:1 and 8:1.");
  }

  return { file, previewUrl: URL.createObjectURL(file), width, height };
}

function BrandAssetUploadField({
  kind,
  title,
  description,
  currentUrl,
  managedAsset,
  draft,
  clearPending,
  disabled,
  onSelect,
  onClear,
}: {
  kind: BrandAssetKind;

View on GitHub (pinned to 2b7df46e8a)

Solutions

1. Resize/crop the wordmark image so its width is between 1.5× and 8× its height (e.g. a 480×160 or 800×160 PNG).
2. Add padding (letterbox) to a too-wide banner or trim height of a too-tall logo before uploading.
3. If the asset is actually square, upload it as the icon instead — the icon path only requires a square ≥64×64.
4. Re-export from the design tool with an explicit canvas sized for a horizontal lockup rather than relying on the SVG viewBox.

Example fix

// before: 600×600 logo uploaded as wordmark -> aspect 1.0 -> throws
const file = new File([blob], "logo.png", { type: "image/png" }); // 600x600
await createBrandAssetDraft(file, "wordmark", 600, 600);

// after: provide a horizontal lockup, e.g. 640×160 (aspect 4.0)
await createBrandAssetDraft(horizontalLockupFile, "wordmark", 640, 160);

function isWordmarkAspectRatioOk(width: number, height: number): boolean {
  const ratio = width / height;
  return width >= 128 && height >= 32 && ratio >= 1.5 && ratio <= 8;
}
// call before createBrandAssetDraft(file, "wordmark", width, height)

function isWordmarkDimensions(d: { width: number; height: number }): d is { width: number; height: number } & { __brand: "wordmark-ok" } {
  return d.width >= 128 && d.height >= 32 && d.width / d.height >= 1.5 && d.width / d.height <= 8;
}

try {
  const draft = await createBrandAssetDraft(file, "wordmark", width, height);
} catch (e) {
  if (e instanceof Error && e.message.includes("horizontal wordmark")) {
    showToast("Logo aspect must be between 1.5:1 and 8:1 — resize the image.");
  } else throw e;
}

When it happens

Trigger: Upload a logo file to the brand appearance screen with kind "wordmark" (or any non-icon kind) whose decoded dimensions give width/height < 1.5 (tall/nearly-square logo) or > 8 (extremely wide banner strip). E.g. a 512×512 logo or a 2000×100 banner both throw this exact message once the 128×32 minimum is already satisfied.

Common situations: Uploading a square company logo as a wordmark; uploading a long horizontal banner stripped from a website header; exporting an SVG with a huge viewBox aspect; reusing an icon file as the wordmark.

Related errors

• Selected model is unavailable. Choose another model before s
• Agent context diagnostics timeout must be between 1 ms and 3
• Invalid cloud provider sync response.
• Invalid cloud provider sync status.
• Invalid cloud provider sync status response.

AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/0feb783ec9b60645. Report an issue: GitHub.