Spesland

A website for Spesland, an AI company spun out of Northwestern that built tools for city governments. I designed the identity, worked out how the site was organised, and built the front end.

Overview

Client
Spesland, an AI spinout from Northwestern
Year
2024
Role
Identity, information architecture and front-end development
Location
Chicago
Stack
Nuxt, Vue, Lenis, Tailwind
Status
Shipped 2024, company since sold

Brief

Spesland came to me in 2024 with a detailed brief. It named their partners and applications, labelled many of the angles the design had to cover, and set out much of what the site needed to hold, such as the regions they worked in, a news section and their work. Most of the content was decided before I started. What I brought was the identity, the order things came in, how the site moved, and making all of it feel like one place.

Decisions

Pinning the city

The home page opens on a video of a city at night. The video stays where it is while the page scrolls up over it, so the first white section, GovChat, slides across the city like a sheet of paper until it's covered.

Spesland's tools are for the people who run cities, so I wanted a city to be the first thing you see and the thing the rest of the site sits on. A full-screen video is also the heaviest thing on the site, so in the 2026 revision phones get their own portrait cut of it at about a quarter of the size, and readers who turn motion off get a still frame. The shipped video drifted down as you scrolled, which hid where the pinning ended. I took the drift out, and the video now stops at the bottom of GovChat.

The city staying put while GovChat covers it, from the designer's cut

Turning the page dark for News

News is the one part of the site that keeps changing, so when it scrolls into view the whole page turns black, header included. Pointing at a country swaps the story. Three black bars wipe across the headline, the photo and the description, the new story is written in underneath, and the bars pull back.

The header was the hard part. It has to sit over a white page and a black one, so it uses a difference blend to stay readable on both. The swap I shipped closed the photo last, and the story could change while the old photo was still showing. I rebuilt it in 2026 so the three bars move together and the last country you point at always wins.

Rio de Janeiro from above, with Christ the Redeemer over the bay

Developments in Brazil

Spesland has announced a new partnership with STYA, a prime contractor in Natal, Brazil.

The News section, rebuilt here in React from the designer’s cut. Point at a country, or tab to one.

Pointing at Portugal, then Columbia, from the designer's cut

Getting the logo out of the way

The header logo is the symbol and the word Spesland. When you scroll down to read, the word fades and leaves the symbol on its own. Scroll back up and it returns. At the bottom of every page the footer spells the name out in large letters that drop into place one by one.

While you're reading, the name doesn't need to be there, and the symbol is enough to get you home. It does mean the name is missing from the header for most of the page, so the footer gives it back once, at full size. The 2026 revision fades the letters one at a time, last letter first, and has them follow whichever way you last scrolled, so a quick turn can't leave them hidden. The footer now builds once per visit.

The header logo across a scroll down and back up, from the designer's cut
The footer building, from the designer's cut

System

GovChat

Forma DJR Display 700, for headings

GovChat is designed to meet the multifaceted needs of government entities.

Forma DJR Deck 600, for text

  • Black

    #000000, Type, and the ground for News

  • White

    #FFFFFF, Ground

  • Teal

    #44AAA6, Logo and progress bar

  • Violet

    #694DA0, Logo and News tiles

Motion
Ease out cubic-bezier(0.16, 1, 0.3, 1)
Ease in-out cubic-bezier(0.65, 0, 0.35, 1)
240, 400 and 900ms, revised in 2026
Menu
FEATURESPRIVACYINTEGRATIONPRICINGLANGUAGE
Clock
Chicago, USA :

Structure

Redrawn in 2026 from the shipped site. The phone layout was added in 2026.

Spesland, Home
Home
Spesland, Features
Features
Spesland, Team
Team
The home page from the top to News, from the designer's cut

Outcome

The site shipped in 2024, and Spesland has since been sold. The link above goes to my designer's cut of the 2024 site, where in 2026 I fixed the motion and added a phone layout.

Credits

Design, identity and build
Brant Pan
Team photos and copy
Spesland
Partner logos
Their owners
Hero video and city photography
Adobe Stock

Next project