Third system this identity has worn, and the first one with a mark of its own. An atlas under a compass rose: a globe you can read and a needle that points. Six colours, three faces, one owned material, and a north needle that is the only thing here allowed to move.
01 · The Mark
A compass rose set over a gridded globe. The globe is the territory — the systems, the codebases, the org charts that any real problem sits inside. The rose is the read on it. One point of that rose, north, is True North orange, and it is the only warm thing in the mark: the decision, once the territory has been surveyed.
Owned geometry
The four-point star at 90°, doubled at 45°, with facets split on the vertical axis so every point reads as two planes. That split — light plane, dark plane, hard seam between — is borrowed by the seam rule under every wordmark, by the split hero on the site, and by the divider in every document template.
Simplification
Below 24 px the globe, the tick bezel and the 45° star all collapse. What survives is the rose alone — four points, north in True North orange. The glyph takes the same silhouette as an outline. That is the whole rule.
The wordmark is DJ Von Frank set in Saira Black at its widest cut. The seam rule and tagline sit under the mark text, never beside it. Icon always left or above, never right. Every lockup below is rendered at its published minimum width, so the page is the ruler.
01 · HorizontalIcon + wordmark. Anywhere with room for the full name.
MIN 168 PX · djvf-logo-horizontal.svg
02 · Horizontal + taglineFirst impression — covers, decks, leave-behinds.
MIN 240 PX · djvf-logo-horizontal-tagline.svg
03 · StackedSquare or narrow space.
MIN 144 PX · djvf-logo-stacked.svg
04 · Stacked + taglineStacked first impression, leave-behind front.
MIN 200 PX · djvf-logo-stacked-tagline.svg
05 · Compact — the working defaultSite header, email signature, document chrome. Below the minimum, drop the third block and keep icon + DJVF.
MIN 208 PX · djvf-logo-compact.svg
05 · Dark groundTreatment 02. Wordmark to Paper White; the icon is unchanged, because the bezel carries it.
djvf-logo-compact-dark.svg
Type alone, no icon. Three marks, each with a dark twin.
06 · WordmarkType-only full name, seam, tagline.
djvf-wordmark.svg
07 · AbbreviatedAvatars, stamps, anywhere the room is square.
djvf-abbreviated.svg
08 · LettermarkDJVF + seam + tagline, type-only compact.
djvf-lettermark.svg
LAW: each of these is redrawn, not scaled. The handoff rule is a size, not a preference: at 48 px and up use the primary, below 48 px use Simplified, below 24 px use Micro, and inside interface furniture use the Glyph so it inherits currentColor.
The micro drawing is this page's favicon, inlined. The glyph is the bullet in the never list below — there are no emoji in this system.
LAW: corner radius is always 22% of tile width. Tiles carry the icon at 66% of tile width, optically centred — the north needle is longer than the south point, so geometric centring sits the mark too low. Only the app icon may use The Surface as its ground; every other tile is flat.
LAW: full colour is the default and everything below it is a fallback with a trigger. The order is fixed: if full colour cannot reproduce, step down one rung, never two. Black and White masters are the only ones cleared for embroidery, etching, foil and single-ink print.
Default. Everything digital, and print above 4 colours.
Wordmark to Paper White. Icon unchanged — the bezel carries it.
Wordmark to Midnight Green, 15.8:1. No outline, no shadow.
100K only. The glyph replaces the icon — the globe cannot survive one ink.
Knockout. Foil, etching, embroidery, single-colour merch.
Newsprint and fax. The needle still separates — that is the test it passes.
Premium. Cover slides, the site hero, the app icon. Three uses, no fourth.
04 · Black masterdjvf-black.svg · djvf-icon-black.svg · djvf-favicon-black.svg
05 · White masterdjvf-white.svg · djvf-icon-white.svg · djvf-favicon-white.svg
06 · Greyscale masterdjvf-grey.svg · djvf-icon-grey.svg
Code references these names. Renaming one is a breaking change and never happens quietly. Transparent means genuinely empty, never a white rectangle. No rasters ship — export them from these SVGs at the size you need, at 2× for anything that lands in an email client, which is the one place SVG is not safe.
| Folder | Contract |
|---|---|
01-primary-lockups/ | the five approved lockups, light + dark ground |
02-typography-marks/ | type alone, no icon |
03-icons/ | the four icon drawings |
04-tiles/ | square containers — the only files that carry a ground |
05-one-colour/ | black, white, greyscale reproduction masters |
06-graphics/ | seam rule, Surface fallback, palette strip |
02 · Colour
Three do the work: Midnight Green grounds everything, Paper White carries the type, True North is the only warm thing in the system. Two more are reserved for signal — they are never decoration and never brand furniture. The sixth is not really a colour at all, it is what The Surface falls back to when it cannot render. Every ratio below was measured on 2026-08-13 and the failures are written down as laws rather than nudged away.
Midnight Green
#00272C
The one dark. Heroes, headers, footers, dark bands, and every line of body type on a light page. There is no second dark and no lighter “almost midnight” for large areas.
True North
#FF6B1C
Named for the needle it colours. The only warm value in the system, and the only one allowed to move: primary buttons, the eyebrow on dark, the live rule, the needle. Used once per view, twice at most.
LAW: never type on white at any size. On light grounds it is a fill, a rule, or a shape. The v2 palette put it at 4.0:1 on ground and it drifted into small labels; at 5.6:1 on Midnight Green it is now legal for body text on dark, and that is the only place it gained.
Paper White
#FFFFFF
True white, never off-white. Cards, sheets, knockout marks, and all type on dark grounds. The page beneath the cards is a 5% Surface Steel tint so white sheets have something to sit on.
Landfall
#09E85E
Land sighted. Builds that pass, work that shipped, checks that came back green, the “live” dot on a case study. Never a decorative green and never a second accent.
Meridian
#279AF1
A line of longitude: the thing you are still travelling along. In flight, in review, in progress, plus every neutral informational note that is not a warning.
Surface Steel
#245D63
What The Surface collapses to with no WebGL. Doubles as the link and eyebrow colour on light grounds, and draws the bezel and grid inside the mark.
LAW: a light-ground colour only. On a dark ground it is a shape, never a label.
The signal pair
Neither is brand furniture and neither appears in a lockup, a header, or a piece of marketing.
| Use | Rule |
|---|---|
| Status | shipped / passing (Landfall) · in progress / info (Meridian) |
| Data visualisation | Fills only. Bars, nodes, tree branches, stat tiles. Never the axis, never the label. |
| Case-study coding | Landfall = delivered engagements. Meridian = live and ongoing. Nothing else gets a colour. |
| Demo accents | Inside a product demo or diagram frame only, where the frame makes clear it is not chrome. |
| Never | Logos · headers · buttons · marketing copy · anything adjacent to the mark. |
GREYSCALE SEPARATION: Landfall 0.59, Meridian 0.30, Midnight 0.02 of 1. The three stay distinguishable in a black-and-white print, which is why the pair can carry status without a shape change.
Every one of these is a color-mix() against a named token, never a pasted hex. Repoint Midnight Green and the whole page re-renders correctly — that is the test this table exists to pass.
| Token | Value | Formula | Ratio |
|---|---|---|---|
--muted | #476467 | 72% Midnight on white | 6.4:1 ✓ |
--faint | #597276 | 65% Midnight on white | 5.1:1 ✓ |
--band | #EDF3F3 | 8% Steel on white | — |
--page | #F4F7F7 | 5% Steel on white | — |
--dim-d | #A8B6B7 | 66% white on Midnight | 7.6:1 ✓ |
--hairline | — | 13% Midnight · 16% white on dark | — |
NO RED. There is no red in this palette. An error is carried by a 2 px Midnight Green border, the glyph, and a Plex Mono line under the field — never by True North, which means action, not failure.
03 · Type
Saira and Archivo are siblings from the same foundry, so the wordmark and the headlines share a skeleton without repeating each other. Plex carries everything a reader actually reads. All four are OFL and all four are self-hosted latin subsets in production, so the site makes zero external font requests. This document makes none either — it names the faces and falls back to the system stack rather than reaching for a CDN.
Wordmark only
Saira · Black 900 · wdth 125The wordmark, and nothing else. Never a headline, never a heading, never live text in production. Outline it and it becomes artwork — which is what the image above is.
Display
Headlines earn their size
Section heads keep the register
Archivo · 500–900Headlines, section heads, card titles, buttons. 800–900 for display, 700 for anything under 24 px.
step-4 · 900 · -0.025em | step-2 · 800
Body / UI
Body copy reads long without asking for attention. It sets around sixteen pixels over a 1.55 leading, holds a 66-character measure, and never competes with the figures beside it. Links are Surface Steel with a one-pixel underline three pixels clear of the baseline.
IBM Plex Sans · 400 · 500 · 600 · 700Body and UI. Everything a person reads for longer than a glance sets here. Long-form articles move to a 1.65 leading and keep the same measure.
Mono
CS-0412 · 38% lift · 14 weeks · 2026-08-13
0123456789 · 1111111111 · 0000000000
IBM Plex Mono · 400 · 500 · 600 · TABULAREyebrows, figures, IDs, file names, code. Tabular figures always, so columns of numbers line up. Proportional figures in a table, price, date or ID are on the avoid list.
| Family | Weights / axes | Duty | Class |
|---|---|---|---|
| Saira | BLACK 900 · wdth 125 | The wordmark, and nothing else. | Wordmark only |
| Archivo | 500 – 900 | Headlines, section heads, card titles, buttons. | Display |
| IBM Plex Sans | 400 · 500 · 600 · 700 | Body and UI. | Body / UI |
| IBM Plex Mono | 400 · 500 · 600 · TABULAR | Eyebrows, figures, IDs, file names, code. | Mono |
04 · Clear space, minimums, thresholds
0.5 × icon height on all four sides, measured from the outer bezel, not from the star points. Dense interface chrome may drop to 0.3, never below. Nothing enters that band — not a rule, not a nav item, not a page edge.
| Asset | Screen | |
|---|---|---|
| Micro drawing (favicon) | 16 px | 5 mm |
| Simplified icon | 24 px | 7 mm |
| Primary icon | 48 px | 14 mm |
| Compact lockup | 208 px | 55 mm |
| Lockup with tagline | 240 px | 64 mm |
DEGRADATION: below 240 px the tagline is dropped, not shrunk. Below 168 px the wordmark is dropped and the icon stands alone.
48 px and up
Full grid, tick bezel, both stars.
24 – 48 px
Tick bezel goes solid, grid drops to four lines.
Below 24 px
The rose alone. Globe and bezel drop away.
Interface furniture
One colour, inherits currentColor.
Scaling the primary icon below 48 px instead of switching drawings is on the never list.
| Thing | Value |
|---|---|
| Body measure | 66 characters · ~16 px over 1.55 leading (1.65 for long-form) |
| Link underline | 1 px thick, 3 px clear of the baseline, Surface Steel |
| Hit target | never below 44 px |
| Focus | a 2 px Surface Steel ring, never a glow |
| Radii | 8 chips · 14 cards · 22 panels · pill buttons · 22% of width for tiles |
| Shadows | 0 1px 3px at 5% resting · 0 12px 30px -14px at 22% floating. Nothing else. |
| Glass | blur-1 saturate(170%) blur(14px) sticky chrome · blur-2 saturate(140%) blur(22px) overlays |
| Timing | hover 170 ms · press 90 ms · release 200 ms · ease cubic-bezier(.33,0,.15,1) |
| Motion ceiling | Every state change resolves in 260 ms or less. Continuous ambient surfaces are exempt: 2026-08-26 ruling |
| Hover | a border-colour change plus a 1–2 px lift. Never a scale, never a colour wash |
| Ground rhythm | light-first, dark-punctuated — roughly one dark band per two screens, never two in a row |
Depth comes from hairlines, not shadows: a one-pixel border and a one-to-two-pixel lift, and the two shadow tokens exist only for genuinely floating surfaces. Two grades of glass — a third makes depth ambiguous. Where blur is unsupported, the glass falls back to solid Midnight Green; anyone who sets reduced transparency gets the solid, not a thinner blur.
05 · The Material
Not a colour. A material: a slow liquid-chrome field in Midnight Green with a low, out-of-phase thread of True North running through it, tone-mapped so the brightest band lands on a muted steel instead of blowing to white. It is the one texture this brand owns, and owning exactly one is the point.
Render site 01
One page, above the fold, once.
Render site 02
The canvas at the top of this page is that render. It is the only live Surface here.
Render site 03
Exported as a still frame, never a live canvas in a tray.
LAW: exactly one owned motion. Two owned motions is zero owned motions. Three places, and there is no fourth.
| Speed | 0.12 |
| Amplitude | 0.32 |
| Base | #00272C · linear 0, 0.15294, 0.17255 |
| Orange thread | 0.04 |
| Pointer | it answers the pointer, and that is the whole interaction |
REDUCED MOTION: one still frame is drawn at t = 8.0 and the loop never starts. Movement is removed, never slowed — a slowed signature reads as broken.
No WebGL: the flat linear-gradient(158deg, #0A4C4A, #00272C 46%, #001A1E) underneath simply shows, and nothing structural is lost. Print: Surface Steel flat, no gradient at all. Those two stops and this gradient are the only gradient in the system — gradients between brand colours are on the avoid list.
06 · Exclusions
Written down so the gaps stop looking like oversights. The glyph is the bullet; there are no emoji in this system.
The mark · misuse
Colour & surface
Type & motion
The Surface
The signal pair
Documents & print
Codes & signatures
07 · System Reference
Repoint the six values at the top of this document’s stylesheet and every section above, including every filled example, re-renders correctly with zero other edits. Nothing in here hardcodes a hex that has a name. That is what makes this a system rather than a mood board, and it is the same test every client Brand OS has to pass before it is handed over.
Three deliberate exceptions, each labelled where it sits in the stylesheet: the gradient stops inside the mark artwork, which are not page CSS at all; the two Surface stops, which belong to the material; and the fail-pill pair this document uses to write a failure down. The Surface itself is not an exception — its script reads the three colours it needs back out of the tokens, because a palette duplicated in a script does not follow a repoint.
