# offgrid.inc

Source: https://offgrid.inc/
Captured: 2026-09-20
Tags: agency, landing, dark, both, swiss, minimal, editorial, confident, premium, serious, technical
Colors: #060606, #2e2b2a, #e8f5fc, #6e6e76, #4d4f51, #e4e0c8, #928f8c, #aeaead
Type (h2): Offgrid Sans Bold · 24px/19.2px · 700 · tracking -0.24px — "OFF/GRID"
Type (body): Helvetica Now Display Bold · 24px/28.8px · 700 · tracking -0.24px — "Offgrid® is a modern design studio that makes brands impossible to ignore."
Type (button): sans-serif · 12px/normal · 400 — "Contact"
Button: "Contact" — fill #ffffff, text #000000, radius 999px, border 0px, padding 12px 24px, height 40px, type 12px/400
Radii: 2px (147)

## Images

- Hero (desktop): https://media.lvly.design/library/offgrid-inc/hero.webp?v=c033852c
- Page crop (mid-1): https://media.lvly.design/library/offgrid-inc/mid-1.webp?v=13ede9a1
- Page crop (mid-2): https://media.lvly.design/library/offgrid-inc/mid-2.webp?v=a471ce12
- Hero (mobile): https://media.lvly.design/library/offgrid-inc/mobile-hero.webp?v=708b1f26
- Full page (desktop): https://media.lvly.design/library/offgrid-inc/full.jpg?v=d70f04a4
- Full page (mobile): https://media.lvly.design/library/offgrid-inc/mobile-full.jpg?v=13fdb9f3
- Clip preview (mp4): https://media.lvly.design/library/offgrid-inc/video-1wflu5.preview.mp4?v=e21c3bb3

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.

## Steal-worthy details

- Wordmark as a grid cell, not a header — the logotype sits in the first column's top slot on the same margin as every thumbnail, so the page opens with zero chrome and no nav bar to style
- The positioning sentence takes a tile's place — 24px/700 with -0.24px tracking on a ~30-character measure, set in the grid where a thumbnail would be rather than in a centered hero block
- Two-line caption under every tile — name in white, then discipline and year in #928f8c on the next line; a catalog entry, never an overlay or a hover reveal, so nothing covers the work
- One radius for the whole page with a single exception — 147 elements share a 2px corner, and only the two nav pills go to 999px, which is what makes them read as the only interactive things on screen
- Persistent pill nav pinned bottom center — About on a dark gray fill beside Contact in solid white on black text, 40px tall, 12px/400 labels, 12px/24px padding; it is the entire navigation and it rides the full scroll
- Tiles keep their native aspect at one column width — square logo marks, 4:5 portraits and 16:9 screenshots sit side by side unnormalized, which is what produces the masonry rag instead of a tidy card grid
- Saturation is quarantined in the artwork — the shell is #000/#060606 with white and gray text only, so the magenta, cyan and gradient work supplies 100% of the page's color and never competes with UI
- No footer at all — the columns finish at different heights and the page simply stops in black with no links, colophon, credits or CTA band, because the fixed pills already cover both destinations

## Style recipe

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.