Skip to content

Quorum

Quorum is a site for a coworking space: coworking, shared studios, office hubs, meeting-room venues. It is made like a Bauhaus poster. The home page opens on the floor plan in 3D: black walls on white paper, with a big sunflower circle, a red circle and a cobalt triangle behind it, and every space at first only drawn in line. As you scroll, the camera goes to the way in, then to each space in turn: its floor floods with its colour and its desks and tables rise as white blocks, with a card beside it (its name, who it’s for and the price). At the end the whole floor is coloured. Cobalt, sunflower and signal red, black frames, wide geometric headings. The demo is a fictional coworking space in an old crane hall in Berlin-Kreuzberg, Halle 9, with six spaces.

Quorum comes in two variants, chosen when you create the site: files/Sanity (static pages, any host) and EmDash (--cms emdash, rendered on request on Cloudflare). The pages are the same in both.

The plan is drawn from data, so it can be any floor. Edit it in Pages → The floor plan:

  1. Set the width and height in metres.
  2. Add your areas as rectangles (x, y, w, h in metres, from the top-left corner). Link an area to a space by the space’s file name (e.g. red-room): it takes the space’s colour, name and number. Leave it empty for the front desk, the kitchen, the lounge. Mark one area as the entrance. Keep areas edge to edge, so their walls line up.
  3. Add the doors: the middle of each door on a wall, its width, and whether that wall runs up and down.
  4. Add the furniture as rectangles and circles: the pieces inside a space rise as blocks when it fills.

Spaces fill in the order of the areas. The same plan shows flat on the spaces page and on each space’s page, with that space coloured. With reduced motion every space stands coloured and the cards are a list under the plan.

Page Edit it in
Home Pages → Home page (a list of sections; the floor plan’s texts are in its first section)
Spaces (a filter by kind, the spaces, the plan, what everyone gets) Pages → Spaces page and Content → Spaces
A space (picture, kind, who it’s for, price, features, booking, story, close-up, the plan) Content → Spaces
Membership (plans paid once or monthly, how membership works) Pages → Membership page
Events (what’s on, booking a tour) Pages → Events page
Journal Pages → Journal page and Content → Journal
Visit (hours, the map, house rules, getting here, questions, the contact form) Pages → Visit page
Name, contact, navigation Pages → Site settings
The floor plan Pages → The floor plan

In headlines, words wrapped in *stars* sit on a sunflower block.

Each space has a kind, who it’s for, a price and a note, features, a story, two pictures, a colour and a booking button. Turn on “Book online” and add a Stripe Price id (or a Lemon Squeezy variant id), and the button takes visitors to checkout; spaces without online booking can point to membership instead. Membership plans work the same way and can be paid once (a day pass, ten days) or monthly (a fixed desk; use a recurring Stripe price). After paying, members get an email and come back to the page with a message. Tours are booked with Cal.com.

Everything works without keys; each feature switches on with its variables in .env.example.

Feature Where Service
Room booking and membership Each space’s page, the membership page Stripe or Lemon Squeezy
Tours Events page, loads on click Cal.com
Newsletter Home and journal pages, with a welcome email Supabase or Mailchimp
Contact form Visit page; messages go to the email in Site settings Resend
AI chat Every page; answers from your spaces, membership, events, visit details and journal Claude or OpenAI
Search ⌘K or the search button: spaces, membership, events, journal, visit built in, or Algolia
Analytics Every page; Google Analytics only after consent Plausible, Umami, Google Analytics, PostHog
Members-only posts Journal Clerk

The home page is built from these sections, in any order: The floor plan (the signature), Spaces, How it works, Feature (e.g. events), Numbers, Journal, Newsletter and a closing call over a photo from edge to edge.

src/content/singletons/brand.json (Pages → Brand in Keystatic) holds three colors: the accent (cobalt: buttons, links, the night’s hue), the second (sunflower: the dots, the blocks behind marked words) and the third (signal red: shapes and hover shadows). Every space picks one of the three. Buttons are darkened until their white text reads; every color is adjusted for each theme, and one that can’t get there stops the build with a message. Brand also sets the fonts (text, headings, labels) and the corners (sharp or round). The site opens by day; night comes from the toggle.

The visit page shows a map of the streets around you, drawn from OpenStreetMap: set your entrance’s coordinates in map.config.json and run npm run map -- fetch.

Quorum is ready for more languages: see Languages.

A small game, Room for everyone: the hosts’ morning puzzle. A day of meetings on a timeline, one row each, and four rooms, each a colour. Tap a meeting to move it to the next room; two meetings can’t share a room at the same time (clashes are marked). When every meeting fits, press Done: each day scores 100 × the fewest rooms it needs ÷ the rooms you used. Three days, each busier. The best score is kept in the visitor’s browser.

  • AGENTS.md describes the project for coding assistants (Claude Code reads it through CLAUDE.md, Cursor through .cursor/rules/).
  • /llms.txt lists your pages and spaces for AI assistants, in every language.
  • Pages carry JSON-LD: the space as a LocalBusiness, each space as a Place with its offer, membership as an OfferCatalog, events as a Service, questions as a FAQPage, posts as BlogPostings.
Terminal window
pnpm dev # local site, editor at /keystatic
pnpm map # redraw the visit page's map (npm run map -- fetch)
pnpm build # production build
pnpm cms sanity schema|seed # move content to Sanity (see Content → Sanity)

In the EmDash variant: npm run dev, npm run deploy (Cloudflare) and npm run emdash:schema (after changing the content model).