The Swiss design system: Inter Tight, numbered sections and a single red
Swiss is Anticode's take on the International Typographic Style. It sets everything in Inter Tight, keeps to black, white and one red, squares every corner, numbers each section in red above its heading, and separates content with solid rules in the text colour. It's strict on purpose, and suits any small business that wants to look organised.
The International Style in brief
The style grew up in Switzerland in the 1950s, in the posters and books of designers who wanted communication to be clear before it was decorative. Its habits are recognisable: a sans-serif typeface, a visible grid, text set flush left with a ragged right edge, large type contrasted with small, photography over illustration, and colour used sparingly, often a single red. The Swiss style web design guide covers its history and rules in more depth. On a small website the useful part is the discipline: every element has a place, and nothing is there for ornament.
How the Swiss design system with Inter Tight applies it
- Typeface. Inter Tight, weights 300 to 800. It's the tighter-spaced display cut of Inter, so headlines can be set large and close without looking loose.
- Headline. Weight 700, very large, with strong negative tracking and a line height just under 1, in the manner of a poster.
- Colour. White background and near-black text, with one red as the action colour. The dark palette flips to near-black with off-white text and a brighter red.
- Corners. Square on buttons, cards, images and every other role.
- Rules. The header sits on a solid background above a one-pixel line in the text colour, the hero ends on another, and each card hangs from a two-pixel rule rather than sitting in a box.
- Body text. 17px, with the same line spacing as the other systems.
- Buttons. Semi-bold labels on solid red.
Numbered sections
Every section heading after the hero gets a small number above it, 01, 02, 03 and so on, set in red at a fraction of the heading's size. The numbers are generated by the stylesheet, so they stay in order when you drag sections into a new arrangement in the visual editor or add and remove them. They do the job a label might do on other sites, marking where one part ends and the next begins, without a word of extra copy.
They also stay clear of a habit the Critic flags. The eyebrow label check counts headings that sit under a separate element styled as small spaced-out capitals. Swiss's numbers are part of the heading itself and aren't spaced capitals, so they don't count.
Inter Tight and the overused-fonts check
Inter is one of the fonts the Critic lists as a giveaway of generated sites, along with faces such as Poppins and Montserrat. The check matches font names exactly, so Inter Tight isn't flagged. It isn't a loophole: at display sizes, Inter Tight's narrower spacing gives Swiss headlines a dense, poster-like texture that standard Inter doesn't, and the system uses it with the strong tracking and weight that make it look chosen rather than defaulted to. See the overused fonts check for the full list.
Where it works
| Kind of site | Why Swiss helps |
|---|---|
| Architects, engineers, product designers | The grid and rules echo technical drawings and portfolios |
| Consultancies and agencies | Numbered sections make a services page easy to follow |
| Events and conferences | Big type and one colour carry well from posters to screens |
| Shops with a small, considered range | Square-cornered product photos and ruled rows read like a catalogue |
It's a poor match for businesses that sell warmth or play. Organic and Playful are gentler; Editorial keeps the type-led feel with softer pill-shaped buttons.
Switching to Swiss
Name it in your request, or switch an existing site in the builder: turn on Edit and choose Swiss under Direction, or type "make it swiss". Both happen in your browser without using your build allowance, and your copy, sections and features stay. If red clashes with the brand, the action colour can change, and black is one of the options for a strictly monochrome page.
Limits
- A fixed grid. Sections use the design engine's responsive layouts. You can move and resize elements with the layout editor, but there's no setting for column count or a modular baseline grid.
- One typeface. No classic Swiss pairing of a grotesque with a second family.
- No asymmetric poster layouts. The style's famous off-centre compositions aren't templates here; the hero follows the engine's own structure.
- Apps get a description. A model-written app is told Swiss means Inter Tight, black and white with one red and a strict grid, and your own words can override it.
Questions people ask
Is Inter Tight the same as Inter?
It's a related family with tighter letter spacing, made for display sizes. The Critic's overused-fonts check names Inter, not Inter Tight.
Can I remove the section numbers?
Not with a switch. They're part of Swiss. Another direction, such as Editorial, drops them.
Does Swiss use Helvetica?
No. Published pages load their typeface from Google Fonts, and Swiss uses Inter Tight.