Style guide
Station clock: white, black and the red of the second hand
One family (Archivo, with its width axis), three neutrals and one red that belongs only to time. These tokens are named clearly for reuse.
Colour
Type scale (desktop / tablet / phone)
No italics, no uppercase labels, no thin display cuts. The width axis tells the story: condensed is hurry, wide is room.
45 minutes
Services
Before you come
First visit
Every visit says its length up front.
You pay at the end, by card or cash.
Average GP visit in Spain
Components
Buttons (Primary / Secondary / Ghost × Default / Hover / Press)
On dark and on photo
Fee ruler (LentoClock, part Ruler): minutes = ticks, red line = the average
Odometer (LentoClock, part Odometer)
07:48
Form field: default, error
Accordion (Open / Closed) with reading time
Why 45 minutes?9 s
Because listening, examining and explaining properly doesn’t fit into 8.
Motion
One curve for everything, cubic-bezier(.2,.7,.1,1) (a spring, stiffness 170, damping 26). Hover 0.4 s, appear 0.7 s, reveals 0.9 s. With reduced motion, nothing moves and nothing is pinned.
| Effect | What moves | Duration | Demo |
|---|---|---|---|
| Appear | opacity 0 → 1, y 24 → 0, blur 6 → 0 | 0.7 s | |
| Text reveal | each line rises out of a mask, 60 ms apart | 0.9 s | |
| Image reveal | clip-path from the bottom, scale 1.08 → 1 | 0.9 s | |
| Hover | image scale 1.03, arrow moves 4 px, underline grows | 0.4 s | |
| Sticky | process cards stack under the header | — | |
| Page | a paper panel with the red second hand wipes up, then away | 0.6 s | |
| Odometer | digits roll like a mechanical counter and stop dead | 1.5–2.6 s |
