Every letter is a square with pieces cut away, built from the same kit as the icons. Cut four triangles out of a square and you get an X: a crossroads. Shrink its arms and let four rays shoot out, north the longest, and it becomes the North Star from my tattoo: a direction. The logo moves between the two, which is the job of a UX designer.
The logo is a unit that can be split, repeated and recombined into a pattern.
Everything snaps to square tiles. The grid is visible and part of the look.
Circles, quarter circles, squares, triangles. Solid fills, no gradients, no illustration.
Mostly black and off-white, with one colour doing all the shouting.
Heavy, oversized grotesques that hold the layout together instead of decorating it.
Sources: HAUS Architects · Social Innovation Week · Modulacc · Kittl · Made Good Designs · your references
A custom wordmark where every letter is a square with straight cuts, the same kit as the icons. On hover the X's arms shrink into the short diagonal rays and the main rays shoot out, the north ray breaking above the line. The star takes the letter colour or the accent (switch top right). In the nav it does this once on load and again on hover.
The same letters, each on a coloured tile. On hover M, Y and L flip into icons from the system while the X finds north: the logo is literally made of the brand kit.
The X tile on its own: favicon, avatar, sticker. At rest it's a bold X that still works at 16px; on hover it becomes the tattoo star. The wordmark and the symbol share one shape.
Constructed from a hand sketch: four touching circles and four small ones, the star is what's left, with a medieval rose-window feel. On hover the circles make room, the small ones disappear and the real North Star from the tattoo grows out of the centre.
( Medieval set ) — on old mariners' compass roses, north was marked with a fleur-de-lis.
( Extended set ) — more primitives, so the pattern rarely repeats itself.
Text, lines, dark surfaces.
The background. Never pure white for surfaces.
The one accent: markers, CTAs, the star. One at a time.
Rare second accent.
Secondary text on paper.
Which colour may carry text on which background (WCAG ratio). Acid is loud, but never as text on paper.
| AaInk on Paper · Paper on Ink | 15.8 | ✔ All text |
| AaInk on Acid · Acid on Ink | 16.6 | ✔ All text |
| AaAcid on Blue · Paper on Blue | 6.2 / 5.9 | ✔ All text |
| AaMuted on Paper | 5.4 | ✔ Secondary text |
| AaBlue on Ink | 2.7 | ✘ Shapes only |
| AaAcid on Paper | 1.1 | ✘ Never — Acid sits behind ink text as a marker |
Pixels that point the way.
Archivo Medium for body text: plain, readable, never decorative. Headlines go uppercase, black weight, full width, with tight leading.
( See the work ) · [01] Approach · max@mxyl.be
Labels, meta, captions and buttons. Small, uppercase, a little letter-spacing. Labels go in parentheses, section numbers in brackets.
| Headline | 900 · wdth 125 · caps · −.04em · leading .84–.9 when big, ~1.0 for smaller multi-line headlines |
| Body | 500–600 · normal width · leading 1.4 |
| Label | Mono 500 · caps · +.06em |
| Outside the browser | Archivo Expanded Black · Archivo Medium · JetBrains Mono Medium |
One system, not separate styles. Every medium gets a fixed dose of tiles. Tiles always snap to the grid, and text never sits on them: text zones stay free, with one empty cell around them.
Pixels that point the way.
Pixels that point the way.
Pixels
that
point
the way.
Pixels that point the way.
Pixels that point the way.
@mxyl.be · Instagram & Threads
The Circle Star, ink on acid, full-bleed. The round crop turns the four big circles into arcs; the acid star still reads at 32 px next to a comment. Same symbol as the favicon, so it's one mark everywhere. Never the wordmark as an avatar.
One tile icon per theme, all in one treatment: ink ground, paper shape, acid accent. A calm band between bio and feed. A new highlight takes an unused icon from the set.
Pixels that point the way.
The tagline. "Pixels" says digital without saying it; "point the way" is the North Star. The words do what the visuals do: show the construction, skip the decoration. Someone who knows the craft and doesn't need to prove it.
Say what it does. Jargon only when the reader uses it too.
Every sentence earns its place. Cut half, see what you miss.
Let the work, the result or a real quote carry it. No adjectives you can't back up.
MXYL is one person. "We" only means me and the client.
The humour is in the understatement. One sharp line beats a pun.
Name the thing: the screen, the flow, the number, the deadline.
passionate · innovative · cutting-edge · world-class · solutions · leverage · synergy · elevate · empower · game-changer · seamless · humbled to share · don't hesitate to reach out · exclamation marks! · emoji
make · build · ship · fix · clear · simple · works · test · real users · on every screen
( Sounds like MXYL )"I design for the person using the product, not just the brief." · "Day one shouldn't feel like drinking from a firehose."
Ecofix
App & web portalI design for the person using the product, not just the brief.
Let's talk.
Let's talk.
Handle: @mxyl.be · Hashtags: #MXYL #PTPTW + 2–3 topic tags · max five · CamelCase