Spacing System

Spacing helps page components breathe and gives clarity and visual rhythmn to the content. The system utilizes responsive spacers that are dynamic across different breakpoints.

"The question that must always be asked is whether the website is impressive on an older smartphone with a poor internet connection and high data costs."

Responsive Spacing Tokens

var(--space-s)

12px (Static)

var(--space-m)

16px (Static)

var(--space-xl)

Dynamic (XL Breakpoint+)

Performance & trimming

Large cover images can be formatted for high performance using CSS Media Queries. Integration of images in the viewport by means of JavaScript adversely affects performance.

Flexibility

Videos or images are adapted to the layout depending on viewport size. Trimming allows images to adapt dynamically to the viewport ratio without losing the main motif.