The most powerful element in Neo-Swiss layout is not a colour, an icon or a shadow. It is a word set large, in a heavy grotesque, in flat black — and given enough space to be heard. Everything else is service to it.
Weight is a message
When we began Refined as an internal design system, our first drafts hedged. Headlines were medium-weight, mid-grey, politely sized. They looked tasteful and said nothing. The layout only came alive once we let a single headline dominate — black, bold, unafraid — and pulled the supporting text back into a quiet mauve.
That contrast is the whole trick. A page ground of warm blush and body copy in near-black already reads as calm. Against that calm, one heavy line of display type lands like a struck chord. You do not need three sizes of emphasis; you need one, used with conviction.
Good typography feels inevitable. When the weight, the size and the space all agree, the reader never notices the craft — only the meaning.
That principle became the north star for the template. Wherever we were tempted to decorate a heading — an underline here, a gradient there — we asked first whether more weight and more space would say it better.
A practical checklist
Before shipping any section, we run its headline past a short list. If a component fails more than one of these, it usually gets reset or simplified:
- Is there exactly one line the eye is meant to read first?
- Does the headline earn its size, or is it big out of habit?
- Could the emphasis come from weight and space alone, no ornament?
- Does the crimson accent appear rarely enough to still feel special?
The last point matters most on a light ground. Crimson and yellow are striking precisely because they are scarce. Use crimson on every button and it becomes wallpaper; reserve it for the one action that matters and it becomes a signal.
Restraint in code, too
The philosophy extends past pixels. The canonical build ships as plain HTML, CSS and one small vanilla JavaScript file — no framework, no bundler, no compile step. You can open it and read the whole thing:
document.querySelectorAll(".reveal").forEach(el => io.observe(el));
Fewer moving parts means fewer things to break, fewer decisions for the next maintainer, and a template that will still open and run years from now. Restraint, it turns out, is a gift you give your future self.
None of this is minimalism for its own sake. It is intention. Every type size, every hairline border, every accent block should be a decision you can defend. When you can, the result feels composed — and composure, on the page, reads as confidence.