Sistema de disseny · v1  ·  clic dret al logotip

Tot el que es mou aquí pesa zero.

Cada color està calculat en OKLCH i verificat contra WCAG. Cada efecte és CSS pur. Desplaça i mira el logotip de dalt: s'inverteix sol.

Paleta

--color-paper#fdfcf9 · papel
--color-paper-2#f6f4f1 · superficie
--color-paper-3#ece9e5 · filetes
--color-ink#1c1613 · 17,44:1 · AAA
--color-ink-2#47413e · 9,78:1 · AAA
--color-ink-3#76706e · 4,75:1 · AA
--color-accent#f84444 · con ink: 5,03:1 · AA
--color-accent-strong#c13232 · 5,43:1 · AA
--color-accent-deep#902827 · 8,34:1 · AAA

Escala tipogràfica · Geist

displayBarcelona, çàrrec, ñ

display-sBarcelona, çàrrec, ñ

4xlBarcelona, çàrrec, ñ

2xlBarcelona, çàrrec, ñ

lgBarcelona, çàrrec, ñ

baseBarcelona, çàrrec, ñ

Seccions que s'apilen

position: sticky. Cap línia de JavaScript.

01

Recerca

Miro el negoci, la competència i el que ja té a Google.

02

Demo real

Construeixo la web abans de trucar. La proves tu.

03

Preu tancat

Un número per escrit. Sense quotes ni sorpreses.

Carrusel · scroll-snap natiu

Sense Swiper. Funciona amb dit, roda i teclat. I sense efectes de ratolí.

Paral·laxi amb animation-timeline: scroll()

Si el navegador no ho suporta, això simplement no es mou. La pàgina no es trenca.