How this site is made

The colours, type and tools behind it, for anyone curious and for future me.

Colour

Navy for structure, cyan for action

  • Navy

    #104e81 · brand

    Structure: logo lockup, eyebrows, section markers.

  • Cyan

    #00b2ff · highlight

    The brand cyan. A fill with dark text, never text itself.

  • Cyan, deep

    #006695 · accent

    Links and interactive text. Always underlined.

  • Cyan, button

    #007bb2 · accent-fill

    Primary buttons, with white text.

  • Ink

    #2e3841 · text

    Body text and every heading.

  • Slate

    #5e6a77 · text-muted

    Dates, captions and secondary text.

  • Mist

    #f5f7fa · bg

    The page ground.

  • Cloud

    #e8eef4 · surface-sunk

    Recessed areas: the footer, the boarding-pass stub, nav tabs.

Type

Three typefaces, three jobs

  • Display

    Space Grotesk

    Sharing my flight path into aviation

    Headings, navigation, buttons and eyebrows.

  • Text

    Inter

    Ground school is done and the flying has started.

    Everything you read: paragraphs and interface copy.

  • Data

    JetBrains Mono

    KVRB 191353Z 09008KT 10SM FEW025

    Figures, units, registrations and raw weather.

All three are open source under the SIL Open Font License.

Stack

What it's built with

Framework
Astro, building static pages with no client-side framework
Styling
Hand-written CSS driven by design tokens
Content
MDX posts in an Astro content collection
Images
Astro Image (sharp): resized, converted to WebP, served responsive
Hosting
Cloudflare Workers, built from GitHub on every push
Motion
GSAP, kept short and quiet, and switched off if your device asks for reduced motion
Analytics
Umami: no cookies, no tracking across sites, and it respects Do Not Track