vanschneider.com

Tobias van Schneider — Creative Directionsaved 3h ago · captured 3h ago

Eleven details, ten pinned.

View as Markdown ↗

Colors8 colors · ground #030303

ground#030303·89.08%#2d2e2d·2.06%#4f4f4f·1.87%#f8f8f8·1.68%#d1d1d1·1.02%#6d6d6d·0.95%#8e8e8e·0.92%#b0b0b0·0.88%

Sized by coverage · click to copy.

Typography2 families · 3 styles · Inter, MaisonNeue-Medium

I CREATE; THEREFORE I AM

Inter · 130/117 · 400 · -4.194px

Body

I’m the founder & creative director at ✣HOVS, a studio that builds and runs its

Inter · 23/31 · 400 · normal

Small

NEW

MaisonNeue-Medium · 10/24 · 400 · 1.4px

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

Buttonsnone measured

No button measured

Shape2 radii · 2 uses

20px1 use · 50%

999px1 use · 50%

AnalysisA designer's personal site that behaves like a monograph.

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.

Style recipeBuild the page as a sequence of full-viewport chapters on a 12-column grid with ~50px outer margins.

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.

Details11 worth noting

vanschneider.com — the captured page — Landing, 1440 × 900 · captured Oct 30, 2026

1Edge-bleeding fixed brand tab
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
2Stepped staircase nav columns
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
3Ornament bullets and superscript NEW flags
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
4Bold-light-bold stacked headline
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
5Engraved cherub illustration over sans
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
6Hairline gothic-arch background
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
7Full-bleed color-field case-study chapters
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
8Two-column thesis caption
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
9Vertical-label fixed index button
Fixed red circular index button with a vertical, letter-spaced "INDEX" label running down beneath it. Persistent navigation that takes up almost no space
10Square-cover essay shelf
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
11Red pull-quote card insert
Pull quote set in white bold sans on a red rounded card, dropped into a dark gallery like a printed insert