S · 19 / 26

S — Swiss style

Grid, sans serif and plain fact.

The style

The facts, on a grid.

Neue Grafik ran to eighteen numbers between 1958 and 1965, the last two bound as one.

The International Typographic Style took shape in Switzerland in the 1950s, in two cities: Basel, where Armin Hofmann and Emil Ruder taught at the school of design, and Zurich, where Josef Müller-Brockmann made his concert posters. Its designers wanted print to be objective, a clear channel for information rather than a show of personality. From 1958 the journal Neue Grafik, edited in Zurich by Müller-Brockmann, Richard Paul Lohse, Hans Neuburg and Carlo Vivarelli, carried the method abroad in three languages.

Its type was the grotesque. Akzidenz-Grotesk, issued by Berthold in Berlin in 1898, came first. Then 1957 brought two more: Neue Haas Grotesk, renamed Helvetica in 1960, and Adrian Frutiger’s Univers, twenty-one styles planned as one family.

On a screen it means a modular grid that every block starts from, one family in a few weights and sizes, and text set flush left and ragged right, never centred. There is no ornament: the information is the picture, large numbers included. Here it is a poster in negative, paper type on night, with one signal colour kept for whatever is on.

In use

One clear view.

SIGNAL’s workspace, in a browser. Connect the context, find the signal and make the next move: the brief’s inputs in a table, the open questions in a log, and the week on the grid. It is illustrative; no live systems are connected.

  • The flowConnect, Clarify and Act across the top, as on the SIGNAL site. Choose a stage and the title, the description and each input’s status change with it.
  • The logThe brief’s inputs in a table, and the open questions beside them. Give a question an owner and resolve it, and the figures at the top count down.
  • The weekMonday 19 to Friday 23 October on five columns of the grid, each task a bar across its days. Filter by owner to see one person’s week.
SIGNALWorkspace / OverviewIllustrative · No live systems connected

Connect the context.

Bring the brief, team inputs, and working context into one place. Select a stage to explore the concept.

Open decisions
4 of 5
Inputs connected
4 of 7
Actions ready
5 of 9

No changes yet.

Inputs

Status at the Connect stage
The brief’s inputs at the Connect stage
SourceOwnerStatusUpdated
Project briefMina SeoConnectedMon 19 Oct, 09:40
Team inputsJonas KellerConnectedMon 19 Oct, 11:15
Shared knowledgeAda MoreauConnectedMon 19 Oct, 14:05
Customer interviewsRavi ShahWaitingTue 20 Oct, 10:30
Usage figuresJonas KellerConnectedTue 20 Oct, 08:50
Pricing notesAda MoreauWaitingMon 19 Oct, 17:45
Support themesRavi ShahWaitingTue 20 Oct, 16:20

Decision log

A question needs an owner before it can be resolved.

  1. 01Which launch date do we hold to?

    Needs an owner

  2. 02Do the support themes go in the first release?

    Open

  3. 03Does pricing go on the launch page?

    Needs an owner

  4. 04Is the beta list closed?

    Resolved

  5. 05Which figures lead the overview?

    Needs an owner

Week 43

Monday 19 to Friday 23 October 2026
Owner

Everyone’s week: 9 tasks.

  1. Keep the brief currentMina, Monday to Friday
  2. Sort the team inputsJonas, Monday and Tuesday
  3. Close the beta listMina, Tuesday
  4. Read the interviewsRavi, Tuesday and Wednesday
  5. Draft the launch noteAda · Waits on question 01, Wednesday and Thursday
  6. Write the pricing sectionAda · Waits on question 03, Wednesday to Friday
  7. Plan the support guideRavi · Waits on question 02, Thursday and Friday
  8. Set up the overviewJonas · Waits on question 05, Thursday and Friday
  9. Share the week’s reviewMina, Friday
See the SIGNAL site
The kit

Every part, on the grid.

The parts the workspace is built from: lime buttons with night type, fields on the panel, square checks and switches, tables and a log, and every line one weight. Rows of states hold still for comparison; everything else works.

Button

One lime button to a view, for the move; every other is a 1px rule edgeRadius 0 on every part: buttons, boxes, the thumb, the avatarsFocus is a 3px lime ring, 7px out, so it clears a lime field

Text field

End it with a question mark.

54 high, six baselines of 9, with 18 on 27 inside; pointing, focus and an error draw the edge in paperNo red: an error is an ×, and a line in bold that says what to do

Select

Which launch date do we hold to?

The grid unit is a 9px baseline: every height is whole lines of it, 36 here and 54 for a field

Switch, checkbox, radio

Group the tasks by

On is lime with night in it; off is a muted edge, 9:1 on night

Slider

The type steps, each half again the one before: 12, 18, 27, 40, 60, 90 and 135

Progress

Inputs connected
4of 7

Lime fills what is done, a cell to each input; what is to come is a 1px rule

Segments and tabs

4of 7 inputs, connected
In a segment or a row the ring draws 6px inside, and turns night on lime

List rows

Every line is 1px in the rule colour, which draws and never carries typeIcons on a 24 grid with a 1.5px stroke, at 18, 20 and 24

Card and loading

Question 02Open

Ravi Shah

The title is the one control, and the whole card is its targetLoading, the card is bars on the 9px baseline. They hold still

Toast

Five seconds, held while you point at it or tab to it; Esc puts it away

Modal

Resolve question 01?

Which launch date do we hold to? Draft the launch note waits on it, and is ready once it is resolved.

Esc, the × or a click on the veil closes it, a click on its edge does not, and focus goes back to the button

Steps

  1. 1Connect, done
  2. 2Clarify
  3. 3Act
  4. 4Review

Columns: 12, then 6 from 800px and 4 from 540px, with gutters of 27 and 18

Badges and avatars

Question 03No owner yet

Does pricing go on the launch page?

1task waits on itOwner

Square to the last: badges, avatars and the chosen owner, radius 0
Signature

Set the grid.

Choose the columns, the rows, the gutter and the margin, and set a poster on them: the headline, a number, the text and one lime field each snap to a field. Knock them off grid to see what the grid was holding, and copy it as CSS.

Drag a part and it snaps to the nearest field; Esc while dragging puts it back. Or pick one with Tab: the arrows move it a field, and Home and End take it to the first and last column.

24 of 60

Gutter and margin are measured on the poster at A4, 595 by 842 at 72 dpi, and the screen scales it to fit. Off grid knocks every part a few pixels and a degree or so out of line, to show what the grid was holding.

/* A poster at A4, 595 by 842 at 72 dpi, on 6 columns and 8 rows. */
.poster {
  display: grid;
  box-sizing: border-box;
  width: 595px;
  aspect-ratio: 1 / 1.4142;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  gap: 18px;
  padding: 36px;
}
.headline {
  grid-area: 1 / 1 / 3 / 5;
}
.number {
  grid-area: 1 / 5 / 3 / 7;
}
.text {
  grid-area: 7 / 1 / 9 / 3;
}
.image {
  grid-area: 4 / 3 / 8 / 7;
}

Tokens

The system, in numbers.

Six colours with their contrast, one family on a scale where each size is half again the one before, a grid of 12, 6 and 4 columns on a 9px baseline, space in whole baselines, and two kinds of motion: a cut and a slide. Copy them as custom properties, with the grid, the figure and the button.

Colour, with contrast against night
  • --night #12172dNight: the page, and the type on lime, 14.55:1
  • --panel #1a223aPanel: fields, tables, code; paper on it 14.16:1, muted 7.81:1
  • --rule #3e465fRule: lines and the grid; 1.89:1, so never type
  • --paper #eef3ffPaper: headings and text, 15.93:1
  • --muted #abb7d1Muted: notes and captions, 8.78:1; on panel 7.81:1
  • --signal #bffa8cSignal: what is on or chosen, 14.55:1; only night type on it
Type: Inter, one family, three weights
  • 19 / 26Inter 700 · 90 / 90, figures and the title
  • Plain fact.Inter 700 · 60 / 63, headings
  • One family, three weights.Inter 500 · 27 / 36, the lead
  • Flush left, ragged right, nothing centred.Inter 400 · 18 / 27, text
  • Week 43 · Monday 19 October 2026Inter 700 · 12 / 18, labels and captions
Grid

The page’s columns at this width: 12, as drawn behind every section.

  • Columns12 · 6 · 4Wider than 800px, down to 541px, and narrower
  • Gutter27 · 18 · 18pxThree baselines, then two
  • Margin5%Until the columns reach 1240px; past that the margins grow
  • Baseline9pxEvery line height and every space is a whole number of them
Space: whole baselines
  • 9
  • 18
  • 27
  • 36
  • 54
  • 72
  • 108
  • 144
Motion
  • Cut0msA state changes at once: on, off, chosen, hovered
  • Slide360ms, outA part moving along the grid, only while motion is allowed
:root {
  /* Night, panel and paper, and one signal colour. The rule draws lines
     and never carries type. */
  --night: #12172d;
  --panel: #1a223a;
  --rule: #3e465f;
  --paper: #eef3ff;
  --muted: #abb7d1;
  --signal: #bffa8c;

  /* Type: one family, sizes half again the one before */
  --font-sans: 'Inter', system-ui, sans-serif;
  --size-1: 12px;
  --size-2: 18px;
  --size-3: 27px;
  --size-4: 40px;
  --size-5: 60px;
  --size-6: 90px;
  --size-7: 135px;

  /* The grid. Margin percentages are of the element the grid is on. */
  --cols: 12;
  --gutter: 27px;
  --margin: max(5%, calc((100% - 1240px) / 2));
  --baseline: 9px;

  /* Space: steps of the baseline */
  --space-1: 9px;
  --space-2: 18px;
  --space-3: 27px;
  --space-4: 36px;
  --space-5: 54px;
  --space-6: 72px;
  --space-7: 108px;
  --space-8: 144px;

  /* Motion: a cut, or a slide */
  --cut: 0ms;
  --slide: 360ms cubic-bezier(0.2, 0, 0, 1);
}
@media (width < 801px) {
  :root {
    --cols: 6;
    --gutter: 18px;
  }
}
@media (width < 541px) {
  :root {
    --cols: 4;
  }
}

/* The grid: columns on a full-width box, every block on a line.
   Place children with grid-column: span n. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* A figure: large, bold, every digit the same width */
.figure {
  font: 700 var(--size-6) / 1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

/* The button: a lime field, square, night type. States cut, never fade. */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 54px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0;
  background-color: var(--signal);
  color: var(--night);
  font: 700 var(--size-2) / 1 var(--font-sans);
}
.button:hover {
  background-color: var(--paper);
}
.button:active {
  background-color: var(--muted);
}
.button:disabled {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--muted);
  cursor: not-allowed;
}
.button:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 5px;
}

Do

  • Start every block on a column line, and let the grid show where it helps.
  • Use one family. Set the order by size and weight, never by a second face.
  • Set text flush left and ragged right. Never justify it, never centre it.
  • Let the facts be the picture: a large number says more than an ornament.
  • Keep one signal colour for what is on or chosen, and leave empty fields empty.
  • Square corners, and every line in one weight.

Don’t

  • Don’t centre everything

    A centred axis gives every line two ragged edges and the eye no place to start. Hang the text from one column line and let the right side fall where it falls.

  • Don’t reach for three typefaces

    A serif for the heading, a script for the quote and a slab for the figures make three voices where one would do. This whole page is Inter, in three weights.

  • Don’t fill the empty fields

    Stars, swirls and gradients poured into the spaces only hide the structure. An empty field is part of the layout: it gives the rest room to be read.

In the wild

Where the style shows up outside this page.

  1. Neue Grafik

    Lohse, Müller-Brockmann, Neuburg, Vivarelli · 1958–1965The movement’s own journal, edited by four Zurich designers and printed in German, English and French.

  2. Helvetica

    Max Miedinger, Eduard Hoffmann · 1957Drawn for the Haas foundry near Basel as Neue Haas Grotesk, and renamed for export.

  3. Grid Systems in Graphic Design

    Josef Müller-Brockmann · 1981The method as a handbook: grids of 8 to 32 fields, worked step by step.

  4. Swiss railway clock

    Hans Hilfiker · 1944Bars for numbers and nothing else; the red second hand, added in 1953, pauses at the top of each minute.