Restraint-First Swiss Typographic Hero

What this builds

A full-viewport hero section where typography, white space, and a strict column grid are the entire visual design. No background images, no gradients, no particles, no blobs. Motion is limited to a single choreographed text entrance and a hover-driven weight/width shift on a variable font. The restraint is the design.

• Asymmetric column grid (e.g., 5+7 or 3+5+4) positions the headline and meta text with intentional tension
• Variable font animates weight and/or width on hover, creating a living type specimen feel
• A single horizontal rule or vertical divider line anchors the composition
• Text entrance is one choreographed sequence: clip-path reveals, no bounces, no particle bursts
• prefers-reduced-motion shows the final composed state immediately
• The entire hero is semantic HTML and CSS with one small JS enhancement for the variable font interaction

When to use / when not to

• Use when the brand values precision, restraint, and typographic craftsmanship.
• Use for editorial sites, design portfolios, architecture firms, luxury brands, or any site where "less is the statement."
• Use when the content (the headline itself) is strong enough to be the hero.
• Do NOT use when the client expects visual spectacle or has weak headline copy. This hero exposes weak words.
• Do NOT use when the brand needs warmth, playfulness, or organic shapes. See hero-morphing-blob-organic instead.
• For the grid system primitives, see primitives swiss-editorial-grid. For variable font animation, see primitives variable-font-animation.