The Khata mark
Two chevrons pointing at each other and crossing. Everything on this page is generated from a single source file, so nothing here can drift from the logo in the header above.
How it is built
Two units, not one shape
A teal chevron travels right from the lower left; a navy one travels left from the upper right. Each carries a smaller echo set outboard of it, aligned to its partner's centre line.
The offset is the point
Navy sits roughly 66 units right and 30 up from teal. That diagonal is what makes the mark read as motion rather than a static X — keep it in any derivative.
Palette
Three flat inks. No gradients anywhere in the mark.
Teal
#138a98
The outbound chevron.
Navy
#2f3565
The inbound chevron.
Crossing
#007285
Where the two meet. Not a blend mode — a fixed third ink.
Lockups
Use a lockup wherever the brand is being named. Use the mark alone only where “Khata” already appears close by.
Motion
Four behaviours, all pure SVG and CSS — no animation library, no JavaScript, no extra request. Each renders correctly with motion disabled, and all of them stop under prefers-reduced-motion.
Converge
Plays once on arrival. For the hero.
The chevrons travel in from opposite edges and lock, echoes trailing 120ms behind. States the brand idea — two-way exchange — in the motion itself.
Handoff
Loops every 3s. For headers and quiet idle states.
A light band crosses the teal ribbon, flares through the crossing, and exits along the navy. Low enough noise to run behind body copy.
Draw-on
Plays once. For the app splash.
Each unit is wiped in along its own direction of travel, as if the entry were being written — which is what a khata is.
Breathing
Loops indefinitely. For small permanent placements.
A 2.5% scale drift over 4s. Meant to be felt rather than watched, so it never competes with page content.
Download
Vector, transparent, ready to place.
Using it well
Clear space
Keep free space around the mark equal to the height of one small chevron. Nothing crosses it.
Minimum size
24px for the compact cut. Below roughly 32px the echo chevrons stop resolving, which is why the compact cut exists — do not shrink the master instead.
On dark
Use mono white, or place the full-colour mark on a light plate. Navy on a dark background disappears.
Do not
Recolour it, add a gradient, rotate it, stretch it, outline it, or add a drop shadow. If you need it in one colour, a mono cut already exists.