{"record":{"id":"0feb783ec9b60645","repo":"different-ai/openwork","slug":"use-a-horizontal-wordmark-between-1-5-1-and-8-1","errorCode":null,"errorMessage":"Use a horizontal wordmark between 1.5:1 and 8:1.","messagePattern":"Use a horizontal wordmark between 1\\.5:1 and 8:1\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"warning","filePath":"ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx","lineNumber":51,"sourceCode":"  if (file.size > BRAND_ASSET_MAX_BYTES) throw new Error(\"Use an image under 2 MB.\");\n\n  let image: ImageBitmap;\n  try {\n    image = await createImageBitmap(file);\n  } catch {\n    throw new Error(\"OpenWork could not decode that image.\");\n  }\n\n  const { width, height } = image;\n  image.close();\n  if (width > 4096 || height > 4096) throw new Error(\"Use an image no larger than 4096×4096 pixels.\");\n  if (kind === \"icon\") {\n    if (width < 64 || height < 64) throw new Error(\"Use a square icon at least 64×64 pixels.\");\n    if (width !== height) throw new Error(\"Use a square image for the app icon.\");\n  } else {\n    const aspectRatio = width / height;\n    if (width < 128 || height < 32) throw new Error(\"Use a wordmark at least 128×32 pixels.\");\n    if (aspectRatio < 1.5 || aspectRatio > 8) throw new Error(\"Use a horizontal wordmark between 1.5:1 and 8:1.\");\n  }\n\n  return { file, previewUrl: URL.createObjectURL(file), width, height };\n}\n\nfunction BrandAssetUploadField({\n  kind,\n  title,\n  description,\n  currentUrl,\n  managedAsset,\n  draft,\n  clearPending,\n  disabled,\n  onSelect,\n  onClear,\n}: {\n  kind: BrandAssetKind;","sourceCodeStart":33,"sourceCodeEnd":69,"githubUrl":"https://github.com/different-ai/openwork/blob/2b7df46e8ae1517d64c896c7793d2d52ec845669/ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx#L33-L69","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["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).","Add padding (letterbox) to a too-wide banner or trim height of a too-tall logo before uploading.","If the asset is actually square, upload it as the icon instead — the icon path only requires a square ≥64×64.","Re-export from the design tool with an explicit canvas sized for a horizontal lockup rather than relying on the SVG viewBox."],"exampleFix":"// before: 600×600 logo uploaded as wordmark -> aspect 1.0 -> throws\nconst file = new File([blob], \"logo.png\", { type: \"image/png\" }); // 600x600\nawait createBrandAssetDraft(file, \"wordmark\", 600, 600);\n\n// after: provide a horizontal lockup, e.g. 640×160 (aspect 4.0)\nawait createBrandAssetDraft(horizontalLockupFile, \"wordmark\", 640, 160);","handlingStrategy":"validation","validationCode":"function isWordmarkAspectRatioOk(width: number, height: number): boolean {\n  const ratio = width / height;\n  return width >= 128 && height >= 32 && ratio >= 1.5 && ratio <= 8;\n}\n// call before createBrandAssetDraft(file, \"wordmark\", width, height)","typeGuard":"function isWordmarkDimensions(d: { width: number; height: number }): d is { width: number; height: number } & { __brand: \"wordmark-ok\" } {\n  return d.width >= 128 && d.height >= 32 && d.width / d.height >= 1.5 && d.width / d.height <= 8;\n}","tryCatchPattern":"try {\n  const draft = await createBrandAssetDraft(file, \"wordmark\", width, height);\n} catch (e) {\n  if (e instanceof Error && e.message.includes(\"horizontal wordmark\")) {\n    showToast(\"Logo aspect must be between 1.5:1 and 8:1 — resize the image.\");\n  } else throw e;\n}","preventionTips":["Check image aspect ratio with width/height immediately after decoding (createImageBitmap or Image.onload) before submitting.","Pre-size wordmark assets to a standard lockup canvas (e.g. 4:1) in the design tool.","Show the accepted ratio range in the upload field's helper text.","Never reuse icon/square assets as wordmarks."],"tags":["validation","image","aspect-ratio","ui"],"backgroundTag":"invalid-image-dimensions","analyzedSha":"2b7df46e8ae1517d64c896c7793d2d52ec845669","analyzedAt":"2026-09-01T07:59:23.713Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-08T10:18:20.063Z"}