# vanschneider.com

Source: https://vanschneider.com/
Captured: 2026-10-30
Tags: portfolio, landing, mixed, both, editorial, swiss, maximalist, confident, rebellious, premium, edgy, human
Colors: #030303, #2d2e2d, #4f4f4f, #f8f8f8, #d1d1d1, #6d6d6d, #8e8e8e, #b0b0b0
Type (h1): Inter · 129.996px/116.996px · 400 · tracking -4.194px — "I CREATE; THEREFORE I AM"
Type (body): Inter · 23.004px/30.996px · 400 — "I’m the founder & creative director at ✣HOVS, a studio that builds and runs its "
Type (small): MaisonNeue-Medium · 10px/24px · 400 · tracking 1.4px — "NEW"
Radii: 20px (1), 999px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/vanschneider-com/hero.webp?v=761aa8b6
- Page crop (mid-1): https://media.lvly.design/library/vanschneider-com/mid-1.webp?v=6e770c24
- Page crop (mid-2): https://media.lvly.design/library/vanschneider-com/mid-2.webp?v=ca24cbec
- Hero (mobile): https://media.lvly.design/library/vanschneider-com/mobile-hero.webp?v=6eca315d
- Full page (desktop): https://media.lvly.design/library/vanschneider-com/full.jpg?v=1e184902
- Full page (mobile): https://media.lvly.design/library/vanschneider-com/mobile-full.jpg?v=781683e4
- Clip preview (mp4): https://media.lvly.design/library/vanschneider-com/video-zogtok.preview.mp4?v=02a4beab

A designer's personal site that behaves like a monograph. It opens on near-black (#030303) with faint gothic-arch hairlines, an engraved cherub-and-banner illustration and a stacked Inter manifesto, "I CREATE; THEREFORE I AM", that switches weight line by line. Below that, the page becomes a run of full-bleed case-study chapters. Each takes over the viewport in its own flat field (charcoal, NASA cobalt, signal red, chrome yellow, white) and pairs one hero image with a small two-column caption. The only constants are a lacquer-red "HOVS" tab pinned top left and a red round index button pinned top right. Classical ornament against a strict Swiss grid gives the page its tension: part cathedral, part annual report.

## Steal-worthy details

- Flush-left brand tab: a 236×68px red (#e3131b) block bleeds off the left edge, rounds only its right corners (~10px) and holds a white serif wordmark. It stays fixed while every section scrolls under it
- Three-column nav as a table of contents. Each column has a tiny wide-tracked uppercase label (REPERTOIRE / CRÉATIVITÉ / NARRATIVE, ~11px, +0.14em, olive-gray) over three links, and each link indents ~10px more than the one above, so the column steps diagonally
- A ✣ ornament glyph before every nav link, plus red superscript "NEW" flags at 10px with 1.4px tracking. Typographic decoration instead of icons or badges
- Weight-switched manifesto: one 130px Inter headline with -4.2px tracking and 0.9 line-height. Line one is Bold, line two Light, line three Bold again, so the rhythm comes from weight alone
- An engraved line illustration (cherubs holding a Latin banner) sits centered above the sans headline. One piece of antique ornament makes a modern grid feel authored
- Gothic-arch hairline pattern: repeating pointed arches drawn in ~1px lines at about 8% white opacity across the black hero, a texture you only notice up close
- Each case study takes over the whole viewport in a single flat brand color (cobalt for NASA, red for Mars, yellow for Semplice), so the scroll reads like turning pages in a printed book
- Split caption under each project image: a bold "Name — one-line thesis" at ~22px on the left and a small gray paragraph of body text on the right, set on a 12-column grid
- Fixed red circular index button with a vertical, letter-spaced "INDEX" label running down beneath it. Persistent navigation that takes up almost no space
- Interstitial blog shelf: "Featured Essays" set in large light Inter with a gray subline, then three square abstract-art covers with sentence-case titles, on a plain white break between color chapters
- Pull quote set in white bold sans on a red rounded card, dropped into a dark gallery like a printed insert

## Style recipe

Build the page as a sequence of full-viewport chapters on a 12-column grid with ~50px outer margins. Open on near-black #030303 and give each later chapter its own flat field: charcoal #1a1a1a, cobalt #1f2fd6, signal red #e3131b, chrome yellow #ffd500, plain white. No gradients between fields. Hard section cuts only. Use Inter for everything. Set display headlines at 120–130px with -0.032em tracking and 0.9 line-height, all caps, alternating Bold (700) and Light (300) by line. Use body at 22–23px/31px Regular, captions at 15–17px in gray #6d6d6d on dark or #8e8e8e on light, and section titles at ~64px Light in sentence case. For micro labels, use a wide geometric sans at 10–11px, uppercase, +0.14em tracking. Treat red #e3131b as the single brand accent: a flush-left fixed logo tab with only its right corners rounded (~10px), a 44px round fixed menu button, and superscript "NEW" flags. Yellow and cobalt are chapter fields, not UI colors. Add one classical element per page, such as an engraved line illustration, a serif wordmark or ✣ ornament bullets, so the modern grid feels authored. Keep imagery flat and edge to edge, with square or 4:5 crops and 0 radius. Use a faint 1px line pattern at ≤8% opacity for texture on dark fields, no shadows, and a red rounded card (~20px) only for pull quotes. Write captions as "Name — one-line thesis" in bold beside a small gray paragraph.