Skip to content
IntegrasiHub

IntegrasiHub brand assets.

Logos, social banners, favicons, colour and type. Take what you need. If you are publishing something about us and a format is missing, email info@integrasihub.com and we will add it.

Download the brand kitZIP · logos, social, favicons

The mark

A stepped H. Two stems, offset by one step, joined by a single bar. The offset is the point: two parts brought into line is what the studio does, and it keeps the shape from reading as a generic letterform.

It holds up at 16px, which is where most logos fail. Geometry lives in scripts/brand-core.mjs, so every file on this page is generated from one source.

Thirteen values, and that is the whole palette.

Every pair used for text clears WCAG AA on its background, with the measured ratio noted. Click a value to copy it.

  • Accent

    Links, primary buttons, the mark.

  • Accent bright

    Gradient start on the mark tile.

  • Accent deep

    Hover state for the accent.

  • Gradient end

    End stop of the mark gradient.

  • Accent on dark

    Accent text on ink. 6.3:1.

  • Accent wash

    Quiet highlight blocks.

  • Ink

    Body and headings on light. 16.4:1.

  • Ink deep

    Dark sections and cards.

  • Muted

    Secondary text. 5.6:1 on the canvas.

  • On dark muted

    Secondary text on ink. 7.2:1.

  • Line

    Borders and dividers.

  • Canvas

    Page background.

  • Surface

    Cards and raised panels.

Geist, two widths.

Geist Sans carries everything. Geist Mono handles labels and anything that should read as metadata.

Aa Gg 123

Aa Gg 123 · Geist Mono

Display
Geist SemiBold · clamp 40 to 84px · tracking -0.035em · leading 0.98
Heading
Geist SemiBold · clamp 26 to 44px · tracking -0.025em · leading 1.1
Lead
Geist Regular · clamp 17 to 21px · leading 1.55
Body
Geist Regular · 15 to 17px · leading 1.7
Label
Geist Mono · 11px · tracking 0.16em · uppercase

Geist is licensed under the SIL Open Font License. The wordmark SVGs are outlined, so they render correctly without the font installed.

Logo, raster

PNG exports for places that will not take an SVG. All transparent except the tile, which carries its own background.

Social and sharing

Sized for each platform as of this release. Check the crop on the platform before you publish: safe areas move.

Favicons and app icons

The set the site itself uses. Drop these in alongside the web manifest if you are standing up another property.

Usage

Do

  • Keep clear space around the lockup equal to the height of the mark.
  • Use the white lockup on the ink background, and the colour lockup on light.
  • Scale the lockup proportionally. The SVG is the master.
  • Use the flat tile where a gradient will not reproduce, such as print or embroidery.

Do not

  • Do not re-set the wordmark in another typeface. The SVG is outlined for this reason.
  • Do not recolour the mark outside the palette on this page.
  • Do not stretch, rotate, outline or add a shadow to the mark.
  • Do not place the colour lockup on a busy photograph. Use the white one on a darkened area.

The name is Integrasi Hub Sdn Bhd. In writing, IntegrasiHub is one word with a capital H. “Product engineering studio” is a descriptor, not part of the name.