See this style applied to a real page — identical content, different stylesheet.
Open live preview →About This Style
Neo-Swiss keeps the International Typographic Style's core beliefs — grid as structure, sans-serif as neutral voice, one accent doing all emphasis — and updates the execution with variable fonts and screen-native spacing. Where the original relied on a single cut of Helvetica, this version moves weight continuously to create hierarchy without changing size.
The discipline is unchanged: a hard baseline grid, left-aligned ragged-right text, and an accent colour used perhaps twice per screen. The generosity of whitespace is not decoration; it is what makes the grid legible.
Main Features:
- Visible modular grid: Twelve columns with a fixed gutter, and elements that snap to it. Misalignment is visible instantly in this style, which is the point.
- Weight as hierarchy: A variable font shifted between 300 and 800 creates contrast without a second family or a size jump.
- One accent: A single red used for one rule, one label, one link. When everything can be emphasised, nothing is.
- Asymmetry by design: Headline in columns 1–9, standfirst in 7–12. The overlap is deliberate, not an accident.
- Type-set numerals: Tabular figures for anything in a column, so numbers align without manual kerning.
Example AI Prompt
Design a neo-Swiss layout.
Grid:
- A 12-column grid with a 24px gutter and a consistent outer margin.
- Place headline across columns 1-9, standfirst across 7-12, body copy across 1-6. The deliberate overlap creates the asymmetry.
Typography:
- One variable sans throughout. Use font-variation-settings or variable weights from 300 to 800 to build hierarchy — avoid adding a second typeface.
- Headline: weight 700-800, letter-spacing -0.045em, leading below 1.0. Body: weight 400, 16-17px, leading 1.55.
Colour:
- White background, near-black text, one accent red used at most twice per screen for a rule or a label.
- Do not tint surfaces. If you need separation, use a 1px rule or whitespace.
Constraints:
- Left-align everything with ragged right. Never centre and never justify.
- Small caps labels at 11-12px with 0.16em tracking for section markers.
- Keep a strict vertical rhythm: all block spacing a multiple of 8px.Theme CSS Snippets
Neo-Swiss theme variables. Everything is black, white or one red; --card-shadow is none because separation comes from rules and whitespace.
body.theme-neo-swiss {
--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #1a1a1a;
--heading-color: #000000;
--link-color: #e2001a;
--border-color: #d6d6d6;
--card-bg: #ffffff;
--card-shadow: none;
--card-hover-shadow: none;
--header-bg: #ffffff;
--header-text-color: #000000;
--prompt-bg: #f4f4f4;
--prompt-text-color: #1a1a1a;
--button-bg: #000000;
--button-text-color: #ffffff;
--button-hover-bg: #e2001a;
--card-border-radius: 0;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
}Where it fits
Use it when
- Design studios, architecture practices and any brand that sells precision.
- Data-dense pages where hierarchy must be unambiguous.
- Documentation and reference material — the grid scales to dozens of entries.
Avoid it when
- Playful consumer products where warmth is part of the value.
- Pages with photography as the lead — the grid fights full-bleed imagery.
- If you cannot hold the alignment. Sloppy Swiss is worse than no Swiss.
Resource Download
A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.
Download neo-swiss.zip