Built on v-stack

One website, a stack of small packages

v-page is the CMS and the front end you are looking at. v-stack is the set of neutral packages it is built from, shared with other products.

The editorial team Read the journal

Rounded pillars in lilac and peach on a warm cream background

How it fits together

Two apps, one brick set

The CMS is a Payload instance with its own database. Its pages store their sections as bricks, and its globals hold the header, the footer and the site settings.

The front end is a Next app with no content of its own. For each address it asks the CMS for the published page and renders its sections with the same brick set the CMS edits.

That set lives in one small package. Add a brick there, and it is editable in the CMS and drawn on the site in the same change.

Principles

Three rules the code keeps

One schema per brick
What Payload stores is what the component receives. The editor field, the renderer and the validator all come from that one schema.
Nothing global
A site passes its own brick set. No import registers a brick behind your back, so two sites can offer different sets.
Safe by construction
Every link passes an allowlist, and the editor offers only the rich text the site can draw.

A placeholder video. Nothing loads from YouTube until you press play, and then from youtube-nocookie.com.Video: placeholder

Text and media

Text over an image, still readable

This is the overlay variant: the text sits at the foot of the image under a dark scrim. Its tests check every line against a white image at a contrast of 4.5:1 or more.

How colour modes work

What we leave out

Fewer options, consistent pages

Every option an editor sees is one more way for two pages to drift apart. A brick offers the variants a design needs, and the theme decides the rest.

In practice there is:

no colour picker: a background is one of the theme's tokens
no class name field: layout is a token the component reads
no nesting: a grid holds cards, and a card holds no grid

A brick set is also a decision about what a site will not do.

AcmeDesign principle

The building blocks

The v-stack packages behind this site

@v-stack/ui
The design system: accessible components built on React Aria, their stylesheets and the light, dark and system theme.
@v-stack/ui-bricks
The bricks: one schema each, their components and the server renderer that turns stored data into a page.
@v-stack/payload-bricks
Turns a brick set into a Payload field, with short database names and a rich text editor that matches the renderer.
@v-stack/payload-users
Password sign-in with a minimum length and a lockout, and the roles field the editorial team is built on.