Inside the Rectangles website design
Rectangles is a creative website built with Framer and GSAP. Its pages are built from navbar, hero, gallery, testimonials, founder, and footer sections, shown here in full-page captures and a scroll recording. Typography: Perfume Sans 1 (display text and headings) and Forma DJR Display Regular (body text). Colours: background #121212, text #FFFFFF, surface #F5F3D4.
rectangles.fm is design conversations live, distilled, and in your inbox, weekly. Its visual style is editorial, retro, and bold, with navigation bar, hero, and newsletter form among its components.
Why we picked it
Record sleeves, torn notebook paper and barcode stickers are scattered at angles over black, framing each guest like a vinyl release rather than a webinar. Bold stacked headlines and handwritten names keep the collage readable, while repeated sticky-note sign-up prompts turn scrolling into easy, low-pressure chances to join.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
- Gallery: minimal interface around the images
- Testimonials: names, roles, and photos or logos for credibility
Questions designers ask
What fonts does Rectangles use?
Rectangles uses Perfume Sans 1 for display text and headings, and Forma DJR Display Regular for body text, measured from the captured page's CSS.
What is the Rectangles website built with?
The Rectangles website is built with Framer and GSAP, detected when the page was captured.
What colours does the Rectangles website use?
Measured from the captured page's CSS, the Rectangles website uses #121212 for the background, #FFFFFF for text, and #F5F3D4 for surfaces.
What sections does the Rectangles website have?
The Rectangles website includes navbar, hero, gallery, testimonials, founder, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
