Explore

The Collected Works

PRO

tcw.studio

Visit website
Screenshot of The Collected Works
Creative StudioPublished
  • Animation
  • Dark
  • Editorial
  • Large type

Palette

Typography

  • Primary

    saans
    Weights
    400, 500, 600, 700
    Fallback
    Arial, Helvetica, sans-serif

  • Secondary

    Unknown
    Weights
    400, 500
    Fallback
    Use the primary sans in all caps at a very small size with generous tracking.

  • Mono

    Unknown
    Weights
    400
    Fallback
    Use a compact monospace for timestamps, project indices, and technical labels.

About this design

A dark, highly art-directed studio homepage that pairs a meticulous technical grid with bold motion work, editorial project imagery, dense information panels, and an oversized custom closing wordmark.

Prompts

Pro access

Six prompts, in build order. Pro unlocks all six, ready to paste into your AI tool.

  • Main build prompt
  • Build frontend
  • Generate assets
  • Add animations
  • Responsive polish
  • Final visual polish

Build Recipe

Framework

  • Next.js· Detected
  • Next.js
Agent
Cursor
Model
GPT 5.6 SolThe build depends on precise responsive CSS grids, media sequencing, and a long, visually disciplined editorial page rather than 3D or bespoke shader work.

Creative tools

  • Nano Banana
  • Recraft
  • Runway

Libraries

  • GSAP

Special requirements

Wide looping motion-media exports matching the reference 1.98:1 presentation frame; a custom substitute display wordmark or original SVG lettering; a substantial, stylistically coherent portfolio image set.

AI Replicability

86 / 100

The structural visual system, media-led motion, and information modules reproduce reliably with current frontend tools; the main residual work is art-directing a comparably varied, high-quality project media archive and bespoke display lettering.

Main remaining challenge

Sourcing or art-directing a varied set of equally polished motion loops and project images that can sustain the dense, image-led editorial grid.

The design and branding of The Collected Works belong to their authors. InspoToCode documents its visual language as a reference; anything you build from it should carry your own branding, copy and assets.

Design analysis

Pro analysis

Understand why the design works

The written breakdown of this design: composition, hierarchy, spacing, imagery and the decisions behind the details — the part that tells you what to keep and what to change.

Upgrade to Pro