Element's architecture is feasibility-driven, financially-grounded, and design-excellent. The digital presence should carry the same character — restrained, photography-led, and built so every detail feels intentional. Below is the direction we're recommending. Sit with each section. React.
Three reference points define the aesthetic landscape. The recommendation is to anchor 80% restraint with selective, considered moments of motion — not playfulness for its own sake.
Reference: BIG (big.dk). Specific moments of interactivity that reward exploration. The filterable scatter map is too playful for Element, but the principle of "the site has surprises" applies.
Reference: KTGY. Full-bleed imagery, generous whitespace, restrained typography, the architecture as the hero. This is the dominant aesthetic — clean, confident, photographic.
Reference: Framer Motion micro-interactions. Hover states, page transitions, subtle parallax. Used everywhere but used quietly. Motion that tells you the site is alive without distracting from the work.
These are the references that informed the direction. Each one teaches something — and each one shows where Element's site should be similar, and where it should diverge.
ktgy.com
The closest aesthetic match for where Element should land. Full-bleed project photography, generous breathing room, type that gets out of the way of the work. The site reads as "the architecture firm with confidence to let the buildings speak."
big.dk
Boundary-pushing and playful. The filterable project canvas is iconic. We don't want Element to feel this experimental — but the principle that "the site has discoverable interactivity" is right. Think of BIG as a permission slip to add one or two surprising moments.
ffkr.com
Restrained and corporate, established voice. Less photography-led than KTGY but cleaner information architecture. The site organization (services, projects, people, insights) is a useful template for Element's structure.
snohetta.com
Photography-forward with editorial typography and motion that serves content rather than decorating it. The way they introduce projects — slow, considered, scrolling reveals — is exactly the rhythm we want for Element's project pages.
The most important interaction on the site. At rest: three projects with restrained photography and brief metadata. On hover: the tile expands to fill the full row width, photography goes full-saturation, project narrative emerges in editorial detail. The interaction says — the work commands the room. Hover any tile below.
The project tile is the loudest interaction on the site. These three are quieter — used between pages, on scroll, and during navigation. Always present, never demanding. Hover each demo.
Architecture, considered.
Feasibility-driven design.
Considered.
Refined.
From the studio
Two families. One serif for editorial moments and project titles. One sans for body and metadata, getting out of the way of the imagery.
Photography is the color story. The interface is near-monochrome by design — dark canvas, light type, a single warm accent that signals interactive moments. The buildings get to be the color.
Most architecture sites are six to eight components, repeated. Building a small system that gets executed precisely is more durable than a sprawling library that gets executed inconsistently.
Full-bleed hero image with cinematic full-width expansion on hover. The repeated unit across the site — used on homepage, projects index, related-projects sections.
Editorial detail. Hero, narrative, photo gallery with captions, specs, related work. Reads like a curated book chapter.
A landing page per service vertical (commercial, residential, multifamily, mixed-use). Includes geographic targeting per the SEO roadmap.
Long-form editorial. Used for thought leadership, case studies, and SEO blog content. Type-led, restrained imagery.
Team profiles, firm narrative, awards, recognition. The "who we are" surface that builds E-E-A-T signals for SEO and trust for prospects.
Contact + project intake form. Captures lead context (project type, budget tier, timeline) for qualified routing rather than generic contact-us.
The aesthetic discipline matters as much as the aesthetic intent. Below are patterns that work for other firms but would undermine Element's positioning.
As you sit with this, the questions below help us calibrate before we build. Reply with quick reactions — even one-word answers are useful.