Design system Version 1.0

Design system · 01

The mark is an H. The seal is not a logo.

Haru Assembly has one logo, one wordmark, one seal and one mascot. They do different jobs and are not interchangeable — most identity mistakes here come from reaching for the seal where the mark belongs.

The H mark

The studio’s logo, wherever a logo is needed: the navigation, a diagram, a favicon, a deck. It takes its colour from the text around it, so on the site it is ink like everything else.

Right-click the mark, or press and hold it on a touch screen, to copy it as SVG or download the asset pack.

Colour

Ink on paper, or paper on ink. Never tan, never shu, never a cover dye.

Clear space and size

Keep one stem’s width clear on every side. The navigation carries the mark at 24px tall; below 16px the counters close up and it stops reading as a letter.

48px
24px
16px

The wordmark

The studio’s name, set in Asar. On the site it is live text in the heading face, as in the footer; anywhere the font cannot follow, use the outlined version.

The seal

A hanko: the H cut out of a disc of shu ink. It is not a logo and it is never interface. It is pressed into the paper where a document is signed — behind the text, set off square the way a hand-pressed seal always lands.

The stamp at full strength, for reference only.

Haru Assembly

Australia & Japan

As used: multiplied into the sheet, rotated 12°, behind what it signs.

Nabi

The mascot: a ball with two eyes. There is no artwork behind her and no animation files — her outline and her eyes are redrawn every frame from a small simulation, so she can watch the pointer and every mood can interrupt every other.

Move the pointer and she watches it. Her moods and moves are on her own page.

Misuse

The mistakes that actually get made, drawn out so they can be recognised.

Do. As supplied, in ink.
Don’t. Stretched or squeezed.
Don’t. Tilted or rotated.
Don’t. In tan, shu or any colour but ink and paper.
Don’t. Outlined.
Don’t. With a shadow, glow or bevel.

Haru Assembly

Do. The seal, behind the text it signs.
Haru Assembly
Don’t. The seal as a logo or avatar.
Don’t. The seal recoloured, or set straight.

Rules

Do

  • Use the H mark wherever a logo is called for.
  • Let the mark take the colour of the text beside it.
  • Press the seal once per document, behind the text, rotated 12°.
  • Give the seal at least 70px, so it still reads as a stamp.

Don’t

  • Use the seal as a logo, an avatar or an app icon.
  • Recolour the seal, or set anything else in shu.
  • Stretch, outline, shadow or tilt the H mark.
  • Stamp the seal on a button, a card or every section.