brand system

The marks, and how to use them.

Everything needed to represent abatchan correctly: the name, the statement, the symbol, the lockups, the colour system, and the type scale. Files are linked where they are described.

01 · the name

One word, always lowercase.

The lowercase treatment is deliberate. It carries calm confidence and premium simplicity, and it stays consistent everywhere the brand appears.

display name
abatchan
legal name
ABATCHAN LTD
never
Abatchan  ·  ABATCHAN  ·  Abat Chan
The registered form is used only where a legal or formal document requires it. Everywhere else, the brand is abatchan.
02 · the statement

What the brand says.

abatchan is a modern engineering brand focused on building connected digital systems through scalable infrastructure, intelligent design, and clean execution.

If it plugs in, I build it.

  • Modern systems. Clean execution.
  • Infrastructure for modern workflows.
  • Engineered to connect. Built to scale.
  • From interface to infrastructure.
03 · the symbol

Mirrored, open geometry.

Built from the letters in “aba”, the symbol reads as connection, modular systems, and the relationship between frontend and backend. It is balanced, and it can expand.

The abatchan symbol
Clear space around the symbol is at least one inner curve width on every side. The motion above is the standard reveal; it finishes on indigo and holds.
04 · the lockups

Symbol plus wordmark.

The horizontal lockup is the primary form. The symbol stays indigo in both; only the wordmark changes so the mark never shifts colour with the background.

abatchan horizontal lockup, white wordmark
on #0D0D0D and dark surfacesSVG ↓
abatchan horizontal lockup, black wordmark
on #F5F5F3 and light surfacesSVG ↓
abatchan symbol, white
symbol only · avatar, favicon, watermarkSVG ↓
abatchan symbol, indigo
symbol only · accent and signal useSVG ↓
05 · colour

Two carry it, one signals.

Black and soft white do most of the work. Indigo is a signal, not a background theme, and no other accent is introduced unless a product interface needs semantic states.

Primary Black
#0D0D0D
Dark backgrounds, UI foundations, premium surfaces, video backgrounds.
Soft White
#F5F5F3
Primary type on dark backgrounds, light surfaces, logo contrast.
Accent Indigo
#6366F1
Active states, key interaction points, signal dots, links, restrained glow.
Gradients are not used as generic decoration. On light backgrounds indigo is darkened to #4F46E5 for body-size text so it stays readable.
06 · typography

Geist, with intent.

Geist carries the interface, the wordmark, and the body copy. Satoshi is available for editorial and campaign moments. Clean hierarchy, normal tracking, no decorative effects.

Regular · body
Build connected systems.
Medium · nav, labels, wordmark
Build connected systems.
Semibold · headings, CTAs
Build connected systems.
Brand-facing display language prefers lowercase. Condensed or aggressive display faces are not used.
07 · usage

The short version.

If a use is not covered here, keep the mark legible, keep the space around it, and leave the geometry alone.

Do

  • Use the white mark on #0D0D0D backgrounds.
  • Use the black mark on #F5F5F3 or white backgrounds.
  • Keep clear space of at least one inner curve width on all sides.
  • Use indigo as an accent or a final motion state.
  • Reach for the symbol alone at small sizes: avatars, favicons, app icons.

Don’t

  • Stretch, rotate, or otherwise distort the mark.
  • Recolour it outside the three brand colours.
  • Add drop shadows, outlines, or effects.
  • Place it on busy media without enough contrast.
  • Rebuild the wordmark by typing it · use the supplied lockup.

Need something not listed here?

Ask for the asset you need and it will be sent in the right format, or prepared if it does not exist yet.

request an asset ↗abatchan mail