ARCHITECTURE FIRM
Lintel
Client
Lintel
Service
Website
Platform
Framer
Package
Core
See it live
The brief
LINTEL is a fictional architecture and design studio. The site treats the page like a drawing sheet: edge-to-edge grid, mono labels, figure captions and a single orange accent. It opens with a line-drawn elevation that draws itself in while a counter runs to 100%, then slides away. Fully responsive, CMS-driven project grid, working enquiry form. Built in Framer.
What I built
A single-page studio site with eleven sections across desktop, tablet and phone. The whole thing runs on a design system I set up first: six colour tokens, eight text styles and a layout template that carries the sticky navigation and footer.
The navigation is a component with a phone drawer that closes itself when you pick a section. Buttons and the form’s submit button are components too, with hover, pending, success and error states.
The work grid pulls six projects from a CMS collection, so the studio could add or swap projects without touching the layout. The contact form is wired up and ready to send.
The preloader is a custom React code component. It draws a south elevation line by line in SVG while a counter runs from 000 to 100, locks the page from scrolling, then slides the sheet up to reveal the site. It collapses its labels on phone.
Finished with page titles and descriptions, a 1200 by 630 social preview image and a favicon.
In their words
Like what you see?
Tell me about your project and I’ll get back to you soon.
Build something like this
ABN 35 396 413 658