Humanbased Brand Kit

Use these assets to present Humanbased clearly and consistently.

Naming
- Use "Humanbased" as one word, capital H.
- Preferred public examples: Humanbased, Humanbased AI, Humanbased Brand Kit.
- Do not use Human Based, Human-Based, HumanBased, or HB in public copy.

Logo Usage
- Use the full wordmark when space allows.
- Use the standalone mark for constrained UI, favicons, app icons, and social avatars.
- Keep at least 1x clearspace around the mark, measured from the symbol height.
- Do not recolor, distort, rotate, redraw, or combine the logo with other marks.

Clearspace
- Every logo file here already carries a small clearspace ring: a uniform
  transparent margin of about 14% of the symbol height, baked into the artboard.
  So the artwork never sits flush against its own edge, and dropping a file
  straight into a slide, an avatar crop, or a partner lockup looks right with no
  trimming or nudging.
- The ring is a starting point, not the whole clearspace rule. It stops the mark
  touching its edge; the 1x rule above still governs how much room to leave
  between the logo and other elements on the page.
- Do not crop the ring off to make a logo look bigger. Scale the file up instead.
- icon/favicon.svg is the one exception and is deliberately edge to edge: at
  16-32px a ring would push the mark below legibility, and browsers inset it.
- logo/app-icon.* is the other exception and carries no ring. iOS masks the app
  icon with its own rounded square, so the artwork has to reach the canvas edge;
  a ring would read as a border drawn inside that
  separate pipeline. Give it clearspace in your own layout instead.
  Note it is transparent: if you re-export it from Figma, drop the frame's
  white background fill, or the icon shows a white block on dark surfaces.

Formats
- SVG is the master. Prefer it wherever vector art is accepted — it stays sharp
  at any size. The wordmark and lettermark carry outlined paths rather than live
  text, so they render identically without Inter installed. Those outlines are
  Inter Display (the display end of Inter's optical-size axis), which is what
  the artwork specifies — do not re-set the wordmark in Inter Text.
- PNG is provided for places that cannot take SVG (some slide decks, email,
  chat). Each is transparent, and ships at three densities: the base file is 1x,
  with @2x and @3x alongside it. Pick the density that matches where it will be
  displayed, and never upscale a PNG — take the SVG instead. The mark's densities
  land on 512, 1024, and 1536px square, which is the size set app stores, social
  avatars, and favicon generators ask for.

Files
Sizes are the full artboard, clearspace ring included; the artwork inside is the
authored size shown in brackets.
- logo/wordmark-black.svg      + .png, @2x.png, @3x.png   (283x56 at 1x [271x44])
- logo/wordmark-white.svg      + .png, @2x.png, @3x.png   (283x56 at 1x [271x44])
- logo/word-only-black.svg     + .png, @2x.png, @3x.png   (227x56 at 1x [215x44])
- logo/word-only-white.svg     + .png, @2x.png, @3x.png   (227x56 at 1x [215x44])
- logo/mark-black.svg          + .png, @2x.png, @3x.png   (512x512 at 1x [400x400])
- logo/mark-white.svg          + .png, @2x.png, @3x.png   (512x512 at 1x [400x400])
- logo/app-icon.svg            + -1024.png                (1024x1024; no ring)
- icon/favicon.svg             (400x400; edge to edge, no ring - see Clearspace)
- color/humanbased-tokens.json
- color/humanbased.css

App icon (iOS)
- app-icon-1024.png is the only file Xcode needs. A single-size App Icon asset
  derives every home-screen, Settings, and Spotlight variant from it. Ship it
  unmodified.
- It is a white-wrapped symbol: a full-bleed white square with the symbol inset
  at 69.1% of it, the same wrap ratio the social icon uses (400 of 579 in the
  source artwork). The wrap is not padding for its own sake — it is what keeps
  the housing readable, and the housing is the mark.
- Never bleed the symbol to the edge of an icon canvas. The housing is what
  makes the mark Humanbased; without it the remaining shape is the XnY mark, a
  different brand. Source of truth for the symbol artwork is
  brand-kit/logo/svg/symbol_black.svg at the repository root, alongside
  brand-kit/xny/ - check which folder you are copying from.
- The canvas has no rounded corners, on purpose. iOS masks the icon itself; a
  pre-rounded icon gets masked twice.
- It is opaque and carries no alpha channel. App Store Connect rejects an app
  icon that has one - being fully opaque is not sufficient, the channel itself
  must be absent. The generator re-encodes the raster as PNG colour type 2 to
  guarantee this, so do not round-trip the file through an editor that adds
  transparency back.
- The flat icon replaces the earlier 3D tile (mark-3d), which is retired along
  with its separate browser-engine renderer. Do not reintroduce bevels,
  gradients, inner glows, or drop shadows.

Package maintenance
- Regenerate humanbased-brand-kit.zip whenever any file in this folder changes.
  The ZIP is a second copy of everything here and goes stale quietly, so it is
  scripted and covered by tests/brand-kit-redesign.test.mjs rather than left to
  whoever remembers:
    node websites/humanbased-site/scripts/package-brand-kit.mjs
    node websites/humanbased-site/scripts/package-brand-kit.mjs --check
- Regenerate the PNGs from the SVG masters with:
    node websites/humanbased-site/scripts/generate-logo-pngs.mjs
  That script also verifies each master still carries its clearspace ring, so
  editing a viewBox by hand fails there instead of shipping a cropped export.

Copyright 2026 Humanbased AI PTE. LTD. All rights reserved.
