Designing your own studio's website is the hardest brief there is, because nobody stops you from starting again. Ours started again six times in four days. A particle ribbon and a purple planet on the horizon. A bright product-marketing site. An orb with orbiting labels. A ray-marched night render of the mountain. A plain black, white and blue site. Then the silk dome you see now.

An earlier directionToday

Launch day is when a website stops being a project and becomes part of how a business runs. Someone has to add the new product, fix a price or post next month's event. Too often that someone is a developer on a retainer, because nobody planned for anyone else to do it.

So before we design a page, we ask who will be changing it, how often and what they'll change. The answer decides how the site gets built.

Three kinds of content

Almost everything on a business website falls into one of three groups:

• Pages that rarely change, like the home page, services and about. These are designed once and refined now and then.
• Collections that grow, like listings, team members, case studies, events or posts. Each new item follows the same shape.
• Data that moves every day, like stock levels, bookings or orders. This usually lives in another system already.

The first group needs good design. The second needs a simple way to add items. The third needs a connection to the system where the data already lives, not another copy of it.

Picking the right editor

For the collections, there's a spectrum of tools. Here is how we choose:

The first option is what this blog runs on. Each post is a plain text file kept with the site's code. Writing one is like filling in a form, and publishing it rebuilds the site in under a minute. There is no database to secure and no monthly fee.

The glass portfolio has sound. It is off on every visit, behind a small control in the corner, because sound on the web should be invited, never assumed. Once it's on, it should feel like touching the thing on screen and nothing more.

Three directions

We wrote down three directions before listening to anything:

The recommendation was soft glass with an elastic touch for the big moments. Just as useful was the list of what to rule out on paper: long crystal rings, shattering, water drops, cartoon boings, cinematic impacts and any constant noise while scrolling. Searching sound libraries for "glass" alone mostly turns up breakage and long ringing, which is the opposite of what we wanted.

A plan for auditions

The plan was thorough. We shortlisted two free libraries and two paid ones, set a budget of 250 KB for the first set of sounds, and wrote a scoring sheet that weighted how comfortable a sound is to hear the hundredth time above how well it fits the brand:

• comfort when repeated: 30%
• fit with the direction: 25%
• timing with the motion: 20%
• clarity on small speakers: 15%
• consistency with the other cues: 10%

It also said that silence could win. For some moments, like the spiral coming to rest, no sound was a valid answer.

What we built instead

We never ran those auditions. Instead, every cue on the site is synthesised in the browser with the Web Audio API, so there are no sound files to download at all:

• A tap is a short sine tone with three quieter partials at uneven ratios above it, each fading faster than the last, plus a tiny filtered click. The uneven partials are what make it read as glass rather than a beep.
• Switching views glides between two pitches over 0.16 seconds, then taps.
• Opening the menu is a soft breath of filtered noise rising in pitch. Closing it falls.

Everything runs through one gentle compressor, and no more than three sounds play at once.

Motion is hard to judge from a description. So before building the portfolio, we built two small studies on a plain light page, and every time we were about to change something fundamental, we saved the working version first. The spiral study ended with nine of those snapshots, and they tell the story better than our notes do.

One card first

The first study was a single card with three sliders: glass depth, refraction and colour separation. It ran in one shader pass, capped the pixel ratio at 2, and stopped animating once the card's spring settled, so a study left open in a tab used no power.

The values we approved there, depth 67, refraction 47 and separation 75, went into the spiral unchanged. Settling the material on one card first meant the spiral could be judged on motion alone.

Clients ask us which tools to use more than almost anything else. So we wrote it down: a plain-English field guide to the software we design, build and connect with, saying what each tool is and when it's the right choice.

It started with 168 tools. It now covers 375, in fifteen sections, from thinking and writing to measuring and maintaining a site after launch.

It's data, not a page

The guide isn't written as a web page. Every tool is a short entry in one data file: its name, its section, what it is and when to pick it. A small build step turns that file into the page, the contents list and the index of names at the top.

That has three useful side effects:

• Adding or correcting a tool means editing a line, not a layout.
• The count in the page's title and in the search box is always right, because it's counted at build time.
• Search works on the page immediately, with no service behind it. Try "video" or "CMS".

Keeping it honest

Tools change faster than websites. Products close, get renamed or fold into something bigger. The guide is corrected as that happens: when a product shuts down it comes out, and when one is renamed the entry follows the new name.

How we choose

The guide isn't a ranking, because there's rarely one best tool, only the best fit for a team, a budget and a goal. We pick with three questions:

1. What job needs doing? The job comes first, then the tool, never the other way round.
2. Can your team run it? If it needs us every week, it's the wrong choice.
3. Does your data stay yours? You should be able to take your content and leave.

Our portfolio is a dark optical bench where every project is a card of glass, arranged in a spiral you can scroll, drag and fly into. It is a concept piece: apart from the Kanya card, the cards hold generative studies rather than client work, so we could push the medium without a brief holding it back.

The idea is not ours alone. The spiral is strongly inspired by Pacôme Pertant's portfolio, designed by Louis Bocquet and developed by Colin Demouge, and the glass material is adapted from the Infinite Liquid Glass technique. What we added was the question of what would happen if every card were cut from a real, measurable material.

One canvas, no libraries

We had a long list of candidates: WebGPU, Three.js, an animation library for the scrolling, another for smooth wheels, and a ready-made liquid glass effect. The site uses none of them. All the glass is drawn by one hand-written WebGL2 canvas behind the page, with no libraries and no build step.

The fastest-feeling design is not always the one with the smallest library, but here, owning every line meant we could make the canvas and the page agree exactly. The canvas measures in CSS pixels, so any card can sit on the spiral or follow the position of an element on the page, and blend between the two. That's how a card flies out of the spiral and becomes the hero of a project page, or grows from the showreel thumbnail into a full frame.

Every card is a real material

Each card has the refractive index and Abbe number of a real optical material. The index sets how strongly the card bends what's behind its bevel, and the Abbe number sets how much it splits light into colours.

Refraction follows the index minus one, and colour splitting follows one over the Abbe number. So flint and polycarbonate fringe visibly at their edges, while fused silica and sapphire stay clean. The specs on each project page quote the real values.

The material, in one pass

Every card is drawn in a single pass:

1. The shape of a rounded rectangle is turned into a bevel.
2. The bevel's slope refracts the card's own artwork, separately for red, green and blue, which is what makes the colour fringes.
3. A reflection of the surroundings, a Fresnel edge, a highlight and a thin spectral rim finish the surface.

The cards refract their own artwork rather than the whole scene behind them. Real transmission through the background would take extra passes for every card, and we kept that in reserve for a few moments that would earn it.

Keeping it light

Everyone lands on a missing page sooner or later: an old link, a typo, a page that moved. Most 404 pages apologise and point home. Ours does that too, and then offers something to do while you're there.

404 Invaders

It's a tiny pixel-art shooter in the site's own palette. The ship fires by itself, so the only thing to learn is moving: drag with a finger, use the mouse or press the arrow keys. Before you start, the game plays itself quietly behind the start screen, so it's obvious what it is without reading any instructions.

The sprites are drawn from short strings of letters, one letter per pixel and one colour per letter, so the whole game is a single small script with no images to download.

The way out comes first

A game on an error page is only charming if it never gets in the way. The headline says what happened, the first two buttons are Back home and Say hello, and the game sits to one side for anyone who wants it.

Nothing leaves your device

The game remembers your best score in your own browser's storage. It's never sent to us, it isn't a cookie, and clearing your browser's data for the site removes it. It's also written into our privacy policy, because a policy should cover even the small things.

The brief for our own logo had one rule before it had a shape: it must not look like AI slop. Image generators are good at texture and light, but they draw pixels with no understanding of curves or geometry. A mark has to survive at 16 pixels, in one colour, cut into metal or stitched into fabric, and that takes construction, not just a nice picture.

Why a mountain

The studio is named after Mount Tavor. It rises on its own from the Jezreel Valley: a single rounded dome you can see from everywhere, built on solid ground. That gave us the idea we wanted the mark to carry, which is one clear shape, standing on something firm.

It also helped that Tavor is not a jagged peak. A rounded crown is a natural fit for a mark built from circles, where a sawtooth range would have fought every curve around it.

Six marks in three days

The mark changed more than anything else on the site. In order:

1. An outlined symbol, under the studio's earlier name.
2. A horizon line with a grotesque wordmark.
3. An ink square with an ultraviolet dot.
4. A glass orb.
5. Mount Tavor's dome, split by a T cut out of the negative space.
6. The lens, which stayed.

Most of them lasted less than a day. The lens was the first one that still worked at the size of a browser tab, in one colour.

The lens

The final mark is a disc split by the ridge of Mount Tavor, so the mountain rises inside it like a moon over the horizon. The sky above the ridge is blue. The mountain is white on dark grounds and black on light ones.