Project brief — the making of
FÖHN is a fictional studio designed and built end-to-end by Claude Fable as a capability demonstration. This page is the honest record: what was decided, why, and how.
01
The brief
Build a marketing/brand-studio website ambitious enough to showcase what an AI model can do in web design: a real design system, modern typography, advanced visual techniques including 3D, award-calibre animation, and an exceptional palette. Then document the process on this very route.
The client (a human, with taste) chose the direction from four options: a mix of Kinetic Swiss and Warm Avant-Garde. Everything below follows from taking that hybrid seriously.
02
The direction: warm modernism
Kinetic Swiss and Warm Avant-Garde pull in opposite directions — one is a grid with a stopwatch, the other is a hand with a paintbrush. The synthesis we chose: the grid is the skeleton, warmth is the skin. Layout, spacing, and information design follow Swiss rules (visible structure, micro labels, tabular precision). Color, type contrast, and texture are all temperature.
The name closed the argument. A föhn is the warm wind that crosses the Alps and raises the valley temperature ten degrees in an hour — a Swiss word for warmth arriving. Same landscape, different weather: that's also a decent definition of a rebrand.
03
Two voices, both variable
Switzer (Indian Type Foundry) is the Swiss voice — a grotesk in the Helvetica lineage, self-hosted as a single variable file covering weights 100–900. It handles wordmarks, navigation, labels, and data.
Fraunces (Undercase Type) is the warm voice — a “wonky old-style” serif with four axes: weight, optical size, softness, and wonk, which swaps in crooked alternate letterforms. Display settings run opsz 144 / SOFT 60 / WONK 1 — maximum temperature. Try it:
Warm wind
04
The palette: alpine afternoon
No pure white, no pure black, one loud voice. The canvas is warm bone; the ink is espresso. Signal — a persimmon orange — is the only shout in the system, and it's rationed: selection color, active states, one accent per composition.
Four supporting tones (ochre, oxblood, moss, dusk) exist only inside case studies, so each fictional client owns a hue while provably belonging to the same family. Click to copy.
05
Motion: four rules
01
Everything enters through a mask
Headlines don't fade in — words rise out of clipping masks with a 45ms stagger, cut off at the baseline like letterpress coming off the bed.
02
One easing curve to rule them all
cubic-bezier(0.16, 1, 0.3, 1) — an exponential ease-out. Fast arrival, long settle. Nothing bounces; bounce is for toys.
03
Scroll is the timeline
The manifesto paints itself word by word as you scroll. Quotes drift on parallax. Lenis smooths the scrollbar so the choreography reads as intended.
04
Motion must be declinable
prefers-reduced-motion disables the smooth scroll, the marquees, the grain shimmer, and every entrance — the site works fully static.
06
The 3D: one shader, no assets
The homepage hero is a single full-screen quad running a custom GLSL fragment shader — no models, no textures, no downloads. It's a domain-warped noise field: fractal noise fed into itself twice, so the coordinate space itself flows. The result reads as silk, or weather, moving at the pace of the studio — slow, warm, precise.
The palette is baked into the shader as constants, the cursor drifts the field gently, a vignette pulls edges back to paper so the wordmark always reads, and a one-line dither kills gradient banding. Roughly sixty lines of GLSL doing the work of a video file five thousand times its size.
07
Imagery: drawn, not downloaded
Every case-study poster is a handcrafted SVG composition — Alpenglow's eclipsed sun, Terroir's cellar arch, Meridian's banking flight paths, Kilim's woven medallion, Standard Time's 6°-fast dial. No stock, no AI-generated raster images, no photography.
This was a deliberate constraint: a design-systems studio should be able to art-direct in pure geometry, and code-drawn artwork stays crisp at any size, weighs almost nothing, and inherits the token palette — change a hex once and the entire portfolio repaints.
08
Build log
- FrameworkNext.js 16 (App Router, Turbopack)
- StylingTailwind CSS 4 — tokens as CSS variables
- MotionMotion (Framer Motion) + Lenis smooth scroll
- 3DThree.js via React Three Fiber — custom GLSL
- TypeSwitzer & Fraunces, self-hosted variable fonts
- ImageryZero raster assets — all artwork is code-drawn SVG
- AuthorClaude Fable 5 — every line, every decision
The process ran brief → direction (human choice) → design tokens → components → pages → then at least two full iteration passes in a live browser: screenshots at desktop and mobile widths, checking rhythm, contrast, motion timing, and responsive breaks — the fine-toothed comb the brief demanded.
Fictional studio. Real design system. Warm regards — F.