Design system · v2 cinematic

The style behind the software.

Warm white and near-black bands, giant 500-weight Geist, pill buttons, 24px media cards, lots of air. The same sheet follows twice — once on each tone. If it looks wrong here, it's wrong everywhere.

tailwind.config.ts · app/globals.css · components/ui

Dark band

<Band tone="dark">

Everything below reads the dark tone's CSS variables. Nothing in this block changes when it moves to the other band.

Tone swatches

--bg · --fg · --fg2 · --fg3 · --hair · --card — set by data-tone on the Band.

var(--bg)#050505

Band ground

var(--fg)#F4F1EA

Headlines, primary button fill

var(--fg2)#A9A49A

Body, ledes

var(--fg3)#6F6A62

Captions, placeholders

var(--hair)#1F1F1C

Hairlines, card borders

var(--card)#111110

Card and panel fill

Display scale

Geist 500. Tracking tightens as size grows. The lede is always grey (--fg2).

.display-hero
Footage hero, CTA band · 44 → 96px · -0.04em
Film a walk. Get a world.
.display-2xl
Page H1, section lead · 40 → 72px · -0.04em
Film a walk. Get a world.
.display-xl
Section H2, Feature title · 32 → 52px · -0.03em
Film a walk. Get a world.
.display-lg
H3, MediaRow titles · 26 → 34px · -0.03em
Film a walk. Get a world.
.display-md
Card titles, grid tiles · 20 → 24px · -0.02em
Film a walk. Get a world.

.lede

One phone video becomes a 3D space anyone can walk, in any browser.

.body-lg · .body

A failed reconstruction is never charged and never counts against your plan.

Typically under an hour from upload to a link, an embed and a file you own.

.body-sm · mono

Checks run every 10 minutes via Vercel Cron. Grey means nothing was recorded.

Real reconstruction · phone-shot · via Giotto 7

Buttons

Pills. primary fills with --btn-fill, secondary is a hairline, text is a quiet link. Sizes sm (38) · md (48) · lg (56).

size="sm"

Nav, cards, rows

size="md"

Default

size="lg"

Hero, CTA band

btn-glass · over footage only

.pill

RoadmapChangelogStatus

Quiet inline chip-links: hairline edge, card fill, 13.6px. Not a button.

.chip

Inline code like NEXT_PUBLIC_HERO_SPLAT_URL or a path /t/via-giotto-7.

Inputs

h-12 rounded-full border t-hair bg-[var(--card)] px-5 t-fg placeholder:text-[var(--fg3)] focus:border-[var(--fg)]. Textareas are rounded-2xl.

EmailListing

Message

Opens a pre-filled email

Surfaces

.card — 24px radius, --card fill, hairline that strengthens on hover. .media — 24px radius, black behind. .dotgrid — radial-gradient backdrop, tone aware.

.card

Hover me

The default container for a belief, a channel, a row of a security table. No shadow; depth is the hairline.

A half-assembled reconstruction: points on one side, the finished room on the other

<Media src ratio="4/3"> · Real reconstruction · phone-shot · via Giotto 7

.dotgrid

Behind a Feature's media. Fades at the edges.

<Feature>

Ray-style row: text one side, media in a dot-grid the other. side="left" | "right".

Film

A two-minute walk at head height.

Any iPhone or Android. Lights on, slow steady pass, every room edge to edge. None of the shot guide's five rules is about hardware.

Read the shot guide

The reconstructed room, seen from the entrance

<MediaRow>

The grid under a heading: media card + display-lg title + body + small pill. cols=2 | 3.

The viewer

WebGL

Opens in any browser from a plain link. No app, no download prompt.

Discover embeds

A reconstruction mid-way through assembling

The file

.ply

Every tour is a file you own. Download it, archive it, move it to another host.

Discover the dashboard

Light band

<Band tone="dusk">

Everything below reads the dusk tone's CSS variables. Nothing in this block changes when it moves to the other band.

Tone swatches

--bg · --fg · --fg2 · --fg3 · --hair · --card — set by data-tone on the Band.

var(--bg)#17120D

Band ground

var(--fg)#F4F1EA

Headlines, primary button fill

var(--fg2)#B5A994

Body, ledes

var(--fg3)#7A6F5E

Captions, placeholders

var(--hair)#2A2119

Hairlines, card borders

var(--card)#1F180F

Card and panel fill

Display scale

Geist 500. Tracking tightens as size grows. The lede is always grey (--fg2).

.display-hero
Footage hero, CTA band · 44 → 96px · -0.04em
Film a walk. Get a world.
.display-2xl
Page H1, section lead · 40 → 72px · -0.04em
Film a walk. Get a world.
.display-xl
Section H2, Feature title · 32 → 52px · -0.03em
Film a walk. Get a world.
.display-lg
H3, MediaRow titles · 26 → 34px · -0.03em
Film a walk. Get a world.
.display-md
Card titles, grid tiles · 20 → 24px · -0.02em
Film a walk. Get a world.

.lede

One phone video becomes a 3D space anyone can walk, in any browser.

.body-lg · .body

A failed reconstruction is never charged and never counts against your plan.

Typically under an hour from upload to a link, an embed and a file you own.

.body-sm · mono

Checks run every 10 minutes via Vercel Cron. Grey means nothing was recorded.

Real reconstruction · phone-shot · via Giotto 7

Buttons

Pills. primary fills with --btn-fill, secondary is a hairline, text is a quiet link. Sizes sm (38) · md (48) · lg (56).

size="sm"

Nav, cards, rows

size="md"

Default

size="lg"

Hero, CTA band

btn-glass · over footage only

.pill

RoadmapChangelogStatus

Quiet inline chip-links: hairline edge, card fill, 13.6px. Not a button.

.chip

Inline code like NEXT_PUBLIC_HERO_SPLAT_URL or a path /t/via-giotto-7.

Inputs

h-12 rounded-full border t-hair bg-[var(--card)] px-5 t-fg placeholder:text-[var(--fg3)] focus:border-[var(--fg)]. Textareas are rounded-2xl.

EmailListing

Message

Opens a pre-filled email

Surfaces

.card — 24px radius, --card fill, hairline that strengthens on hover. .media — 24px radius, black behind. .dotgrid — radial-gradient backdrop, tone aware.

.card

Hover me

The default container for a belief, a channel, a row of a security table. No shadow; depth is the hairline.

<Media src ratio="4/3"> · Real reconstruction · phone-shot · via Giotto 7

.dotgrid

Behind a Feature's media. Fades at the edges.

<Feature>

Ray-style row: text one side, media in a dot-grid the other. side="left" | "right".

Film

A two-minute walk at head height.

Any iPhone or Android. Lights on, slow steady pass, every room edge to edge. None of the shot guide's five rules is about hardware.

Read the shot guide

<MediaRow>

The grid under a heading: media card + display-lg title + body + small pill. cols=2 | 3.

The viewer

WebGL

Opens in any browser from a plain link. No app, no download prompt.

Discover embeds

The file

.ply

Every tour is a file you own. Download it, archive it, move it to another host.

Discover the dashboard

Light band

<Band tone="light">

Everything below reads the light tone's CSS variables. Nothing in this block changes when it moves to the other band.

Tone swatches

--bg · --fg · --fg2 · --fg3 · --hair · --card — set by data-tone on the Band.

var(--bg)#FAF8F3

Band ground

var(--fg)#0A0A0A

Headlines, primary button fill

var(--fg2)#55524C

Body, ledes

var(--fg3)#8A867E

Captions, placeholders

var(--hair)#E6E2D8

Hairlines, card borders

var(--card)#FFFFFF

Card and panel fill

Display scale

Geist 500. Tracking tightens as size grows. The lede is always grey (--fg2).

.display-hero
Footage hero, CTA band · 44 → 96px · -0.04em
Film a walk. Get a world.
.display-2xl
Page H1, section lead · 40 → 72px · -0.04em
Film a walk. Get a world.
.display-xl
Section H2, Feature title · 32 → 52px · -0.03em
Film a walk. Get a world.
.display-lg
H3, MediaRow titles · 26 → 34px · -0.03em
Film a walk. Get a world.
.display-md
Card titles, grid tiles · 20 → 24px · -0.02em
Film a walk. Get a world.

.lede

One phone video becomes a 3D space anyone can walk, in any browser.

.body-lg · .body

A failed reconstruction is never charged and never counts against your plan.

Typically under an hour from upload to a link, an embed and a file you own.

.body-sm · mono

Checks run every 10 minutes via Vercel Cron. Grey means nothing was recorded.

Real reconstruction · phone-shot · via Giotto 7

Buttons

Pills. primary fills with --btn-fill, secondary is a hairline, text is a quiet link. Sizes sm (38) · md (48) · lg (56).

size="sm"

Nav, cards, rows

size="md"

Default

size="lg"

Hero, CTA band

btn-glass · over footage only

.pill

RoadmapChangelogStatus

Quiet inline chip-links: hairline edge, card fill, 13.6px. Not a button.

.chip

Inline code like NEXT_PUBLIC_HERO_SPLAT_URL or a path /t/via-giotto-7.

Inputs

h-12 rounded-full border t-hair bg-[var(--card)] px-5 t-fg placeholder:text-[var(--fg3)] focus:border-[var(--fg)]. Textareas are rounded-2xl.

EmailListing

Message

Opens a pre-filled email

Surfaces

.card — 24px radius, --card fill, hairline that strengthens on hover. .media — 24px radius, black behind. .dotgrid — radial-gradient backdrop, tone aware.

.card

Hover me

The default container for a belief, a channel, a row of a security table. No shadow; depth is the hairline.

<Media src ratio="4/3"> · Real reconstruction · phone-shot · via Giotto 7

.dotgrid

Behind a Feature's media. Fades at the edges.

<Feature>

Ray-style row: text one side, media in a dot-grid the other. side="left" | "right".

Film

A two-minute walk at head height.

Any iPhone or Android. Lights on, slow steady pass, every room edge to edge. None of the shot guide's five rules is about hardware.

Read the shot guide

<MediaRow>

The grid under a heading: media card + display-lg title + body + small pill. cols=2 | 3.

The viewer

WebGL

Opens in any browser from a plain link. No app, no download prompt.

Discover embeds

The file

.ply

Every tour is a file you own. Download it, archive it, move it to another host.

Discover the dashboard

FAQ

The accordion. Hairline rows.

The living reference for docs/DESIGN_SYSTEM.md v2. Every element here is the production component on a real Band, not a drawing of it.
Once on a dark band, once on a light one. A block that only reads well on one tone has a hard-coded colour in it.
No. /style is listed in EXCLUDED_SITE_PAGES so it never appears in the sitemap.

Rules

Do this. Not that.

Condensed from docs/DESIGN_SYSTEM.md. The honesty rules are enforced by tests; the rest by review.

Every section is a <Band tone>. Light and dark alternate down the page.
Dusk is the third tone — a deep warm band, at most once per page, for the single most technical or most important section.
Colour only through tone classes: t-fg, t-fg2, t-fg3, t-hair, .card, .media, var(--bg).
Headlines through <Heading>: 500 weight, tight tracking, grey lede, optional pill on the right.
Buttons are pills. Primary fills with the band's foreground; secondary is a hairline.
Labels are <Tag> — uppercase pill outlines. Soft variant for metadata, solid rarely.
Footage and renders live in <Media>: 24px radius, black behind, real reconstruction only.
Label provenance once per page: “Real reconstruction · phone-shot”.
Sun #E9A24E is the logo dot, live dots and at most one tag per band. Never a fill.
“Under an hour” always sits next to “typically” or “a target, not a guarantee”.
Every page keeps its pageMeta + JSON-LD and ends on <CTABand />.

Don't

Hard-coded colours: text-bone, bg-card, border-line, text-ash, text-mute, bg-canvas.
Serif, italics, glows, text-shadows, gradients on type.
Aurora, particles, blurred blobs. (Film grain is systemic on dark and dusk bands — 5% noise on the ground, never decorative, never over type.)
Sticky scroll-jacking, parallax, marquees, magnetic cursors.
Hairline-only “Linear” panels with traffic lights (retired).
Logo walls, testimonials, customer or tour counts, “% faster”.
A promised turnaround — the tests fail the build on it.
Stock imagery or any still presented as a customer listing.

The band every page ends on.

<CTABand title body primary secondary /> — hero type, centred, two pills. This is the real one.

Start free Talk to us

The style behind the software.

<Band tone="dark">

Tone swatches

Display scale

Tags

Buttons

Inputs

Surfaces

Hover me

<Feature>

A two-minute walk at head height.

<MediaRow>

The viewer

The file

<Band tone="dusk">

Tone swatches

Display scale

Tags

Buttons

Inputs

Surfaces

Hover me

<Feature>

A two-minute walk at head height.

<MediaRow>

The viewer

The file

<Band tone="light">

Tone swatches

Display scale

Tags

Buttons

Inputs

Surfaces

Hover me

<Feature>

A two-minute walk at head height.

<MediaRow>

The viewer

The file

The accordion. Hairline rows.

Do this. Not that.

The band every page ends on.