# the marks, what we learned

three marks, three jobs, one sheet. read before touching a logo, a seal or the wordmark. the research is in `../../archive/design/`: `work-point/`, `system/`, `concept-development/`, `seal-experiment/`. everything at this level is a decision.

the wordmark carries the name, the work point carries what holds, the seal signs. the bubbles are
retired: see section 2.

## 1. the mark is a work point

`mark.svg` `mark-heavy.svg`

three lines of equal length through one point: vertical, horizontal, and one diagonal rising left to right. in a braced-frame connection detail the centrelines of the column, the beam and the brace meet at a point engineers call the work point. the mark is those centrelines drawn solid. it is taken from the drawing, not put on it.

| line | member | the story | carries |
|---|---|---|---|
| vertical | column | a tower | compression, pushed |
| horizontal | beam | a floor someone stands on | bending, bent |
| diagonal | stay, brace | a bridge | tension, pulled |

push, bend, pull: the three ways a load is carried. there is no fourth. and a post and a beam alone rack; the diagonal is why the frame stands. what they meant is what stands.

rules

- one diagonal, rising left to right. never mirrored, rotated or doubled. two diagonals is an asterisk, and the asterisk is every ai company's sparkle. none is a crosshair.
- forty-five degrees. not a real stay, not a real brace; the drafter's diagonal. it says drawing, not photograph.
- ink only. colour is the conversation, never the mark. see `../COLOR.md`.
- line to length is one to forty at 120px and up (`mark.svg`), one to ten below (`mark-heavy.svg`), so the joint still reads at 16.
- clear space is one arm: half the mark's length on every side.
- butt caps. no rounding.

## 2. the wordmark is the name

`wordmark.svg` `initials.svg` `figures/pull.svg` `lockup-stack.svg` `lockup.svg` `.wordmark` in `../styles.css` `Sheet.word()` in `../sheet.js`

the name in two lines, title case, one face, one weight. no serif, no capitals, no tracking, no
justification, no weight split. it is the only way the name is written, anywhere.

three numbers, all measured off Neue Haas Grotesk Display 400 and all in `../styles.css`. regenerate
them if the face ever changes:

| number | what | why |
|---|---|---|
| `-.047em` | the second line is pulled left | NHG's capital I carries that much more left sidebearing than its S. without the pull the I sits inset — 3px at 64px — and the left edge is gone |
| `1.02` | the leading | Structural has no descender and NHG's l ascender is exactly its cap height, so both lines have flat tops and the first a flat bottom. no other pair of words would take it this tight |
| `.16em` | the word space, one line only | the face's own space. for a strip too short for two lines — a nav bar, a title block, an app bar — where closing it any further makes one word of two |

the left edge is the whole reason to stack: corrected, the S sits over the I, so the company's
initials read down the edge of its own name without being drawn. that is why the bubbles retired —
they said the same two letters beside the word that the word already says above itself.

rules

- two settings, and there is no third: stacked (`lockup-stack.svg`) and one line (`lockup.svg`). both carry the mark; the name is never signed alone except on a board whose own drawing is already the mark.
- in a lockup the mark's stroke is the wordmark's stem: 9 at an em of 100, measured off NHG Display 400, the same number in both settings. one to forty is the mark standing alone — beside the name it is not a centreline near a word, it is a letter of it, and a letter at half the weight of its neighbours is a ghost. the two lockups therefore have different mark ratios, 1:17.8 stacked and 1:8 on one line, and that is the same law as `mark-heavy.svg`: the shorter the arm, the heavier the line, so the joint still reads.
- ragged right. never track the short line out to meet the long one; the rag is the setting.
- clear space is one arm of the mark beside it, half the mark's length, as the mark's own rule.
- no centre line. a bubble sits on a grid line; a joint does not, it is the joint.

## 3. the seal is the name around the joint

`seal.svg` `seal-mark.svg`

a pe seal is a name in a ring around an emblem. the work point is the emblem. no inner ring; the lines run out to the name. the name is split over the joint, STRUCTURAL above and INTELLIGENCE below, and nothing else is in the ring. the lower word reads on the inside of its arc, where letters crowd, so it is tracked wider (9 against 7) to look the same. `seal-mark.svg` is the small one, ring and joint, no words, for badges and cards. the seal lands once, bottom right, on what is signed: the last frame, an offer letter, a paper, the card. nowhere else.

## 4. where each one lives

| place | mark |
|---|---|
| the tab, the favicon | the work point, heavy |
| the nav, the footer, a link | the work point, thin |
| the title block, the lockup, the card front | the wordmark, stacked; one line where the strip is short |
| a screen number, a note anchored to a place | a bubble with the place's name |
| the last frame, anything the lab signs | the seal |

nothing is said twice the same way. the wordmark says the name; the mark and the seal do not repeat it,
and where the wordmark stands nothing spells s and i beside it.

the leader is not a fourth mark. a box standing off a member, a line to it, a ring where it lands: that is the sheet's own alphabet, the way a checker has always said a thing about one member, and it arrives here because the product draws it — `Sheet.point`, used by the app and by every quotation of it. it is ink, and red only when the engineer is writing red. never put the work point at the end of a leader; the mark is the company, not a pointer.

## 5. motion

`motion/mark.svg` `motion/bubble.svg` `motion/seal-3d.svg` `motion/space.svg` `motion/draw.py`

motion is not a topic and there is no motion slide. each mark moves on the slide whose claim the
movement makes — the mark where the frame racks, the wordmark where the name is two lines, the seal
where it lands, the bubble where a bubble numbers a place — and a motion file rests as the still, so
print, a thumbnail and a pdf show the finished mark. what has no reader of its own is not a file:
`turn`, `arrive`, `still` and `lattice` are drawn inline by `../posters/draw.py`, and the joint in steel
is live on its own slide. the exports of those are in `../../archive/design/motion/`.

- a pen has one speed. lines draw linear, never eased like software.
- the mark: the tower draws up, the floor draws across, the frame racks six degrees, the brace snaps in over ninety milliseconds and the frame straightens with a hair of overshoot. one second, the whole story.
- the wordmark: the two lines draw at pen speed, the first from the left, the second after it. never letter by letter — a plotter draws a word, not a keystroke. the two lines carry 410 and 473 units of ink, so they take time in that ratio: one speed, two lengths.
- the bubble, numbering a place: the grid line draws itself at pen speed, the bubble's ring draws at the end, then its number.
- the seal: the only thing that arrives from off the sheet. it lands hard, once, and when it lands every blue line turns to ink. `seal-3d.svg` is how it lands on the brand's sheets; `.seal.land` in `../styles.css` is the plain scale-down the product uses, where a die tipping in a pane would be a joke.
- in space, the joint is still three lines. the column stands and the beam spans in the plane of the sheet; the brace does not — it leaves the joint into the next bay, back through the sheet, the way a brace in the perpendicular frame does. from where the drawing stands its two halves fall on one rising diagonal, so the joint is the mark, exactly. `space.svg` leaves that angle at one speed, holds at the three-quarter, and comes back. orthographic, because only orthographic collapses to the mark line for line, and it never turns past the side, so the mark is never seen mirrored. there is no fourth line and no lens: depth is the motion, the way an engineer turns a model in their hand.
- the seal in space is the same move as a stamp. a die is flat, so tipping it is a squash and nothing else: the ring, the name and the joint tip as one. `seal-3d.svg` comes down on edge, flattens as it falls, lands a hair past flat and settles.
- the joint with a lens (`turn`, `arrive` in `motion/draw.py`): the three lines wide at the near end and narrow at the far end, and nothing else — no shading, no thickness, no fourth line. `turn` rotates once about the column at one speed and rests as the mark; `arrive` draws the tower and the floor, racks the frame, and brings the brace from four lengths behind the sheet at one speed, the lens doing the acceleration. pure svg, one `<animate>` per line, no script. it belongs where the sheet has depth — the poster `stands`, a screen — never in a title block.
- the grid (`lattice()` in `motion/draw.py`): one law and one pen. the law: between two crossings the pen lays a stroke as long as its place on the sheet — the whole cell at the edge, less and less toward the middle, and near the centre it does not come down at all. the space inside is where the pen never went; it is never a shape, a mask or a fade, and its edge is soft because the strokes shorten. the pen: it works the sheet the way a plotter does, every line at one speed, horizontals then verticals. nothing is timed by where it is, so the motion says pen and the geometry says grid, and neither says it twice. `void` puts the words in the space once the pen has passed; `stands` builds the joint there with `arrive`. a renderer without motion shows the grid at rest, which is the law of every motion file here. after manfred mohr, P-25, 1970.

## 5b. in steel

`3d/joint.js` `../posters/steel.html`

the same joint, built. a W14x90 column, a W24x68 beam and a W12x50 brace meeting at one point, in webgl.
what makes it ours and not a render:

- **orthographic.** a drawing has no lens. only an orthographic camera collapses the joint to the mark line
  for line, so the drawing's angle *is* the logo, exactly, not approximately.
- **the section is the shape.** a W is a W: web, flanges, and the fillet where they meet, at the published
  depth and thickness. the cut ends carry a chamfer the width of a burr, so an edge catches the room.
- **the connection is detailed.** a gusset plate fills the corner between the column and the brace, in their
  own plane, with a bolt line up the lap; the column has stiffeners level with the beam's flanges, because
  that is where the flange force has to go. that plate is most of what tells an engineer this is steel.
- **mill scale.** one field of noise used twice, as roughness and as a normal: the surface is uneven the way
  a hot-rolled flange is uneven, so light travels along it instead of sitting on it. no colour, no pattern,
  nothing that reads as a texture. and because scale is an oxide, and an oxide does not conduct, the steel is
  not a perfect metal: enough is left for a shadow to land on, and the dark a brace throws across a beam is
  how an eye reads which member is in front.
- **the grain.** steel is rolled, so it reflects along its length differently from across it. that is
  anisotropy, and it is most of the difference between a grey solid and a piece of steel. the extrusion's own
  uvs run along the member, so the grain runs the way the mill rolled it; a cut plate is sheared across, so
  its grain lies the other way and it sits a shade apart from what it is bolted to.
- **the light is a room, and the room is not the same all the way round.** a white ceiling, one crisp horizon,
  a grey floor, and two strip lights — a long one overhead, a tall one down one side — because a strip is
  what a photographer hangs over steel: a long thin source draws a long thin highlight, and as the joint
  turns that highlight runs the length of a flange. it is the only thing that moves on a still face. one end
  of the room is bright and the other is far, so a face does not hold one value for a whole turn. one raking
  key light, for the shadow. all of it drawn on a canvas, so there is no asset to fetch and nothing to grade.
  steel is grey because steel is grey.

it never stops: a slow figure of eight about the work point — the yaw once round, the pitch twice — so the
path closes and comes back through the drawing's angle twice a turn, where the joint is the mark again for a
moment. it never turns past the side, so the mark is never seen mirrored. drag it and the drift lets go; let
go and it returns to the drawing at one speed and the drift starts again from there.

the ink is off. the steel is the thing that stands, and the mark is what an engineer draws about it —
`mount(el, { ink: true })` puts the three centrelines back over it, at one weight with butt ends, projected
each frame so a line never foreshortens in width, for a page that wants to show both at once.

the brace runs through the joint rather than stopping short at the gusset. that is the one idealisation, and
a deliberate one: the work point is where the centrelines meet, and this is that point made solid.

three.js is vendored in `3d/vendor/`; the page needs to be served, like everything else here that fetches.

## 6. the pattern

`../sheet.svg` `figures/pattern.svg` `figures/grid.svg`

the mark is never placed. brace one bay of a real frame and the mark appears at every node the brace touches. patterns use a named building's grid, never a generated lattice: even is generic.

## 7. the deck

slides 028 to 049 carry this in order, from the work point to the real grid, and 030 is the joint built, live: the thing the mark is of. 051 is the voice: ink asks, blue answers, red does not hold. 155 to 162 are the product, quoting its own log. the marks on every slide, the site and the product are drawn once, in `../sheet.js`.

one claim, one drawing, one line. a slide that carries both a claim and its proof is saying it twice — the reasoning lives here and in `../COLOR.md`, not on the sheet. the research the decisions came out of is in `../../archive/design/`.