Decided once. Committed.

The Sanity setup you stop rebuilding.

Page builder, fetch layer, draft mode, Studio structure. Every hard call made once over six years and committed. An agent gives you a different architecture every run. This one is already decided.

For engineers who work in Next.js and Sanity. Not a no-code tool.

Get accessRead the system
INPUT VERIFIED
LOC:ROOT
SN: TCA-2026-001
STATUS: ACTIVEV1.0.0
NEXT 16.X
SANITY V6
TS: STRICT
001 / Positioning

Decisions instead of another starter.

Reading this as a technical product system for Next.js and Sanity engineers. Tone is direct, opinionated, editorial, and lightly terminal-native. Mode: extracted from the live site.

  • decided
  • technical
  • direct
  • committed
  • editorial
  • agent-native
  • production

The architecture is fixed. The tools are defaults you can swap.

01
Lead with the hard call.

Make the decision visible before listing the feature.

02
Show the actual repo.

Use files, routes, terminals, and schemas as proof of specificity.

03
Keep the copy plain.

Short sentences carry more trust than product theater.

04
Make the CTA a commitment.

Pricing and access are visible, concrete, and one-time.

002 / Color

Off-white for the page. Black for the proof. Orange for the signal.

These are extracted target values from the live site's computed stylesheet. The kit documents both production surfaces without inventing a separate dark theme.

Off white
Black
Accent orange
Dark grey
Ghost grey
Mid grey
Black deep
White
Kit surface guide, designed documentation ratio
50 OFF WHITE / 45 BLACK / 5 ACCENT
Contrast checks
PairRatioResult
Black on off white13.56:1AA / AAA
Accent on black6.96:1AA / AAA
White on black15.72:1AA / AAA
Dark grey on off white5.96:1AA
Light surface

Long-form explanation and pricing.

Dark surface

Repo proof and showcase.

003 / Typography

GeistSans for the argument. GeistMono for the system.

GeistSans and GeistMono are the target families. This standalone document declares the extracted families and falls back to Arial and a system monospace when the original font files are unavailable.

DisplayGeistSans / 500
40 to 80px / 1
tracking -0.045em
text-headline-20
The next three days are yours.
HeadlineGeistSans / 500
32 to 48px / 1.1
tracking -0.035em
text-headline-10
Every decision already made.
BodyGeistSans / 400
16 to 24px / 1.25
tracking normal
text-body-30
A foundation for the work you actually want to ship.
CaptionGeistSans / 400
14 to 16px / 1.25
tracking normal
text-caption-20
The hard calls are made once and committed.
Mono dataGeistMono / 400
10px / 1.25
uppercase
text-ui-10
Input verified / loc:root / status:active
Pairing rule

Headings stay roman and calm. Mono is reserved for metadata, navigation, repo names, pricing labels, and system evidence. Never use mono for the long argument.

004 / Layout

The signature move is a split proof surface.

The home page alternates an off-white editorial rail with black evidence zones. Desktop uses wide 80px gutters and two-column or 12-column compositions. Mobile collapses to one rail and preserves the surface change.

Header / nav
ArgumentProof
Access / footer

Signature composition: editorial copy beside a technical surface, not a generic card grid.

Content rail1280px maximum at desktop, 16px side padding on small screens.
Desktop gridTwo equal hero columns. Feature sections use 1.5fr and .5fr or a 12-column proof grid.
Spacing base1px base unit. Production rhythm uses 8, 16, 24, 32, 64, 72, 80, and 160px values.
Section rhythm160px desktop section padding, 72px mobile section padding.
Mobile collapseHero stacks off-white copy above black proof. Component grids become one column below 700px.
8
16
24
32
48
64
80
005 / Visual elements

Terminal edges, raw surfaces, and one bright signal.

The visual language treats the repository as the brand asset. Framing is functional, surfaces are black or off-white, and orange appears as a cursor, rule, active cue, or purchase signal.

01 / Repo framing

~/the-content-architecture
APP / COMPONENTS / SANITY
SCHEMA / FETCH / REVALIDATE

02 / Radius scale

2px
4px
8px
pill

03 / ASCII texture

Grid and text are texture. They never stand in for readable copy.

04 / Status cue

INPUT VERIFIED
STATUS: ACTIVE / LOC:ROOT
006 / Components

Every component has a job in the argument.

These previews map the actual page topology: floating navigation, access actions, repo proof, terminal behavior, status metadata, carousel controls, and FAQ disclosure.

Navigation
FEATURES

Floating nav rail

Black rounded 8px chrome stays above the split hero.

Action
Get access

Access button

One-time commitment, high contrast, no decorative icon.

Proof
~/the-content-architecture
> get-access
# €399 / one-time

Terminal prompt

Pricing and repository language share a technical register.

Input

Email capture

Plain input, visible label, orange focus ring.

State
Success: invite route ready.Error: use an accessible email.

State set

Loading, success, error, and disabled states remain explicit.

Disclosure
What stack is this built on?

Next.js, Sanity, TypeScript, Tailwind, and Biome are named plainly in the source FAQ.

FAQ disclosure

Native details behavior keeps the answer accessible without extra framework code.

007 / Motion

Motion is a cue, not a performance.

Extracted motion signals include a 392ms hero reveal curve, a 1.4s stepped scroll cue, cursor blink at .9s, status ping at 1.8s, and a 5s minimap scan. The demos below show the documented transform and opacity behavior.

Hero scroll cue
Scroll cue

transform translateY
1400ms / steps(7, end)
scroll instruction

Text reveal
Decided once

opacity + translateY
392ms / cubic-bezier(.23, 1, .32, 1)
hierarchy

Cursor blink
INPUT_

opacity
900ms / steps(1, end)
terminal feedback

Hard rules
  • Animate transform and opacity for the documented demos.
  • Use the target's 392ms hero curve for hierarchy and the stepped cue for scroll instruction.
  • Keep status ping and minimap scan subordinate to content.
  • Never add parallax, bounce, cursor followers, endless marquee, or scroll hijacking.
  • Reduced motion removes spatial movement and leaves a static readable state.
008 / Do and don't

Committed rules make the system recognizable.

These rules are grounded in the target site's actual visual and content behavior. They are not generic boilerplate advice.

Do

  • +Use off-white as the reading surface and black as the proof surface.
  • +Keep headings roman, compact, and direct.
  • +Use GeistMono-style metadata for routes, status, pricing, and repo evidence.
  • +Let orange mark action, focus, active state, or verified status.
  • +Show the real architecture through files, schemas, terminals, and named decisions.
  • +Collapse the split composition to one readable rail on mobile.

Don't

  • xDo not turn the orange accent into a second background theme.
  • xDo not soften technical proof into generic SaaS cards.
  • xDo not use mono for every paragraph or headline.
  • xDo not hide the one-time price, stack limits, or no-code boundary.
  • xDo not substitute fake dashboard screenshots for repository evidence.
  • xDo not animate the page into a distraction from the decision.