Grownic — Discipline 01
Web Development
An editorial practice for the web

The web,set in type.

Grownic's web practice treats the browser like a printing press with a heartbeat. We compose grids, argue over kerning, and ship web apps that behave like precision instruments.

On this page
  1. I. Principles of the practice
  2. II. Selected work
  3. III. Stack & instruments
  4. IV. How a project runs
  5. V. Commission a site
EditorialTypographicPrecision-engineeredMotion, restrainedEdge-renderedType is the interfaceEditorialTypographicPrecision-engineeredMotion, restrainedEdge-renderedType is the interfaceEditorialTypographicPrecision-engineeredMotion, restrainedEdge-renderedType is the interface
§ I · Manifesto

We do not build websites in the industrial sense. We compose them — column by column, sentence by sentence — until the page reads like something a person cared about. A long time ago we decided the web deserved the same weight as print. We haven't changed our minds.

The Grownic Web Practice, since 2021
§ II · PrinciplesFour commitments
P.01

Type is the interface.

Grids first. A scale we can defend. Every column, gutter, and baseline argued for before a single component is drawn.

P.02

Fast is a feature.

Under 1.5s on 4G. Edge-rendered. Zero-jank scroll. Performance is not a phase — it is the design constraint.

P.03

Motion with restraint.

Motion serves reading. Nothing spins for the sake of it. Micro-timings around 240ms, cubic-bezier(0.22,1,0.36,1), and stop.

P.04

Written to be read.

Copy is design. We rewrite until the words carry the layout. No hero fluff. No filler columns.

§ III · Selected work2024 — 2025
01 · Editorial platform

The Ledger

Longform + subscription
TanStack · Sanity · Stripe
2025
02 · Fintech dashboard

Meridian

Realtime web app
Next · tRPC · Postgres
2025
03 · Studio site

Kite Atelier

Portfolio · cinematic
Astro · GSAP · R3F
2024
04 · Marketplace

Ambient

Two-sided commerce
Remix · Shopify · Algolia
2024
§ IV · InstrumentsStack of record
Framework
TanStack Start · Next.js · Astro · Remix
Language
TypeScript, strict, top to bottom
Styling
Tailwind v4 · CSS variables · design tokens
Motion
Motion for React · GSAP · Lenis
Data
tRPC · TanStack Query · Postgres · Prisma
CMS
Sanity · Contentful · Payload · MDX
Edge
Cloudflare · Vercel · Fly.io
Quality
Playwright · Vitest · Lighthouse budgets
§ V · ProcessHow a project runs
01

Brief

One page. Real constraints. Real users. No moodboards yet.

02

System

Type scale, grid, tokens, motion register — written down before pixels.

03

Compose

Layouts sketched in code. Copy fights for its column. Nothing lorem.

04

Engineer

Typed, tested, budgeted. Performance is a diff, not a wish.

05

Ship

Analytics, evals, next quarter's roadmap — on day one.

§ VI · Commission

Have a site that
deserves to be set properly?