offgrid.inc

Offgrid's index is a four-column masonry wall of work on near-black (#060606), and almost nothing else. There is no header bar, no hero image and no footer: the OFF/GRID wordmark is simply the first cell of the first column, the studio's one-sentence positioning statement is the second, and from there the grid runs uninterrupted for 8,658px until the columns rag out and the page ends in black. Every tile keeps its own aspect ratio — square app icons, tall portraits, wide web shots — cropped to one column width with a 2px corner, and each carries a two-line caption beneath it rather than a label on top of it: project name in white, then discipline and year in gray (#928f8c). Type is one neo-grotesque at one size (24px/700, -0.24px tracking) for both the wordmark and the statement, so the page has essentially no type scale to tune. The result reads as a contact sheet rather than a pitch: all the color, motion and personality belongs to the thumbnails, and the shell's job is to disappear behind them. The only persistent chrome is a pair of pills floating at the bottom center — a gray About and a white Contact — which is the whole navigation.

Build on near-black: page ground #000000 with panels at #060606, body copy pure white, secondary copy #928f8c, and no third text color. Give the layout a four-column masonry with a single generous gutter (~32px) and a matching outer margin; let items keep their natural aspect ratios so the columns end ragged, and never normalize them into equal-height cards. Set everything in one tight neo-grotesque (Helvetica Now Display, Inter Tight or similar) at one weight — 700 — and essentially one size: 24px with 1.2 line-height for display lines, 28.8px line-height for the running sentence, -0.01em tracking throughout; captions drop to 14–15px, name at 500 in white, metadata at 400 in gray directly beneath. Refuse a header: place the wordmark in the first grid slot and the positioning sentence in the second, both inside the grid's own rhythm. Radii are 2px on every image, panel and container, with exactly one 999px exception reserved for navigation. No borders, no shadows, no dividers — separation comes from the gutter and from the images' own edges against black. Navigation is two fixed pills centered at the bottom, 40px tall with 12px/24px padding and 12px/400 labels: a muted #2e2b2a fill for the secondary and a solid #FFFFFF fill with #000000 text for the primary. Motion stays at the tile level — a short opacity or scale lift on hover (150–200ms, ease-out) and nothing that moves the grid. The two moves that make it recognizable: the shell carries no color at all, so every saturated pixel on the page is content; and the page ends where the content ends, with no footer to close it.