We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 01 · Architecture studio · Concept

Cadrel

Frame first. Then everything else.

Cadrel, a fictional architecture studio. Each project opens with a hairline section drawing that a scroll-driven cut line turns into its photograph.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Cadrel site on a wide display: Frame first. Then everything else.
Opening screen, desktop

01 The brief

The brand
Cadrel is a fictional boutique architecture practice working on residential, cultural and commercial spaces. Its tagline is "Frame first. Then everything else."
The problem
Private clients and developers judge a practice by finished work. The site has to show the studio's hand quickly, let visitors compare projects by type and location, and lead to a qualified enquiry.

02 The idea

The section becomes the photograph

What you see
Each project story begins with its cross-section drawn in single-weight ink line. As the visitor scrolls, an oxide cut line sweeps across and the drawing gives way to the photograph beneath it. The archive filters by type and location, and galleries open full-screen.
How it works
Drawings are stored as data (shapes, dimensions, levels) and rendered as inline SVG. Each drawing is registered to its photograph in a shared 1200 x 800 coordinate space, so the line and the image meet without a seam. Scroll position drives the cut.

03 Design system

  • Concrete Ground#E9E7E2 groundPage and drawing sheet.
  • Graphite Ink#1C1C1A inkText, every rule, drawing strokes and hatch.
  • Oxide#A6512C accentThe cut line, the current place, focus and errors only.
  • Pencil Grey#5F5E59 mutedCaptions, labels and fact keys.
  • Darkroom #111110. The full-screen lightbox only.
  • On-Oxide White #FFFFFF. Text on the active oxide chip.
Type
  • Geologica
    Light weight, large sizes: titles, project numbers and short statements.
  • Overpass Mono
    Everything lettered like a drawing: body copy, captions, coordinates and dimensions.
Edges
Square corners, no shadows and no cards. Structure comes from 1px ink hairlines, the framed stage with corner brackets, and a 12-column grid.
Motion
Motion is scroll position and colour inversion only. With reduced motion, the drawing and the photograph are stacked statically.

04 Process

  1. Pre-production

    The concept started with the product and design direction documents: who the visitors are, what the site must achieve and the one signature move, before any component was written.

  2. Build

    The site was built page by page against that direction, with the drawing data, the registration of drawings to photographs and the shared layout done first.

  3. Finish review

    The finished build went through Impeccable finish-review rounds that checked it against the direction and the design system.

  4. Fixes

    Material issues from those rounds were fixed and the pages checked again, including keyboard use and reduced motion.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Drawings as data rendered to inline SVG
  • Scroll-driven section reveal
  • Archive filters kept in the URL
  • Native dialog lightbox
Access
  • Gallery viewer on a native dialog with Left, Right, Home, End and Escape keys
  • Visible 2px focus outline on interactive controls
  • Drawings carry image roles and labels; filters report pressed state
  • Form fields use aria-invalid and aria-describedby, with status messages
  • Reduced-motion styles stack the reveal and stop image transitions
Tests
Covered by its own Playwright end-to-end spec.

06 Honest notes

Cadrel is a fictional brand and a concept project by Artlogic. The projects, places and people on the site do not exist.

The enquiry form is a demo and stores nothing. The page says so.

The photographs are free stock images from Unsplash that stand in for the fictional buildings, and the pages label them as stock. Real photographs of real buildings were not available. The sections, plans, logo and mark are original SVG drawn for this concept.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.