Brand mark
The identity, and it is not a picture of a d. One letterform is drawn on a 100 unit square, deliberately larger than any frame that will ever hold it, and a window is cut out of it. The letter never changes size relative to itself; the window does. This file draws the first of three windows, and it is the only one the product carries.
Anatomy
Two boxes and no content slot, which is what makes it an atom: a field that carries the corner, and a letter painted through a mask. Everything below is drawn by design/system/components/brand-mark.css through the same entry point a product screen loads, so this page cannot drift from the screens.
The live specimen stands on its own ground. This component exists inside one host, the app bar's lockup, and its field is --bg-surface, which is also the bar. Shown on a blank canvas it would be a paper tile nobody puts anywhere. Shown here it is what a person actually sees on all 57 coloured pages: a petrol letter with a cropped corner, on the bar it belongs to.
.brandthe frame: 22px square,overflow: hidden, and a field of--bg-surface. The clip is load-bearing rather than tidy, because the letter is bigger than the frame by construction and crosses every cornerborder-radius23.4%, a ratio and not a token, and this is the one number on the page that had to escape the scale. Rule 3 of the mark is that the corner is a share of the short side. A length would freeze it at one size:--radius-xsis 6px and would be 1px off at 22px and 36px off at 180.brand::beforethe letter:--text-actionpainted through a mask, the same machinery app-bar.css uses for the chevron and the cross. One difference, and it is deliberate: those two takecurrentColorand are free in both themes, this one names the role, because the letter is petrol for being the brand and not for inheriting the ink of whatever holds itthe cropthe frame does the cropping, and the SVG carries the whole letter. The drawing is a circle of radius 23 at (40,60) with a 15 unit wall, and a stem 15 wide from y6 to y90, onviewBox='0 0 100 100'. Crop A is the window x26 y34, 46 by 46, written as three lengths on the letter box:217.391%square, pulled-56.522%left and-73.913%up - the same four numbers, arranged so that a transform can reach them, withoverflow: hiddendoing what the viewBox used to do. It was aviewBox='26 34 46 46'until 2026-08-16, and it changed because a viewBox cannot be animated and the crop had to move. Rule 1, the letter is never redrawn, is enforced one level harder than before: there is exactly one drawing in the file and a new crop is a new boxmask-size100% 100%and notcontain: the image is already exactly the window, socontainwould letterbox a square inside a square and cost a sub-pixel edge for nothing
Every specimen on this page that includes the lockup is inside a real app bar, and the first draft of the page was not. The lockup's own layout, display: inline-flex with an 8px gap, is declared in app-bar.css as .app .appbar .lockup, because it stands in one host and the inventory's rule is that a one-off is written down rather than promoted. Put the same markup on a bare stage and the selector does not match: the wrapper falls back to a plain span, the mark keeps display: block, and the word drops onto a second line. Caught in a screenshot at 1280 and fixed by giving the specimens their host.
It is worth keeping rather than working around, because it is the "one host" decision proving itself out loud. A component that renders correctly on a blank canvas is a component; this is a slot. The moment the share card carries the second one, the rule moves to a file of its own and this stops being true.
Variants and sizes
The axis is the window, and the concept locked three values on it. Only one of them is in this system, and the other two are listed rather than built, because a variant the product does not carry is an invention with a nice reason attached.
| Window The tighter the crop, the more abstract the mark. A is still a letter, B is a shape with a memory of one, C is a brand colour with an edge in it. Each is the right answer at a different distance from the person |
In the system | Where it stands |
|---|---|---|
A, the bowl .brand |
x26 y34, 46 sq radius 23.4% |
The only crop where the counter closes, so the only one that still reads as a letter to somebody who has never seen the brand. The app bar on all 57 coloured pages, and both exported icons |
| B, the joint | - | Locked at Concept for the wide surfaces: the share card's band, the empty state, the launch screen. Not built, and the reason is a count rather than a preference: the share card stands on 2 grey pages and 0 coloured ones, and the other two screens do not exist. It arrives with its first host |
| C, the stem | - | A field with one edge in it: the pattern, the avatar, the thing printed at 8mm. Not built, same reason, and it has no host anywhere in the product as designed today |
| A size modifier | - | Forbidden with a reason rather than missing. Mark sizes in this product are set by the CONTAINER, the way the merchant tile's five are, and there is exactly one container today. The other sizes of this mark exist as files rather than as CSS, which is what the concept page's own chain asked for |
The exported pair, and they are the same geometry. A favicon is fetched as its own document and cannot read a custom property from the page, so these two files carry the only literals of this brand outside a token file. All four are copied from tokens.css and none is chosen there. The dark pair is carried through prefers-color-scheme rather than dropped, because a role without a pair does not exist in this system and a browser tab strip is a ground like any other.
The touch icon has no corner, and that is the one place rule 3 does not apply. iOS masks a home screen icon with its own superellipse, so shipping a rounded square would put a corner inside a corner. The letter still leaves the frame on two sides, so rule 2 holds; rule 3's corner is the platform's here and nowhere else. It is 180px because that is what iOS asks for, and it carries the light values only, because Apple does not offer the icon a theme.
When to use it
Once per screen, in the app bar, beside the word. That is the whole of it today, and the narrowness is the point: the mark is chrome and it is ours. It says whose product this is, in the one place a person is not reading a number.
It is not the merchant tile, and the two are one grep apart. Logo, .logo, is DATA: it is the person's own Netflix rendered as Netflix, 111 places across 21 grey pages, and it changes with the row it sits in. This one is chrome, it is the same on every screen, and there is exactly one of it. They could not share a name for that reason, and the name that moved is this one, because .logo was there first and is worn 111 times.
Never below 16px, and never crop B or C at any small size. Rule 5: at favicon size the counter is the only thing holding the letter together, and A is the only window that has it. The system enforces the first half by having one size and no modifier, and the second half by not building B and C at all.
The mark is the fourth place petrol appears, and it is a named exception rather than a fourth job. D-Concept spends petrol on the primary action, the current selection and the trust line. The brand is beside those three and not among them: it is an identity and never an accent, and it therefore never appears inside a screen's content. The exception is recorded in docs/decisions.md and in CLAUDE.md, so the next person finds the reason and not just the colour.
The rule, and the anti-rule
The word takes the ink it inherits and its last letter takes the petrol, which is the founder's call of 2026-08-12 and overrules the concept's "all ink beside the mark". The two petrol things are 46px apart and read as one lockup: the mark says the shape, the letter says which letter the shape is. The rest of the word carries no colour at all, so the rule is still enforced by absence everywhere except the one glyph that declares it.
What shipped until 2026-08-12, and it is drawn here with the real class rather than a mock. It is not wrong so much as it is not a mark: at 16px in a bar there is nothing to recognise at a glance and nothing to put on a home screen. The favicon problem is the honest test, and a wordmark has no answer to it.
Rule 2, and it is what separates this from a logo in a box. Every window has to be crossed: the moment the whole letter fits inside its frame the system stops being a crop and becomes a picture that has to be redrawn for every new shape. Crop A crosses on the left, the bottom and the right.
Rule 4: two colours, and one of them is the ground. Swap them and the letter stops being the mark, because the counter becomes a dot and the frame becomes the drawing. Beside it here is a merchant tile at 36px, the component this one is most often mistaken for: that square is allowed any colour in the world, because the colour is the merchant's and not ours.
One contradiction in the source, resolved by the drawings. The concept page's rule 4 reads "inverted only on the phone icon", and the plate two sections above it draws the inverse and labels it "not used", with the reason: swap the roles and the mark stops being the mark. The home screen plate on the same page then draws the phone icon not inverted. Two of the three say the same thing and the drawings are the living truth, so the system carries no inverse and the exported touch icon is the paper field with the petrol letter. Recorded here rather than picked in silence, so that whoever wrote the sentence can overrule the drawing if the sentence was the decision.
The signature: the one thing in this product that moves without being asked
The founder, 2026-08-16: “давай на логотип сделаем анимашку, у нас где-то было расписано как делать анимацию”. It was, and it is the page this mark came from. The crop direction is one letter with a window cut out of it, three canonical windows, and one sentence holding them together: the tighter the crop, the more abstract the mark. That page demonstrates it with an eight second loop panning across all three.
What ships is not that loop, and the difference is the whole design. A loop in a bar is a thing that moves fifty times a day in a product whose first principle is calm. This is one move, once, on arrival: the window opens to the whole letter and closes into crop A. So the mark begins as a d you can read and becomes a mark you cannot, which is the concept’s own sentence played forwards in nine tenths of a second.
Above: the real object at its real size, 22px, which is what ships. Below: the same render magnified four times, because 22px is the size to ship at and the wrong size to study at. Nothing about the object changes; the stand holds a magnifying glass to it.
Why it is a fifth thing and not a fifth verb
Fade, advance, lift and press are all answers: something moves because a person did something. This is an arrival - nobody asked for it - and that is exactly why it is fenced rather than free. It runs on one surface (the public page’s bar), once per load, and never inside the app. The modifier is the fence: no .signature on the lockup, no movement, and the 54 app pages that carry a lockup deliberately do not carry it. A mark that moves every time you open the product is not a signature, it is a fidget.
| Part | What it does | On what |
|---|---|---|
| the window | scale from --crop-whole (0.42) to 1 on the letter box, so the window narrows from the whole letter onto crop A | --dur-signature 900ms, --ease-settle |
| the last letter | color from ink to petrol, and until then the word is all ink | --dur-state, delayed by --dur-signature minus --dur-state, so it finishes exactly when the window does |
--ease-settle is the right curve and this is its second consumer. It was declared for “an OBJECT arriving at a stop rather than a value being interpolated”, with the public page’s deck as its only user. A window closing onto a letter and clicking into place is the same event, and the overshoot of one and a half per cent is what makes it a click rather than a stop. 0.42 and not 0.46, which would be the arithmetic answer for “the whole letter”: at 0.46 the stem’s cap sits on the frame’s edge, and 0.42 gives the letter four units of air so it arrives inside the frame rather than against it.
What it cost, stated rather than hidden. The crop used to be the SVG’s own viewBox, which a transform cannot reach, so the mark now draws the whole letter into an oversized box and the frame does the cropping. The four numbers are the same four numbers. The drawing is identical and the rendering is not: measured before and after on all 108 marks in the product, every one differs, because the outline now falls on a different sub-pixel phase. The extents match to the device pixel at 1x, 2x and 3x and the petrol area differs by 3 pixels in 2557 at 3x; at the shipping size that is 69 of 484 pixels, all of them on the edge. Side by side at 3x the two are indistinguishable. Neither rasterisation is more correct, and without the change the crop cannot move at all.
The fill mode changed the day the hover arrived, and the change is invisible and load-bearing. The mark’s half ran with both, which holds an animation’s last frame forever - and a held animation outranks every declaration under it in the cascade, :hover included. So the one lockup carrying the signature would have been the one lockup that could not answer a pointer. Both halves now run with backwards, which still holds the ink through the delay and releases the element the moment the run ends. It renders the same because each animation ends on exactly what its base rule already draws: scale: 1 and --text-action. Only the mark’s half was blocking the hover - the word’s half paints a different property on a different node, and it changed for the narrower reason that a forwards fill holding a value the base rule already paints shadows that property for nothing. Found by the external critic, which is what the second instrument is for. Measured, not reasoned: 40 frames captured, 36 of them deterministic and all 36 byte-identical. The other 4 are the public page at two widths in two themes, and they are not deterministic at all: the same 4 differ between two runs of unchanged code, because that page’s loops are running when the shutter opens.
Limits
U14, context. The brand moves once, on one surface, and the modifier is the fence. The mark’s window opens to the whole letter and closes into crop A over --dur-signature on --ease-settle, and the wordmark’s last letter takes petrol as it lands. It runs on the public page’s bar only, once per load. the 54 app pages that carry a lockup do not carry .signature and must not: a mark that moves every time you open the product is not a signature, it is a fidget. The hover is the other half of U14 and it is not fenced: on every lockup in the product, hovering it PLAYS the crop - out to --crop-whole and back into crop A over --dur-signature - and holds no pose at either end, because the only good resting crop this drawing has is A. The two animations sit in two slots of the animation list through --sig-name, because sharing one slot replayed the arrival on a mouse-out, and any animation that spends the crop constant fills backwards and never both, or it outranks the hover and kills it. Full table with sources: Usage rules; the language it sits beside is on Motion.
States
One, and it belongs to the lockup rather than to the square. The founder, 2026-08-16, hovering the brand on the public page: “при ховере я не вижу анимации”. True, and true by construction - this page said no states and meant it. The mark is still not a target: it sits inside a lockup that is a link on none of the 57 pages that carry one, it carries aria-hidden="true" because the word beside it already says the name in text, and no :focus-visible and no [disabled] are declared. What it now has is one hover, hung on the lockup, because a person aiming at a 22px square with the word beside it is aiming at the brand and not at either half of it.
What moves is the window and not the mark. A mark that rose and grew would be a lift, and a lift says the object is pressable. The crop moves instead, which is the concept’s own sentence - the tighter the crop, the more abstract the mark - read out loud at the size of a hover.
And it is PLAYED rather than HELD, which is the founder’s correction and the more interesting half of this rule. The first version opened the window half way and kept it there while the pointer stayed: “не виглядає це, м’яко говорячи, не очень”. Right, and the reason is in the drawing rather than in the value. The field of this mark is the same colour as the bar behind it, so what a person sees is not a plate at all - it is the ink, and only the ink. Open the window part way and the letter shrinks off the frame’s edges: the rounded square stops being one, and what is left standing is a bowl with a stub of stem beside it. There is no good resting crop other than crop A, and that is not a defect in the number, it is what rule 1 of the mark means.
So nothing rests anywhere. The hover plays the crop and comes home: the window opens toward the whole letter and settles back into crop A, once, in the length of the signature. Every frame between the ends is a frame of motion, which is what a drawing that is only good at its endpoints is allowed to have - and both ends are crop A, so leaving mid-run lands where staying would have. It is the signature on demand: same distance, same length, same landing curve, given by the page on arrival and asked for by a person here.
Live, at the real 22px: put the pointer on it, on the word as well as on the square.
| State | What changes | On what |
|---|---|---|
.lockup:hover | scale on the letter box, played once: 1 → --crop-whole → 1, with the open at 36% of the run | --dur-signature. --ease-leave on the way open, because that half IS a leaving, and --ease-settle on the way home, which is the signature’s own landing curve. No fill mode, so the element is released the instant the pointer goes |
:focus-visible | nothing here | if the lockup becomes the way home at stage 12 the ring belongs to the anchor, the same way a subscription row’s hover is the row’s rule and not the merchant tile’s |
[disabled] | nothing, and there is nothing to disable | - |
One crop number in the file, and two rules spend it. --crop-whole is 0.42, declared on .brand itself: the signature travels from it to 1 and the hover goes there and back. Move the number and both move. The ladder of seven crops rendered at 5x is still the evidence, but it now says something stronger than “pick the midpoint”: it says every intermediate crop is a bad place to stop, which is why the second version stops at neither.
And the hover found a real bug in the signature, which is worth more than the hover. A CSS animation list is matched by position. While the two rules shared one slot, taking the pointer off the public page’s lockup put brandclose back into it - a name the browser had not seen a moment earlier - so the arrival replayed on a mouse-out: “once per load”, broken by a hover. They now live in two slots, and the signature’s slot is spelled identically in both rules through --sig-name, so neither rule can restart the other. Verified on the real page: after leaving the lockup, scale reads none and no animation is running.
Under prefers-reduced-motion the mark simply stays at crop A and the hover is nothing at all, and that differs from the four verbs on purpose. A verb held as a state still answers the pointer - a lifted mark is lifted, instantly. A gesture with both feet in the same place has nothing to say when it is not allowed to move, and inventing a pose for it would be inventing exactly the pose this rule exists to avoid. Measured with the preference set: scale reads none through the whole hover, on both surfaces.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| the letter | --text-action | --petrol, and --petrol-dark in the dark theme. 6.2:1 light and 6.8:1 dark on the field, both measured at stage 08 step 3 and both against the 4.5:1 ink threshold, with the size threshold unused |
| the field | --bg-surface | --paper, and --paper-dark. Inside the app bar the field IS the bar, so what a person sees is rule 4 working: two colours, one of them the ground |
| the corner | none, and it cannot be one | 23.4%, a ratio. The rule is a share of the short side, so any length would hold at one size and break at the next |
| the size | none | 22px, a literal, on the same list as the merchant tile's five: mark sizes in this product are set by the container, and no container size is a token |
| the crop | none, and it is a local property | --crop-whole, 0.42, declared on .brand itself. It is a fact about this drawing and nothing else in the product can want it, which is the same argument landing-story.css and landing-orbit.css already make for their own local properties. Two rules spend it: the signature and the hover |
| states | none | one hover, and it hangs off the lockup rather than off this square. See States |
WCAG 1.4.3 exempts a logotype outright and this system does not use the exemption. A mark nobody can see is still a mark nobody can see, so the letter is measured against the ink threshold like any other glyph in the product, in both themes.
Lives in design/system/components/brand-mark.css. Stands on all 57 coloured pages and on 1 grey one, the landing: wireframes/ is frozen and had no mark to freeze, which is the one place in this system where the grey corpus is behind the coloured one rather than ahead of it. Coloured pages carrying it: every one of the 55, starting at Home. Its two exported cuts are favicon.svg and apple-touch-icon.png, both at the repository root, linked from 180 of the 181 pages of the project outside wireframes/, the exception being the width harness, which is a tool rather than a page. The frozen 55 and their hub get no icon, which is correct: they are the structure contract and they are not the product.
<span class="lockup">
<span class="brand" aria-hidden="true"></span>
<span class="wordmark">Ten<span class="dd">dd</span></span>
</span>
The empty span is the component. It has no content slot because it has no content: the drawing is a mask and the field is a background, and anything written inside it would be clipped by the frame and painted over by the letter.