Day 5 🏗️ of #FramerBuild — Swiss/Grid Hero Section The constraint was simple: no images, noDay 5 🏗️ of #FramerBuild — Swiss/Grid Hero Section The constraint was simple: no images, no
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Josephat's avatar
Josephat Obare
• 16h
Day 5 🏗️ of #FramerBuild — Swiss/Grid Hero Section The constraint was simple: no images, no decoration, no gradients. Typography only. Every element has to justify its presence on the grid.
The Swiss International Typographic Style is built on the idea that good design is invisible — it gets out of the way and lets the content speak. That's what this build is about.
Inter at 900 weight for the headline, 300 for everything else. One accent colour — Swiss Red #E63329 — used exactly three times. A strict 12-column grid. Flush-left alignment throughout. No rounded corners. No shadows.
The build ships with full light and dark mode support. Every colour in the system is a variable with both a light and dark value — flip the toggle and the entire page responds instantly. Background, text, borders, dividers — all of it switches in a single transition. The toggle itself lives in the navbar and the mobile drawer, so it's always within reach regardless of screen size.
FramerWeb Designswissdesign
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started