ENTRY 03 / 05UI / UX2026TYPE: LIVE

This Site

The portfolio as proof: the design system, motion grammar, and performance budget you are currently inside.

STACK — Next.js · Tailwind v4 · Motion · Anime.js · Lenis

FIG. 03.0 — SYSTEM COMPOSITION, DRAWN IN CODE

SEC. 01BRIEF

THE PROBLEM, PLAINLY

A studio that sells design and engineering should be judged on the thing it controls completely: its own site. This build is the studio’s design system running in production — dark-first, grid-disciplined, three typefaces, one accent color reserved exclusively for interaction.

The constraint list was written before the first component: no stock photography, no fabricated testimonials, no logo strips, sharp corners everywhere, every visual drawn in code, and a performance budget that survives the motion design rather than excusing it.

SEC. 02APPROACHDECISIONS, NOT FEATURES

Tokens before components

Every color, type size, and spacing step lives in one CSS layer. The site can be re-branded by editing a single file — which is also how it will absorb the studio’s final name.

One motion grammar

A single easing curve, three durations, one stagger unit. Motion handles interface reveals; Anime.js drives the living details — counters, line draws, the boot sequence. Nothing animates outside the grammar.

Proof by artifact, not association

With no client logos to lean on, the site leans on evidence: real build output, real diagrams, honest labels on every project. The ledger counts fake testimonials published: zero.

Performance as a design decision

Server components by default, motion in islands, fonts self-hosted, visuals in SVG. The budget — 95+ Lighthouse, CLS ≈ 0 — was set on day one and checked at every section.

SEC. 03ARCHITECTURETHE DIAGRAM IS THE CONTRACT

FIG. — A token layer feeding a three-face type system and one motion grammar; eight routes drawing from a shared component index, audited against a performance budget.

SEC. 04ARTIFACTSPROOF, NOT PROMISES

>_ AUDIT RUN

$ lighthouse / --preset=desktop
 
Performance      99
Accessibility   100
Best Practices  100
SEO             100
 
LCP  0.7 s   (hero headline — no hero image to wait for)
CLS  0.00    (transform/opacity only, media sized ahead)
TBT  40 ms   (GSAP-free; anime.js islands load per section)

§ TYPE SPEC

Clash Display: Display · 600/700 · −0.02 em · headlines only
Geist: Body · 400 · 1.6 line-height · 45–90 ch measure
JetBrains Mono: Labels · 500 · +0.08 em · uppercase, 12 px
Orange #FF4E08: Interaction only — never decoration

ENGINEERING NOTE

The riskiest choice was refusing imagery entirely: every visual on the site is drawn in code, in the same 1-px stroke language. If the work is precision, the site must be the first exhibit.

SEC. 05OUTCOMEMEASURED, NOT ESTIMATED

ACCESSIBILITY SCORE

STOCK PHOTOS USED

TYPEFACES, EACH WITH ONE JOB

FAKE TESTIMONIALS PUBLISHED

NEXT ON THE LEDGER — ENTRY 04 / 05Fieldkit →