Oda

Oda is a site for a small architecture or interiors studio, laid out like a drawing set pinned to the long table: grid paper, title blocks, sheet numbers and line drawings that draw themselves.

In the hero, a timber cabin draws itself line by line and casts a real shadow. Drag the sun and the shadow moves, calculated for your studio's own city on the equinox and set to its live time. Below it:

• project sheets that slide sideways as you scroll, with progress and a counter

• a floor plan that builds up phase by phase through the process

• material samples with their notes

• a pencil sketch pad with PNG download, next to a native contact form

• a live city clock in the nav

Everything a studio edits is native Framer: text, sections, buttons, the nav, the footer, the 404 and privacy pages. Projects, people, materials and awards are CMS collections, and every project gets its own sheet page. The drawings are code components, and their colours come from the project's color styles, so a new palette re-tints them too. Desktop, Tablet and Phone layouts, and reduced motion respected.

Framer Skills

Five skills for Framer's agent, plus a design system page that shows every color and text style, every component and variant, and a few example sections.

• /oda-design-system: add pages and sections in Oda's grid, styles and sheet numbering

• /oda-rebrand: another studio's name, city and sun study, colours, fonts and copy

• /oda-content: projects, materials, people and awards in the CMS

• /oda-code-components: tune the drawings, sun study and effects through their properties

• /oda-before-publish: check every page at Desktop, Tablet and Phone

Try: /oda-design-system Add a careers page with three open roles and an application form."

Suits architecture studios, interior designers, landscape architects, and builders or craftspeople who draw what they make.