Design System — Zurich, 1957

Funk
tio
na
lität

An interface kit built on the principles of International Swiss Design. Grid. Hierarchy. Proportion. No ornament. Structure only.

Set in Helvetica Neue — 1957 / 2024
01
Color Palette
Restrained.
Precise.
Purposeful.
Red signals.
Gray recedes.
Tonal range — Light to Full saturation
Core swatches
Primary
Signal Red
#D9212B
R 217 · G 33 · B 43
Action · Error · Accent
Structure
Black
#111111
R 17 · G 17 · B 17
Type · Border · Base
Neutral
Gray
#9E9E9E
R 158 · G 158 · B 158
Hint · Muted · Support
Surface
Light
#E2E0DA
R 226 · G 224 · B 218
Divider · Background
Ground
White
#F5F4F0
R 245 · G 244 · B 240
Canvas · Space · Rest
02
Typography
Helvetica.
One family.
All weights.
Tight grid.
No serif.
Type specimens
Aa
Family Helvetica Neue
Weight Bold 700
Use Headlines
Aa
Family Helvetica Neue
Weight Light 300
Use Display
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
0 1 2 3 4 5 6 7 8 9
Case Uppercase
Tracking 0.18em
Use Labels & UI
The grid is not
a limitation — it is
an emancipation.
Structure creates freedom.
Size 14px / 1.9
Weight Regular 400
Use Body Copy
Type scale
Display 88px / –0.03em
Swiss
Heading 1 48px / –0.02em
Grid System
Heading 2 32px / –0.01em
Proportion
Heading 3 22px / 0em
International Style
Body 14px / 1.7
Clarity, order, and objective presentation of visual information.
Label 10px / 0.2em
Form follows function — always
Caption 9px / 0.15em
Zurich · Basel · New York · 1957
03
Buttons
Clear forms.
Direct action.
No ambiguity.
Primary / Secondary / Accent / Ghost
Sizes — Small / Default / Large
States — Disabled
04
Input Fields
Single line.
Visual silence.
Focus speaks.
As it appears on the document
No spam — ever
Minimum 8 characters required
05
Selettore
Single choice.
Many options.
Line speaks.
Red on focus.
Pure form.
Dropdown — Variables
Multiple selection
Keep press Ctrl (or ⌘)
to select more items.

The selection is highlighted
by black.
06
Selection
Binary choice.
Clear structure.
Zero noise.
Radio Button
Checkbox
Toggle
07
System Notifications
Information.
Confirmation.
Warning.
Error.
Info
Information Notice
The system is under scheduled maintenance. Available from 08:00.
OK
Operation Completed
Your changes have been saved successfully to the system.
Att
Attention Required
Session expires in 5 minutes. Please save your current work.
Err
System Error
Connection interrupted. Check your network and try again.