Style

Typography

• Aa

  Archivo

  Black 900 · Italic

  Display. Page titles, section headings and the wordmark. Tracked to −0.06em, with word-spacing put back so multi-word headings stay legible.

• Aa

  Instrument Serif

  Regular 400

  Subheadings. Every h3 and h4, providing the contrast against the display face that a second weight of the same family could not.

• Aa

  Google Sans Flex

  Variable 100–1000

  Body. Running text, navigation, labels and controls. Variable, so every weight in use ships in a single file.

Scale

Five fluid steps, roughly a 1.25–1.6 ratio apart, each set so its smallest size clears a 375px viewport without overflowing. The top three take the display face; h3 and h4 switch to the serif, which is where the hierarchy changes voice rather than just size. Resize the window and the specimens below move with it.

• text-displayHeroArchivoline-height 0.95

  Ben

  clamp(3.5rem, 2rem + 8vw, 8rem)
• text-h1Page titleArchivoline-height 1.05

  Ben Hubbard

  clamp(2.5rem, 1.5rem + 4vw, 4.5rem)
• text-h2SectionArchivoline-height 1.1

  Ben Hubbard

  clamp(1.875rem, 1.5rem + 1.9vw, 3rem)
• text-h3SubsectionInstrument Serifline-height 1.15

  Ben Hubbard

  clamp(1.5rem, 1.3rem + 1vw, 1.875rem)
• text-h4Minor headingInstrument Serifline-height 1.2

  Ben Hubbard

  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem)

Motion

One easing curve carries the whole site — a decisive ease-out that settles rather than bounces. Exits run at roughly three quarters of their entrance, since a closing panel should get out of the way.

• Micro70–150msBlinks, colour and opacity shifts
• State200–300msHover, focus, icon rotation
• Panels315–420msDrawers opening and closing
• Overlay550msFull-screen menu

Every animation on the site has a prefers-reduced-motion alternative. Panels snap open instead of sliding, and the decorative spins stop entirely.