§ Case 02 — Creative Direction · Editorial
TerminalState2025
A typography-driven editorial system for a generative AI studio. Long-form narratives meet kinetic display type and a strict grid — fluid through phone, tablet, and ultrawide.
Year
2025
Role
Art Direction
Stack
Next.js · GSAP
Recognition target
Target: The FWA · FWA of the Day
Case 02 · 2025
Creative Direction · Editorial
01 · Brief
Terminal State — brief
A young generative-AI lab needed a publication, not a marketing site — somewhere their researchers could ship a 4 000-word essay on Friday and a 90-second teaser on Monday without the design buckling. The constraint: zero stock imagery and a single typeface family.
02 · Approach
Approach
We treated the home page as a magazine cover, not a landing page. Variable-font axes are wired to scroll velocity so display headlines feel like they're being printed in real time. The grid is strict — 12 columns at every breakpoint, no exceptions.
03 · Solution
Solution
Three article templates (essay, interview, dispatch) share one body component. Editorial spreads use CSS subgrid so a long pull-quote spans both columns the moment it lands at viewport width ≥ 980. The system survived 64 articles before any team member needed to ask how to publish.
◊ Gallery
Selected frames
Click any image to enter the lightbox. Use ←/→ to step through, Esc to close.
◊ Numbers
0.00
CLS
1.1 s
LCP (mobile)
64
Articles shipped
22 min
Time to publish
◊ Deliverables
- 01Editorial design system (12-col strict grid + subgrid spreads)
- 02Three article templates (essay / interview / dispatch)
- 03Variable-font headline runtime tied to scroll velocity
- 04MDX authoring pipeline with embedded React components
- 05Search index built at compile time (Pagefind)
- 06Brand guideline PDF + Notion handoff doc
04 · Outcome
Outcome
The system is written as an award-submission candidate, with time-to-publish, editorial throughput, and newsletter metrics treated as targets until production analytics can verify the result.
◊ Stack
Next.js
GSAP
Framer Motion