The NorthBlue logo is not a drawing anyone can open and nudge. The letters are outlined paths with no weight axis, and the navigation mark's corners are generated from geometry rather than drawn. That makes it derived artwork — five numbers in, six SVGs out. This is the record of what those numbers are and why they sit where they do. For colour, voice, the glass and how the mark is used, see the identity.
One lockup: the stacked wordmark, "north" over "blue", with the navigation mark set after the "e". The mark can run alone where the full lockup is too wide, but the wordmark never runs without either the mark or a deliberate decision to drop it.
The logo is black on light surfaces and white on dark ones — nothing else. There is no blue version. Blue exists in the identity only as light refracted through the glass material, never as a fill. The full rule is in the identity.
Keep clear space of at least the mark's own width — about 250 units, a quarter of the wordmark — on every side. The lockup's viewBox already carries 14 units of trailing padding; that is spacing, not clearspace, and does not count toward it.
The wordmark arrived as outlined paths, not live text. There is no font file to re-set at a heavier cut, and the source family jumps straight from Medium to Bold with nothing between — which is a large step for a logo.
So the weight is synthetic. The nine letter paths sit in a group that strokes its own outlines in the fill colour, which dilates every stem by the stroke width. Base stem is 55 units; at the shipped value of 3 the stems read 58.
<g fill="#000000">
<g stroke="#000000" stroke-width="3" stroke-linejoin="round" stroke-linecap="round">
<!-- the nine letter paths -->
</g>
<path transform="translate(943.64 453.19) scale(5.2)" d="..."/> <!-- the mark, unstroked -->
</g>The mark sits outside that inner group deliberately. Letter weight must never thicken the mark — it is a solid shape, not a stroked one, and dilating it would blunt the point independently of the radius control.
The ceiling is about 12. Dilation is uniform, which is not what a real heavier cut does — a true Bold thickens stems more than curves and keeps counters open. Past roughly 13 units the "e" aperture and the "o" counters visibly close; past 16 the stems merge. If the wordmark ever genuinely needs to be heavier than that, the honest fix is to re-set the type in the source font at a heavier weight and re-outline, not to push this number.
The mark arrived with its rounding baked in — corners hardcoded as Bézier curves, with no radius to adjust. Extending its four straight edges until they meet recovers the sharp quadrilateral underneath, and the corners are now generated from that quad at whatever radius is asked for.
Each corner is a circular arc tangent to both edges. Tangent distance is r / tan(θ/2), so the same radius eats much more edge at the acute tip (43°) than at the obtuse notch (142°) — which is why the notch carries its own slightly larger radius, at 1.28× the point radius, to match the original drawing's proportions.
| Corner | Sharp vertex | Interior angle | Role |
|---|---|---|---|
| tail | 49.472, −1.386 | 51.9° | Top right. The trailing edge of the sweep. |
| tip | 30.125, 53.995 | 43.0° | The point. Sharpest corner, so most sensitive to radius. |
| notch | 19.191, 29.122 | 142.1° | The concave fold. Rounds the other way. |
| left | −3.677, 16.792 | 47.2° | The leading point, nearest the "e". |
Radius changes the bounding box. A sharper point reaches further than a rounded one, so the mark's ink box is not fixed. Placement is computed from the box measured after the path is built — never from stored constants. Change the radius without re-measuring and the mark drifts off the baseline.
Two measurements anchor the mark, both taken from the wordmark itself rather than from the canvas: the right edge of the "e" at x 880, and the baseline of the "blue" row at y 723.5.
max(1088, 940 + mark width) + 14, where 1088 is the right edge of the "h". The mark currently overhangs the wordmark, so it sets the width at 1208. Shrink or move the mark and the box must be recomputed, or the lockup will carry dead space and drift off-centre inside the square avatar.Everything under public/brand/. The three wordmark variants differ only in fill; the geometry is identical.
| File | Use it for |
|---|---|
| northblue-wordmark.svg | Full lockup in black. The canonical file. |
| northblue-wordmark-white.svg | Reversed, for black grounds. Embedded by the LinkedIn assets. |
| northblue-wordmark-current.svg | Fill is currentColor — inline it where the logo should inherit text colour. |
| northblue-mark.svg | Mark alone, black, cropped to its own ink. |
| northblue-mark-white.svg | Mark alone, reversed. |
| northblue-mark-current.svg | Mark alone, inherits colour. Favicons, avatars, tight spaces. |
| northblue-linkedin-logo.png | Company avatar, white on black, 400 × 400. -light is black on white. |
| northblue-linkedin-company-cover.png | Company Page cover, 4200 × 700. |
| northblue-linkedin-profile-cover.png | Founder profile cover, 1584 × 396. |
| northblue-linkedin-launch-post.png | First-post image, 1200 × 627. |
| build-brand.py | Regenerates all six SVGs. The five knobs live at the top. |
Edit the knobs at the top of build-brand.py and run it. Never hand-edit the SVGs — they are output, and the next run overwrites them.
python3 public/brand/build-brand.pyThe four LinkedIn PNGs embed northblue-wordmark-white.svg by reference, so they go stale the moment the wordmark changes and must be re-exported.
macOS has no good SVG renderer installed here. The PNGs were exported with qlmanage, which always writes a square thumbnail and centre-crops anything that is not square — which silently cut "north" off the top of the covers the first time. The workaround is to wrap each non-square SVG in a square canvas, render, then crop back with sips -c <height> <width>. If you install a real renderer (rsvg-convert, Inkscape, or just open them in a browser and export), use that instead — it will give cleaner output and skip the whole dance.