Concept - the mark, taken to depth

One letter, three windows, and a frame that moves.

Direction 12 out of thirteen. The identity is not a picture of a d: it is one drawn letterform, deliberately larger than anything that will ever hold it, and a frame that keeps a different part of it depending on where it lands. The letter never changes size relative to itself, the frame does.

Which means there is no such thing as a wrong crop, only crops that are on the rule and crops that are not. This page sets the rule, cuts the three canonical windows, moves between them, sets the word beside them, and then puts the whole thing into the product.

Settled while this was being built: the app icon and the favicon are crop A, and the wordmark is Inter 800 tightened, with the second d in petrol when the word stands alone.

← back to all thirteen directions

The letterform, and where the windows sit

The glyph is drawn once on a 100 unit square: a bowl of 23 with a 15 wall, centred at 40 so it runs into the stem rather than touching it, and a stem of 15 from 6 to 90. Three square windows are cut out of it. Everything else on this page is one of those three, at some size, on some ground.

The windows get smaller as they move up and to the right, which is the whole system in one sentence: the tighter the crop, the more abstract the mark. A is still a letter. B is a shape with a memory of a letter. C is a brand colour with an edge in it. Each one is the right answer at a different distance from the person.

The three crops

Same glyph, same wall thickness, same corner radius as a share of the frame. Only the window changes. Each is shown on petrol, then walked down to the size it actually has to survive.

A. The bowl - the primary

The one that goes on the phone, the tab and the app bar. It is the only crop where the counter is fully closed, so it is the only one that still reads as a letter to somebody who has never seen the brand.

B. The joint - the wide surfaces

Where the bowl runs into the stem. Used big: the share card, the empty state, the launch screen. Not used below 20, where the curve stops being a curve.

C. The stem - the far end

A field with one edge in it. This is the pattern crop, the avatar, the card back, the thing printed at 8mm. Nobody reads a letter here, and that is allowed, because by then the word has already been said elsewhere.

On other grounds

On the dark canvas the letter takes the lightened petrol and the field takes the ground, the same relationship the accent has everywhere else. Below: ink on paper is the one-colour cut, and beside it the inverse, which is not used and is here to show why the roles are not interchangeable. Swap them and the letter stops being the mark: the counter becomes a dot and the frame becomes the drawing.

The frame moves, the letter does not

The three crops are three stops on one continuous move. The letter is fixed in space and the window travels across it, from the bowl to the joint to the stem, tightening as it goes. Watching it once teaches the whole system, which is the only honest job an identity animation has.

Where it is allowed

The launch screen, the first run, the empty state and the share card render. Places a person meets the brand rather than uses the product.

Where it is not

Never in the app bar, never on a screen that is loading, never on a repeat visit. A mark that moves while somebody is trying to read a number is the opposite of calm.

The physics

Eight seconds, one loop, a single easing that starts and ends at rest. It holds on each crop for about a second and a half: long enough that each stop is a composition and not a frame of a video.

Not only squares

The rule survives the frame changing shape, which is the part a static logo cannot do. A wide card and a tall story are the same letter with a different window cut out of it, not a squeezed version of the same picture.

2 : 1, the share card

9 : 16, the story

the avatar, round

The round frame is the proof that this is a system and not a logo: nothing was redrawn, the window simply stopped having corners. The one rule it obeys is the one below, that the letter must leave the frame on at least two sides.

The word, cut to match

The mark is a fragment of a d, so the wordmark cannot be the app bar's ordinary label set a bit bolder: it has to be the same letter, at the same weight, with the same appetite for tightness. Inter 800, the whole word at -0.035em, and the pair of d's closed to -0.13em until the bowls almost meet. The last d is the only coloured letter in the brand.

The wordmark

Tendd

Above: the brand wordmark. Below: the one-colour cut, for anywhere petrol cannot go. The tracking does not change between them.

The spec

weight 800, the heaviest Inter the product ships

word tracking -0.035em

the dd pair -0.13em on top of that

the second d in petrol, everything else ink

today's app bar label was 700 at +0.02em

That last line is the decision this makes: the bar's wordmark stops tracking out and starts tracking in. One value, one reason, and it changes in the kit rather than on a screen.

The lockup

Tendd

The rule: with the mark, the word is all ink, because the mark is already carrying the petrol. Alone, the last d takes it. Two petrol things beside each other is one too many.

On the dark canvas

Tendd

The coloured d takes the lightened petrol, the same value every other accent takes in the dark theme. The tile keeps paper as its field so the lockup does not become two dark shapes.

Down to the bar

Tendd

Tendd Free

At 16px the tightened pair still reads, and the petrol d is dropped here because the mark is present. This is the string on all 54 screens.

Where the d is coloured

alone, at any size above 20px: coloured

beside the mark: ink

in the app bar: ink, the mark is there

below 20px with no mark: ink, the colour stops reading

on a photograph or a partner page: ink or white, never petrol

Five lines, so nobody has to guess later. The coloured letter is a brand move, not a UI accent, which is why it never appears inside a screen's content.

In the product

Crop A everywhere a person is working, crop B where the brand is presenting itself. The app bar gets the mark at 22, which is two more than the other directions needed, because a filled chip carries less weight per pixel than a line drawing.

The app bar and the lockup

Tendd

TenddFree

Clear space is the frame's own corner radius on every side.

The tab

Tendd

Bank

A filled 16px tile beats every line mark on this project at the one size that is not negotiable.

The share card

The band is a window, not a banner: the letter runs off all four edges and the card owns the rest.

The home screen

Settled: the icon is A. It is the crop where the counter closes, so it is the only one that says the name to somebody who has not met the brand yet. C stays in the system, but as the pattern and the avatar, not as the thing on the home screen.

The rule, written down

A cropping system without rules is a licence to draw anything and call it the logo. Five lines, and any new frame either obeys them or is not the mark.

1. The letter is never redrawn

One geometry: bowl 23 with a 15 wall, stem 15 from 6 to 90, on the 100 unit square. A new surface gets a new window, never a new drawing.

2. It must leave on two sides

Every window has to be crossed. The moment the whole letter fits inside the frame it stops being a crop and becomes a logo in a box, which is the thing this direction exists to avoid.

3. The corner is the product's

The frame's radius is 23.4 per cent of its short side, which is the same relationship as the app's own --radius on a card. The mark never invents a curve.

4. Two colours, and one of them is the ground

Letter in petrol, field in paper. At these windows the letter covers about two thirds of the frame, so this is what makes the mark read as petrol. Inverted only on the phone icon. Never a third colour, never an outline.

5. Below 16 it is crop A or nothing

B and C are not small marks. At favicon size the counter is the only thing holding the letter together, and only A has it.

A4 recognition: the letter of the name at the largest possible size Taste: Monzo, character without corporate stiffness Settled: the app icon and the favicon are crop A Named exception: the brand is a fourth place petrol appears, beside the primary action, the current selection and the trust line. It is a brand element, never an accent inside a screen's content

What happens if this is locked

The geometry and the five rules go into concept.md under Brand, with the attribute each one traces to, so it is a decision and not a drawing that appeared.
The glyph lands in design/system/ as one file, and the three crops become three exported assets from it. The lockup joins the kit beside .appbar, so it reaches all 54 screens through the kit and not by editing screens.
The favicon, the app icon and the touch icon are all cut from crop A, and the repository stops having no icon at all.
The wordmark replaces the app bar's label in the kit: 800 at -0.035em with the pair at -0.13em, where today it is 700 at +0.02em. That is a value change with a named reason, so it goes in the log, and it reaches all 54 screens through kit.css.
The motion rule above goes into the animation stage as the first entry, since it is already written and already has a reason.

Nothing here touches a token value. What it does add is a named exception to where petrol is allowed: the brand is the fourth place, beside the primary action, the current selection and the trust line, and it never appears inside a screen's content. Written down here so the next person finds the reason and not just the colour.

← back to all thirteen directions