Design system
The styles, grid, components, sections, motion and voice this site is made of. Change a style and every page follows; build from these parts and a new page belongs.
This page stays out of search engines. To keep it out of sight as well, delete its link in the footer.
Working with the agent
Type a slash and a skill’s name, or simply ask: the agent picks the skill that fits.
House rules
Applied to every edit without being asked: styles, components, breakpoints, voice.
Always on
/design-system
New pages and sections, built from the parts on this page.
Try: Add a press page that lists our awards.
/rebrand
Your studio’s name, colours, fonts, contact details and facts.
Try: Rebrand the site as Atelier Moss, a studio in Porto.
/write-copy
Words fitted to each line, in the studio’s voice.
Try: Tighten the statement on the Studio page.
/add-content
Projects, materials, journal entries, people and process steps.
Try: Add a project from these notes and photos.
/before-publish
A report of what is left before the site goes live.
Try: Is the site ready to publish?
Colour
(01)
Two colours carry the site, Paper and Ink, and they always travel as a pair. Two quieter styles finish it: a rule for lines, and a scrim for photographs.
Paper
#FFFFFF
The page, and type on Ink or on a photograph.
Ink
#121212
Type on Paper, and the dark sections.
Rule
#CCCCCC
1px lines in ledgers and tables.
Scrim
Black at 40%
Over hero photographs, under Paper type.
Ink on Paper
Every page, and the type on it.
Paper on Ink
A dark section, used as a pause.
Type
(02)
Two families. Hedvig Letters Serif is the voice; Geist carries information. Nine styles cover every text on the site, and none is used outside its role.
One per page.
Hero
Hedvig Letters Serif · 128 / 106 / 56 · leading 0.9 · tracking −0.06em
The page’s one h1, in the hero only.
Section heading
Title
Hedvig Letters Serif · 72 / 56 / 40 · leading 1 · tracking −0.06em
Section headings, tagged h2.
A large serif line
Title 2
Hedvig Letters Serif · 64 / 48 / 36 · leading 1 · tracking −0.02em
The large serif lines on the home page.
The serif sentence that opens a section.
Statement
Hedvig Letters Serif · 32 / 28 / 24 · leading 120% · tracking −0.04em
The statement that opens a section.
(08) A count beside a title
Statement 2
Hedvig Letters Serif · 28 / 24 / 20 · leading 1.1 · tracking −0.02em
Counts beside titles, and short serif sub-lines.
A project, a post, a person
Card Title
Hedvig Letters Serif · 20 · leading 1.1 · tracking −0.02em
Names of projects, posts, services and people, tagged h3.
A label in column one
Label Serif
Hedvig Letters Serif · 16 / 14 · leading 1.1 · tracking −0.02em
Small serif labels, step numbers, names under portraits.
Information in Geist: paragraphs, lists and forms.
Body
Geist · 16 / 14 · leading 120% · tracking −0.02em
Paragraphs, lists and form text.
Dates, places, captions and credits
Meta
Geist · 12 / 12 / 14 · leading 100%
Dates, places, captions, credits and small print.
Grid and Space
(03)
Twelve columns, 24 apart, inside 24 of margin, fluid up to 1920 wide. Sections are asymmetric: heads sit in the first column, statements start at the seventh.
Width
Fluid, up to 1920, centred.
Margins
24 at every breakpoint.
Columns
Twelve, with 24 between. On Phone, rows become single stacks in desktop order.
Sections
About 296 above each section on Desktop and Tablet, 240 on Phone. Copy the section you start from; never round.
Breakpoints
Desktop from 1200, Tablet from 810, Phone below. Type keeps growing past 1200 through Custom Code.
24 · Margins, and the gap between columns
80 · Between the parts of a section
160 · Under a text hero, and between large blocks
320 · The deepest pause, before a closing section
Imagery
(04)
Photographs are the work. They sit full-bleed or inset, never boxed, and every editorial photograph carries a caption.
Casa Margeride, Lisbon
Villa Sereno, Como
Full-bleed
Heroes and breaks run edge to edge, under the Scrim when Paper type sits on them.
Inset
Inside the grid, in asymmetric pairs; the second image starts lower, as on Home and Studio.
Parallax
Large photographs sit in a ParallaxImage; it is their only motion. Corners stay square.
Captions
One line in Meta under each editorial photograph: the place, the material or the moment.
Source
The studio’s own work first, neutral and architectural. Alt text says what the room shows.
Components
(05)
Seven shared components and six pieces of code. Place an instance and set its variant for each breakpoint; never rebuild one by hand.
Casa Margeride
Residential,
Lisbon
, 2025
Work Card · Landscape. Bound to Projects on Home and Work; the item’s Format picks the variant.
Villa Sereno
Residential,
Como
Work Card · Portrait.
Process
Why we begin on site
Journal Card. Bound to Journal on Home and Journal, newest first.
Interior Architecture
Plans, elevations, and the details that hold them, coordinated with your architect or with ours.
Light Planning
Daylight first, then the lamps that carry a room after dark.
Service Row. One line per service; hover reveals its note.
Client Reviews. 01 to 03 on Desktop and Tablet, the Narrow twins on Phone. Quotes are typed in all six variants.
Default
Sending
Sent
Error
Submit Button. Every form’s submit; the form switches it to Sending, Sent or Error by itself.
Nav
In the Site layout’s pages, one per page. Variants name the link colour: Paper over photographs, Ink on paper, Phone Paper and Phone Ink on phones; two Open variants hold the phone menu.
ParallaxImage
Holds every large photograph: image, alt text, focus point, intensity. Corners stay at 0.
MouseTrail
A trail of project images behind one section per page, as on Home’s Approach and the 404.
CursorTrail
A fine ink line that follows the cursor, set once in the Site layout. Never add a second.
Underlines
withDrawUnderline on nav links, withHoverUnderline on text and footer links, withRedrawUnderline on the Submit label.
withStickyNav
On each page’s Nav row, so the nav stays on screen as the page scrolls.
withScrollHighlight
On a services list: each row darkens as it reaches the middle of the screen.
Patterns
(06)
Every section on the site, copied live and grouped by page. Duplicate one with its breakpoints, then change the words and images.
Sections bound to a CMS item live only on their template page; they are listed at the end with what each one holds.
Home Hero
From Home. The home hero: a full-bleed video under the Scrim, the four-row Hero lockup rising from 1.6s. One per site; inner pages use the Work or Studio hero.
Interior
Architecture
& Design
Lisbon · 38.7° N, 9.1° W
Intro
From Home. One Statement from column seven: the opening line after a hero.
We design calm interiors, made to be lived in, built to last, and better with every year, in every light.
Studio Intro
From Home. A statement, a serif label in column one, a short lead and the studio’s figures.
From site
to delivery
Pietra is a Lisbon studio working across residential, hospitality, and cultural projects. We begin on site, with the light, the proportions, and the way a room is used, then develop a material palette and a spatial narrative, documented and detailed through to delivery.
15
Years of Practice
60+
Completed Projects
12
People in the Studio
2
Studios, Lisbon & Milan
Work Weave
From Home
Staggered Work Cards; each slot is a one-item Projects list at a fixed offset, so CMS order decides the layout.
Selected Work
(8)
Homes, hotels, and cultural spaces, selected from the studio’s recent commissions.
Approach Steps
From Home
A title, a statement from column seven, then the four Process steps. Holds the page’s one Mouse Trail.
Approach
From the first conversation to the final styling, and the visit after.
01
Consultation
We begin with you, the site, and how you want to live in the space. You leave with a clear scope, a budget frame, and a realistic timeline.
02
Concept & Material
A spatial concept and a working palette, tested against light and daily use. Presented as plans, references, and physical samples you can hold.
03
Sourcing & Making
Bespoke joinery, furniture, art and objects, sourced and made to measure. We work with a close circle of makers and workshops, most of them long-term.
04
Styling & Delivery
On-site coordination through to the final styled reveal, and beyond. We return after move-in, because a home only settles once it is lived in.
Break
From Home. A full-bleed video between sections, with no text.
Studio Teaser
From Home. A statement and the list of services, highlighted as they scroll past.
Studio
Pietra is built on restraint: few elements, exact proportions, and light treated as a working tool. We edit until a room holds together quietly, then we stop.
Interior Architecture
Spatial Planning
Site Studies
Concept Design
Light Planning
Joinery Design
Material Schedules
Colour Direction
Custom Furniture
FF&E & Styling
Art & Objects
Lighting
Kitchens
Bathrooms
Procurement
Turnkey Delivery
Quote
From Home
The Client Reviews band, between two sections.
Journal
From Home
The latest three Journal Cards, newest first.
Journal
(6)
Photo Hero
From Studio. The photo hero for inner pages: photograph, Scrim and Bottom Gradient, the Hero heading bottom left. Use the Paper Nav above it.
Studio
Manifesto
From Studio. A long Statement set as the page’s argument.
We work on a small number of rooms at a time, with the same plasterers, masons, and cabinetmakers we started with. Nothing enters a room unless it earns the space it takes, and nothing is specified that we cannot repair.
Stats
From Studio. Four figures with labels. Say each number once, and only real ones.
15
Years of Practice
60+
Completed Projects
12
People in the Studio
2
Studios, Lisbon & Milan
Atelier
From Studio. Captioned photographs in staggered columns; every photograph has a caption in Meta.
Drawings for a walnut sideboard, Rua das Flores
Massing models for Serra Archive, before the second review
Oak boards sorted by grain for Quinta do Vale
Palette review: travertine, oak, lime plaster, one brass sample
The first room we rented, kept as we found it
Team
From Studio. The people: a title, then a horizontal scroller bound to Team, staggered by each item’s Offset. Phone has its own scroller, using Offset Phone.
To add a team section anywhere, duplicate this whole section; add people through the Team collection, never by hand.
The
people
Ruled Ledger
From Studio
Thin ruled rows for awards, press or any short list of facts. Never cards.
Recognition
Selected awards, press features, and studio visits, most recent first.
Awards
Iberian Interior Award, Interior of the Year
(2026)
Marés Review, Ten rooms of the year
(2026)
Atrium Quarterly, Cover feature
(2025)
Habitar Magazine, Portfolio feature
(2025)
Plaster & Light, Studio visit
(2025)
Casa Nova Awards, Hospitality, shortlist
(2024)
Cascais Design Prize
(2023)
Services Table
From Studio
Two columns of Service Rows under a title and statement.
Services
Sixteen services, taken separately or held together under one contract.
Interior Architecture
Plans, elevations, and the details that hold them, coordinated with your architect or with ours.
Spatial Planning
How the rooms are used, before how they look. Circulation, storage, light, and the walls worth keeping.
Site Studies
A survey of what is already there: structure, services, daylight, and the constraints worth designing with rather than around.
Concept Design
The spatial idea in plan and section, tested against how the rooms will actually be used before any detail is drawn.
Light Planning
Daylight first, then the fittings. We map how the sun crosses the rooms and place the artificial light around what it leaves.
Joinery Design
Built-in cabinetry drawn to the millimetre and detailed for the workshop that will make it, not for a catalogue.
Material Schedules
Every surface, finish and fixing recorded in one document, so the site orders the right thing the first time.
Colour Direction
A narrow range of tones, chosen against the plaster and the timber, and tested on the wall rather than on paper.
Custom Furniture
Pieces made to measure by the workshops we work with, when nothing on the market suits the room or the use.
FF&E & Styling
Furniture, fittings, and equipment, specified and placed. Styled on the day, and again once you have moved in.
Art & Objects
Sourced from a short list of galleries and makers, or commissioned for the room it will live in.
Lighting
Fittings selected with the electrician: circuits, switching, and dimming resolved before first fix.
Kitchens
Planned around how you cook and store, then detailed as joinery, with appliances chosen to suit the work.
Bathrooms
Stone, brassware and drainage set out together, so the falls, joints and fixings are right before the tiling starts.
Procurement
Ordering, tracking and delivery held by the studio, with lead times agreed before the drawings leave the desk.
Turnkey Delivery
One contract, one contact, and a site we visit every week until the last handle is on.
Work Index
From Work. A text hero, then the full weave: eight fixed slots by CMS order, and every later project in two columns.
Built work, photographed a season after handover.
Journal Head
From Journal. A text hero for a listing page.
Notes on material, on light, and on the things a drawing cannot settle.
Journal Grid
From Journal. Every Journal Card, newest first.
Contact Head
From Contact. The invitation: a text hero with its short note.
A conversation about the site, the scope, and when you hope to begin.
Most of our work begins with an email of three or four sentences and one photograph taken from the doorway. That is enough to start with, and we would far rather hear from you early than hear from you correctly.
Contact Ledger
From Contact. The enquiry form beside the ruled ledger of contact details. Set Send To on any copy.
New projects
studio@pietra.com
Press
press@pietra.com
Telephone
+351 21 346 1200
Hours
Monday to Friday, 9 to 18
Availability
Currently booking from October 2026
Still
From Contact. A single full-bleed photograph.
Address
From Contact. Offices and hours as ruled rows.
404
From 404. The not-found page: one Hero line and the way back home.
404
This page has moved, or never was.
Legal
From Privacy. A text hero, a version line and numbered clauses; Terms and Cookies use the same section.
What we keep, and why we keep it.
Version 1.0 · Effective 14 August 2026
01 · Who we are
Pietra is an interior architecture studio with offices in Lisbon and Milan. This policy covers the site you are reading and any enquiry you send us through it. It does not cover a client’s own site, even where we designed it.
02 · What we collect
Two things. What you type into the contact form, which is your name, your email address and whatever you choose to tell us about the project. And the small amount of technical information any browser sends to any site it visits, such as which pages you opened and roughly which country you are in.
03 · Why we collect it
To answer you. An enquiry with no way to reply is not an enquiry. The technical information tells us which work people actually stop and look at, which is how we decide what to photograph next. We do not build a profile of you, and we do not sell anything to anyone.
04 · Who else touches it
Our site host, our email provider and our analytics provider. Each of them sees only what it needs to do its part, each is bound by its own agreement with us, and none of them may use your details for their own purposes.
05 · Where it lives
On servers inside the European Union wherever we get to choose, and under standard contractual clauses where a provider operates elsewhere.
06 · How long we keep it
Enquiries for two years after our last exchange, because projects come back. Technical information for fourteen months. After that both are deleted rather than quietly archived.
07 · What you can ask for
A copy of everything we hold on you, a correction to it, or its deletion. Ask and we will do it within thirty days, at no cost. You can also complain to your national data protection authority if you believe we have handled this badly.
08 · Cookies
This site sets only what it needs in order to work, plus analytics you are free to decline. The detail is in the Cookie Policy.
09 · Changes
When this policy changes we update the version and the date at the top of this page. We do not send notifications, so check here if it matters to you.
10 · Reaching us
Write to studio@pietra.com with Privacy in the subject line, or to Rua das Flores 24, 1200-195 Lisbon, Portugal.
Project Page (CMS)
Seven sections bound to the Projects item, so they live only on the Project template. Edit them there; never copy them to another page. To show projects elsewhere, use Work Card in a Projects list, as in Work Weave.
Hero
The project cover full-bleed, its title bottom left, under the Scrim.
Spec Ledger
Location, Year, Scope, Surface, Team, Photography, Completion, in ruled rows.
Statement & Prose
The Statement, then Prose 1 and Prose 2.
Sequence
Four images with captions; shown when Show sequence is on.
Materials
The Materials list filtered to this project; shown when Show materials is on.
Client Quote
Quote and attribution; empty fields hide it.
Prev / Next
The neighbouring projects by CMS order.
Journal Post (CMS)
Four sections bound to the Journal item; edit them on the Journal Post template. To list entries elsewhere, use Journal Card in a Journal list.
Hero
The cover full-bleed, the title bottom left.
Article Text
Heading, Prose and Note slots 1 to 3, then Note 4.
Pull Line
One serif sentence from the Pull line field.
Next
The next entry by date.
Motion
(07)
Every page change is an Ink wipe, and the page waits for it: nothing enters until the Ink has lifted. After that, motion is small and quiet.
Page transition
Ink rises over the page in 0.7s, and the next page follows 0.6s later: 1.3s in all. Set in two places, Effects › Page Effects and the Custom Code block, and their numbers must agree.
Its wordmark, ink colour and duration are variables at the top of the Custom Code block.
Opening sections
Fade in on load at 1.2s, just as the Ink lifts.
Hero headlines
Rise 10 over 1s at 1.6s, line by line, 0.1 apart.
Below the fold
Rise 10 over 1s as they come into view, from 0.2s, each block 0.08 after the last. Headings rise line by line.
Copy the effect from a live section rather than typing values.
Photographs
No entrance. A ParallaxImage drifts them slowly as the page scrolls.
Hovers
Service Rows reveal their note; links draw an underline; the cursor leaves a fine trail.
Hover to try
A Service Row
Its note slides in on hover, and leaves when the pointer does.
Paper and Ink
(08)
There is no dark mode. Contrast comes from Ink, used sparingly, and from photographs under the Scrim.
An Ink section reads as a pause.
Paper type on Ink, as in the footer and the phone menu.
Where Ink is
The footer and the phone menu. Anything new in Ink is punctuation: never two Ink sections in a row, and never one straight above the footer.
Nav
Its variants name the link colour: Paper over photographs, Ink on paper; Phone Paper and Phone Ink on phones. Match each page’s hero.
Photo heroes
Paper type sits on a photograph only with the Scrim between them.
A darker site
Give Paper and Ink new values together, and keep 4.5 to 1 between them both ways.
Voice
(09)
Calm, exact and concrete. The serif speaks; Geist informs. Say one thing per section, and say it once.
Statements
One sentence, ending with a full stop.
We begin on site, with the light and the proportions.
Headings
One or two nouns, without a full stop.
Approach · Recognition · Services
Captions
One line: the place, the material or the moment.
Oak boards sorted by grain
Spelling
British English.
Colour, not color.
Punctuation
No em dashes. A comma or a full stop; ranges read as words.
Monday to Friday, 9 to 18
Numbers
A figure appears once on a page and agrees with every other page. Counts beside titles match their items.
Facts
Never invent a project, client, award, quote or figure. Keep the sample and flag it until the real one arrives.