Techniques
Grid-ruled section divider
A visible grid line used as a section divider — the grid itself becomes the design element, not merely the invisible scaffolding. Thin horizontal rules at full container width create the rhythm of a well-set page.
.grid-rule {
border: none;
border-top: 1px solid #171717;
margin: 64px 0;
width: 100%;
}
.grid-rule--subtle {
border-top-color: #e5e5e5;
}
Typographic scale poster block
The signature Swiss composition: a single oversized word or number anchors the layout, with smaller supporting text aligned to the same grid. Size contrast does the work that color and decoration do in other systems.
.poster-block {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
align-items: baseline;
}
.poster-block__headline {
grid-column: 1 / 9;
font-family: 'Inter', 'Helvetica Neue', sans-serif;
font-size: clamp(4rem, 8vw, 8rem);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.04em;
color: #171717;
}
.poster-block__meta {
grid-column: 9 / 13;
font-family: 'Inter', 'Helvetica Neue', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #525252;
align-self: end;
}
Red accent marker
A single block of pure red used as a typographic accent or navigational indicator — the only color in a black-and-white composition, carrying maximum visual weight through contrast with its monochrome surroundings.
.accent-marker {
display: inline-block;
width: 24px;
height: 4px;
background: #cc0000;
margin-bottom: 16px;
}
.accent-marker--vertical {
width: 4px;
height: 24px;
margin-right: 12px;
margin-bottom: 0;
vertical-align: middle;
}
.accent-marker--dot {
width: 8px;
height: 8px;
border-radius: 50%;
}