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.
Your floor plan
Section titled “Your floor plan”The plan is drawn from data, so it can be any floor. Edit it in Pages → The floor plan:
- Set the
widthandheightin metres. - Add your areas as rectangles (
x,y,w,hin 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. - Add the doors: the middle of each door on a wall, its width, and whether that wall runs up and down.
- 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.
Pages and their content
Section titled “Pages and their content”| 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.
Booking and membership
Section titled “Booking and membership”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.
Integrations
Section titled “Integrations”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 |
Sections
Section titled “Sections”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.
Colors and brand
Section titled “Colors and brand”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.
Languages
Section titled “Languages”Quorum is ready for more languages: see Languages.
The 404 page
Section titled “The 404 page”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.
AI assistants and search engines
Section titled “AI assistants and search engines”AGENTS.mddescribes the project for coding assistants (Claude Code reads it throughCLAUDE.md, Cursor through.cursor/rules/)./llms.txtlists your pages and spaces for AI assistants, in every language.- Pages carry JSON-LD: the space as a
LocalBusiness, each space as aPlacewith its offer, membership as anOfferCatalog, events as aService, questions as aFAQPage, posts asBlogPostings.
Commands
Section titled “Commands”pnpm dev # local site, editor at /keystaticpnpm map # redraw the visit page's map (npm run map -- fetch)pnpm build # production buildpnpm 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).
