You cannot judge a design you have not seen.

Typography

Fraunces 300, optical size high, tracking tight — headlines, set large Inter 400, 17px, line-height 1.7 — body, measure capped at 68ch Inter 500, 11px, uppercase, .28em — rail labels

Layout

Asymmetric 12-column grid, content in columns 2 to 8 or 5 to 12, never centered. Images run large and may bleed past the text column. Never crop a face. Never place text over a photograph. No cards, no shadows, no gradients, no corner radius above 2px.

Motion

Images fade and rise 24px, 700ms, ease-out. The headline in the same section starts 150ms after its image, so the picture lands first. Nothing else animates.

Signature

A thin vertical rule beside each section, the section name set small, uppercase and letter-spaced running down it. On mobile the rule goes and the label moves above the heading.

Watch for: Fraunces at 300 is elegant but soft. Set it genuinely large or it reads as tentative rather than considered.

Typography

Karla 300 — headings, never bold anywhere Karla 400, 18px, line-height 1.9 — body Karla 400, 13px — captions. No second family, no monospace

Layout

One column, maximum 620px, centered. At least 160px between sections on desktop, 96px on mobile. Very few images, and where one appears it is small, soft, and sits alone with space around it.

Motion

Opacity only, 900ms. No travel, no scale, no stagger beyond one step. Hover changes opacity and nothing else.

Signature

A single hairline growing from zero to about 40 percent width as its section enters view, used once between each pair of sections.

Watch for: this direction has almost no room for images. If the content depends on photography or video, the direction is fighting the material.

Typography

Newsreader 500 — headings, set generously Newsreader 400, 17px, line-height 1.75 — body Caveat — pull-quotes only, no more than three on the whole site

Layout

A loose grid, elements a few pixels off strict alignment on purpose. Subtle paper grain over the background and a light grain over photographs at low opacity. Grain only, never a color tint and never a darkening filter. Images get a thin inset border.

Motion

Two-layer parallax on image sections, background at 0.85 speed, dropped entirely below 768px. Images fade in over 800ms rather than appearing.

Signature

A hand-drawn underline stroke beneath the key phrase in each section heading, drawn as inline SVG, animating left to right on entry. The one hand-made mark on the site.

Watch for: the parallax and the grain are both things an AI builder will do plausibly and wrong. Put them in the design file byte for byte rather than describing them.

Typography

Outfit 500 — headings, set wide Outfit 400, 17px, line-height 1.7 — body Outfit 500, 12px, letter-spaced — labels

Layout

Deep dark background with two large soft radial glows behind the content, heavily blurred. Content on translucent panels with backdrop blur and a 1px light border. Depth comes from light, not from drop shadows.

Motion

Background glows drift continuously on a 20 second loop, frozen under reduced motion. Panels rise 16px on hover with the border brightening, 250ms. Sections fade in over 600ms with no travel.

Signature

The ambient glow follows whichever section is in view, so the page brightens around whatever the reader is currently on.

Watch for: contrast is the risk in this direction. Text must clear 4.5:1 against the panel behind it measured with the blur applied, and body text never sits directly on a glow. This is also the only dark-ground direction of the nine.

Typography

Anton, uppercase, tracking slightly negative — set enormous, filling the container IBM Plex Sans 400, 18px, line-height 1.6 — body IBM Plex Sans 700, 12px, uppercase — buttons and labels

Layout

Two colors and nothing between them, high contrast throughout. No cards, no icons, no gradients, no rounded corners. Below 768px the display type stays dominant, breaking to one word per row if it needs to.

Motion

Headline rows slide up 40px from behind a clipping mask, staggered 90ms apart, 500ms each. Buttons invert their colors on hover. Nothing moves.

Signature

Each major section opens with one line of the headline per row, each row arriving separately from behind its mask, so it reads as delivered speech rather than a block of text appearing.

Watch for: the headline has to carry the whole page. If the copy is not confident enough to be set at that size, this direction exposes it rather than hiding it.

Typography

Inter 600, modest sizes — headings Inter 400, 16px, line-height 1.65 — body IBM Plex Mono 400, 11px, uppercase, .16em — margin labels

Layout

A visible 12-column grid with hairline vertical rules at the margins, every element snapped to it. Dividers are 1px full-width rules, never a color band. One accent color, no more than four uses per page. No shadows, no gradients, no decorative illustration, corner radius 4px maximum.

Motion

A 6px rise with opacity, 300ms, no stagger. Links underline on hover. That is the entire motion budget for the site.

Signature

Each section numbered and labeled in the left margin, small and uppercase. Only number sections whose order actually carries meaning.

Watch for: the margin numbering is the trap. clientconnectcentral.com shipped with every eyebrow reading "Section 02" through "Section 10" because the placeholder never got replaced, and extraction carried it through faithfully.

Typography

Cormorant Garamond 300 — set very large over imagery Jost 400, 17px, line-height 1.7 — body Jost 400, 12px, uppercase, .18em — buttons and captions

Layout

Every major section is 100vh, holding one full-bleed image and a small amount of text. Preload the first two images and lazy-load the rest, this direction is heavy. Below 768px keep the full-screen scenes but move text below the image wherever the portrait crop would hide the subject.

Motion

Scroll position drives the scene. The image scales from 1.0 to 1.06 across the scroll of its section while the text holds still. Text fades in at 30 percent scene visibility, 800ms. Scenes cross-fade rather than cut, and the scale is disabled under reduced motion.

Signature

The slow scale of each scene image against text that stays put. It reads as a camera pushing in, and it is the reason to choose this direction at all.

Watch for: this is the heaviest of the nine. It needs real photography of real quality, and one full-screen image per section adds up fast on a phone.

Typography

Gilda Display 400 — headings Mulish 400, 17px, line-height 1.75 — body Mulish 400, 13px, letter-spaced .06em — buttons and captions

Layout

Sections separated by flowing SVG shapes, not straight edges. Images inside organic masks, never a hard rectangle. Fine single-weight line illustration in the margins drawn from the business's own subject matter, sparse, never more than two per section. Below 768px simplify each section shape to a single curve.

Motion

Section shapes fade and scale from 0.98, 700ms, gently eased. Nothing snaps into place. On hover, borders and fills soften with no travel.

Signature

A continuous thin line running down the whole page, weaving between sections and drawing itself with stroke-dashoffset as the reader scrolls. On mobile it moves to the left edge and stays.

Watch for: the margin illustrations have to come from the business's own subject matter. Generic line icons turn this direction into a template immediately.

Typography

Marcellus 400 — collection names. Roman, carved, never bold Public Sans 400, 16px, line-height 1.65 — body, kept short Public Sans 500, 11px, uppercase, .14em — colorway names, specs, labels

Layout

The interface carries no color of its own. Gallery grey ground, near-black text, no accent hue anywhere, because the work supplies every color and any brand accent would fight most of it. Artwork sits on white with a soft shadow so it reads as a mounted board. Presented whole: never cropped, never scaled below legibility, never two side by side, never text on top.

Motion

Artwork fades in over 500ms with at most 16px of travel. Nothing scales, nothing parallaxes, because a large image moving while it loads looks broken. On the gallery wall the board under the cursor holds full opacity while the rest drop to about 80 percent. Colorway changes crossfade over 350ms in place.

Signature

The colorway rail. Under each collection, a row of its colorways, each labeled. Selecting one does not navigate: the large artwork crossfades to that colorway in place and the name sets in the margin, so a buyer can flip between them without losing their place.

Watch for: never size a lazy-loaded image h-auto inside a fixed-ratio parent. With no intrinsic size it computes to zero, a zero-area element never trips the lazy-load threshold, so it never loads and stays blank forever.