Tessel & Rook

How it was made

The original is the portfolio site of an interface and product design studio. 6 case studies, 14 archive rows and 7 FAQs were carried over without cuts.

The grid has 40px side margins and 6 columns of 210px with 20px gaps. The 6 menu underlines are the grid marks.

In black and white only, thin serif and bold grotesque are mixed within one sentence. Type was changed to Noto Serif Display, Hanken Grotesk and DM Mono.

On load, a text scramble starts at 400ms and ends at 1,700ms. The footer marquee takes 30 seconds per loop.

Hovering a case row on the home page brings a photo that follows the cursor. Each case keeps its awards and scope in the same place.

The showreel was replaced with photo cuts instead of video. Award bodies, people and book titles are all fictional.

Key features

• 6-column 210/20 grid · justified 4-line hero
• Load text scramble · footer marquee
• Case rows with cursor-following photos
• 14-row archive · testimonial carousel · FAQ · contact form

Where and how to use it

Suited to design and development studios with a modest number of cases. Case list, details, archive table, about and contact run on one grid.

Points to check

The contact form validates but sends nothing. The privacy policy and 404 page were built on the same template because the original screens could not be checked.