Light, an object, and its three shadows.
The symbol is a room: three walls, and on each the shadow of one real object, the X, the Y and the Z. The object can be built and held; its silhouette along each axis is that axis’s letter. In the name it lives as the first X: flat at rest, alive when touched. In the reveal, the name is first typed as code, 0x XYZ, then the object drops into place and makes it OXXYZ: code becoming a real thing.
One grid
The object, its shadows, the room and the letters are all drawn on the same 7 × 7 block. That is why the identity feels inevitable rather than assembled.
The light
The brand’s one accent, Light #6AC1FC, is the colour of the projections. The colour has a meaning: it is the light that casts the letters.
The secret
On the web the first X is the object: tap a letter and it jumps there, drag it and it follows. In print it is simply a letter. The logo stays calm; the brand has a surprise.
The logo and its files.
Four layouts in five colourways, all exact vectors made from the logo’s own drawing code. Use Horizontal first. Use dark on Deep and dark images, light on White and Paper, one colour where only one ink is possible. Download SVG for anything that scales; PNG for slides and documents.
Small: the living X.
Below 32 px the room’s three letters cannot survive, so the small mark is the X itself: the object’s X shadow, the block X of the name, on a Deep tile. It is drawn pixel by pixel for 16, 32 and 48 px (whole pixels, no blur), with its depth in the Light from 32 px. From app icons up, the symbol returns.
16 px
32 px
48 px16 px × 432 px × 3
App icon
AvatarFiles: favicon.ico (16, 32, 48) · favicon.svg · app-icon.svg (1024, the system rounds it) · avatar.svg (safe inside a circle).
Grid, clear space, sizes.
The unit is one block: 1/7 of the letters’ height. Keep 2 blocks clear on every side (the shaded band). TECHNOLOGIES is Manrope 800 at 0.42 of the letters’ height, spread to the name’s full width, 0.36 under it.
Minimum sizes
| Layout | Screen | Below it | |
|---|---|---|---|
| Horizontal | 180 px wide | 45 mm | Use the stacked layout or the symbol |
| Stacked | 130 px wide | 35 mm | Use the symbol |
| Symbol | 32 px | 10 mm | The small mark, the living X (03 · Small sizes) |
Never
Also never
- Write the name as 0xXYZ in the logo or in text: the 0x lives only in the motion.
- Tilt the X or add depth to one letter in the static logo.
- Redraw TECHNOLOGIES in another font or weight.
Navy, Blue, and the Light.
The site’s navy and blue, and one light. One accent per surface: Blue on light, Light on dark. Every pairing is measured; the full contrast audit is on the palette page.
The blue scale, for interfaces
On light
- Text Navy, secondary Soft on light.
- Links, buttons, TECHNOLOGIES Blue; white on Blue buttons; hover Blue 700.
- Light only as depth or glow.
On dark
- Text #EEF4FF, secondary Soft on dark.
- Links, buttons, TECHNOLOGIES Light; Deep text on Light buttons.
- Blue only as depth or a fill behind white text.
Status colours
Always with an icon and words, never colour alone. Every text colour passes 4.5:1 on its surface. Error is an orange-red, kept apart from Media’s raspberry red, so an error never looks like the sister brand.
Charts
Blue first, then hues far from the Light, from the status colours and from Media’s red. Label series directly where you can.
Manrope, one family.
Manrope (SIL Open Font License) is the brand’s typeface, already used on talibkhan.com. Three weights: 800 for display and TECHNOLOGIES, 700 for headings and buttons, 500 for text.
Built to last.
Software, automation and AI for teams that ship.
Body text sits at 16–18 px with a line height of 1.6. Headings tighten their tracking slightly (−0.02 em); small capitals labels open it up (+0.2 em) and use weight 800.
TECHNOLOGIESThe story behind the reveal.
9.6 seconds, four acts, one idea: technology turns possibility into something real. Watch an act, or drag through the reveal frame by frame.
Generate
A cloud of blocks clears, step by step, into one precise object, the way a generative model resolves noise into an answer (the counter reads step 00 / 40). Everything we build starts as possibility; the work is making it exact.
Prove
The object turns to look down each axis. Along X its silhouette is an X, along Y a Y, along Z a Z; each stop rings its note. One object, three truths: engineering that holds up from every side.
Project
The room appears and light passes through the object, casting X, Y and Z onto its three walls. An idea made visible to everyone else. This room, with its three shadows, is the symbol in the logo.
Name
The object leaves the room and hovers. Below it the name is typed as code, 0x XYZ: 0x opens every hexadecimal number. Then the object drops into the x and becomes the X, and the zero rebuilds into the O. Code becomes a real thing: OXXYZ.
After the reveal: alive
The first X stays the object. Tap a letter and it jumps there, turning in the air; drag it and it follows. It can honestly be X, Y or Z, because those are its real shadows. The logo is calm; the brand has a surprise.
The rules of the motion
Every move eases in and out (cubic-bezier(0.65, 0, 0.35, 1)); arrivals ease out (cubic-bezier(0.33, 1, 0.68, 1)). Every sound is timed off the picture. With reduced motion on, show the finished logo and nothing moves.
Material and air.
Every sound is either the material (blocks, tuned wooden bars) or the air the object moves through, and each is timed off the picture. The key is D major; the axes are notes: X = D, Y = F#, Z = A. The sonic logo plays O X X Y Z on the bars over a low swell, a felt boom and an open chord.
Mix: peak −3 dBFS, the logo moment the loudest (RMS about −16 dB). Files for video (the sonic logo at 3 s and 0.8 s, at −14 LUFS for social and −16 for the web) come with the sound pass.
OXXYZ, said AWK-seez.
AWK-seez
| Write | Never |
|---|---|
| OXXYZ, always in capitals | Oxxyz, oxxyz, OxxYZ, 0xXYZ |
| OXXYZ Technologies in running text | OXXYZ technologies, OXXYZ Tech, OXXYZ-Technologies |
| OXXYZ Media, the sister company; OXXYZ, the group | Mixing the two in one sentence without saying which |
Boilerplate
Voice
Writing
The brand at work.
Templates in the brand: the logo files placed exactly, Manrope for the words, the rules above. The text is live, so edit it in Figma or Illustrator (Manrope is in the media kit).
<oxxyz-logo>
For websites: the logo, its reveal and its play as one web component, drawn by the logo’s own code, so a site never needs a video or a copy. It respects reduced motion and starts sound only from a click.
<script type="module" src="./component/oxxyz-logo.js"></script> <oxxyz-logo theme="light" autoplay></oxxyz-logo>
Attributes: theme (dark | light) · autoplay (once, when it scrolls into view) · interactive (tap and drag after the reveal) · sound (plays the reveal with its score on click). One interactive logo per page: the object is one object.
Everything, in one download.
Download the media kit (ZIP)The 20 logo files, the small-size set and favicon, the templates, Manrope with its licence, tokens.css and tokens.json, and the words (name, pronunciation, boilerplate, voice) and colours as text.
Version 57: still to come
- Print values: the two Pantone numbers and the printer’s CMYK, chosen against a printed proof (the method is in Colour · Print).
- Sound files: the sonic logo as audio files (3 s and 0.8 s, at −14 LUFS for social and −16 for the web), rendered outside the browser and mixed by ear.