- Design System
- Swiss Style
SWISS
STYLE
1950
Objective chaos. Mathematical grids. Asymmetric layouts. Sans-serif purity.
01 / CARDS
GRID
The grid is the fundamental structure of Swiss design. It creates order and clarity.
FORM
Form follows function. Strip away the ornamental. Focus on the essential.
Activator Code:
css
1
2
3
.style-swiss-card {
@apply bg-white border-t-4 border-black p-8 font-sans;
}
02 / TYPOGRAPHY
HELVETICA
NEUE
ONLY.
Activator Code:
css
1
2
3
.style-swiss-type {
@apply font-black tracking-tight leading-none text-black;
}
03 / INPUT
Activator Code:
css
1
2
3
.style-swiss-input {
@apply border-4 border-black p-4 font-bold text-xl;
}
04 / DATA GRID
Project Schedule2024
| Phase | Manager | Status |
|---|---|---|
| 01. RESEARCH | MÜLLER | DONE |
| 02. CONCEPT | WEBER | DONE |
| 03. DESIGN | SCHMIDT | IN PROGRESS |
Activator Code:
css
1
2
3
.style-swiss-grid {
@apply grid grid-cols-12 gap-0 border-4 border-black;
}
05 / MODAL
CONFIRM
ACTION
Are you sure you want to proceed with this operation? This action is irreversible and will permanently alter the structure.