The parts every page is built from
How to use this page
Every page of Fairhand is built from the parts below: nine colour styles, fourteen text styles, three components, a few motion overrides and the Site layout template, which holds the navigation and the footer. A new page reuses them as they are; never set a font or a colour by hand on a new element.
To build a new page with the agent, type /design-system in the agent chat, then describe the page. The skill tells the agent which parts to use and which rules to keep. If you change a style or a component, update this page too.
Colour styles
Paper and oxblood carry almost every page; Night darkens one band per page. There is no extra accent colour: emphasis comes from size, the arch and the filled button.
Color/Background (Paper)
#EFF0EE. Page background, and text on Night and on Oxblood.
Color/Foreground (Oxblood)
#5E2B24. Headings, body text, buttons, form outlines and the footer background.
Color/Night
#2B1C19. The dark bands, the hero behind its photo, and the hover state of filled buttons.
Color/Tint (Plaster)
#D8C2B6. The block behind the first portrait on Home.
Color/Text Secondary (Caption grey)
#74655E. Captions, placeholders and small print on paper.
Color/Border (Hairline)
Oxblood at 30%. Rules between list entries, contact details, steps and tabs.
Color/Tint on Night
#D8C2B6. Labels and the small headings of the footer, on Night and on Oxblood.
Color/Border on Ink
Paper at 55%. Rules inside the dark bands, and the outline of title blocks on Night.
Color/Line on Oxblood
Paper at 30%. The rules of the footer.
Text styles
Every text on every page uses one of these styles. The large styles change size at the tablet and phone breakpoints on their own; never set a size, weight or colour by hand. Titles are set in Fraunces, text and labels in DM Mono, the wordmark and the masthead in Bricolage Grotesque.
Text/H1 Display: the title of each page and the hero, set as its only h1.
Text/Statement: the large centred sentence of an intro or an invitation. Once per section.
What we do
Text/H2 Section title: the title of a section, set as h2.
We visit
Text/H3 Entry title: names of projects, steps, people or services in a list. Tag them h3 under an h2.
A house drawn for one plot
Text/Lead: the sentence under a section title that says what the section is about.
Paragraphs are set in Body. Keep a column under 640 px so that lines stay easy to read.
Text/Body: paragraphs, contact details and form fields.
The work table under the north window.
Text/Caption: the sentence under a photo, and small print.
01 / For one plot
Text/Folio: section labels, numbers, dates and form labels, in mono capitals.
Sheet 10
Text/Figure number: the sheet number in the title block under a photo.
Start a project
Text/Button: the labels of Button/Text and Button/Submit, and the links of the navigation.
Made slowly
Text/Pill: the tilted label on an arch or a portrait. At most one per section.
Vasse
Text/Wordmark: the studio name in the middle of the navigation.
V
Text/Masthead: the large studio name in the footer. Once per site.
Drawn
Text/Drift: the one line that slides sideways across the top of a dark band.
Links use Link/Nav in the navigation, Link/Inline inside body text, Link/Footer in the footer and Link/Wordmark on the studio name.
Motion
Motion comes from code overrides, never from effects set by hand. withEntrance, withEntranceCaption and withEntranceGrid fade content up by 24 px over 0.8 s as it enters the screen. withHeroZoom settles the hero photo from 108 % to 100 % over 2.2 s. withArchReveal uncovers an arch from the bottom up over 1.4 s. withRailCarousel drives a carousel: name its layers Track, Rail fill, Prev and Next.
Visitors who ask for reduced motion get short fades instead, and nothing stays hidden when scripts do not run. Hover moves stay small: a button fills or darkens and its arrow moves 4 px.
Components
Reuse these components instead of building buttons, photos or menus from frames. Each one is shown with its variants.
Button/Text
The link button: a label in Text/Button and an arrow. From the top: Default (outline, for second actions), Filled (the main action, once per section) and Filled compact (the navigation); on Night, Light filled and Light. Hover fills the outline, or darkens a filled button to Night, and nudges the arrow; Pressed keeps the hover colours.
Button/Submit
Used once, at the end of the contact form: a filled Oxblood button. From the top: Default, Hover, Pressed, Pending, Success, Error and Incomplete. The last four are set by the form. All are shown here as plain copies, so that this page has no button that sends nothing.
Send the message
Send the message
Send the message
Sending…
Sent. Thank you.
Not sent. Please try again.
Send the message
Figure
Every new photo in a grid: the image, its title block (sheet number and place) and a caption. Default on paper, On ink on Night. Write a real alt text for each image. Arches, portraits and carousel photos are built from frames for their motion; copy them from Home rather than building them again.
Sheet 10
Arroios, Lisbon
The drawing room, cleared for a client visit.
Sheet 10
Arroios, Lisbon
The drawing room, cleared for a client visit.
Navigation
Lives in the Site layout template, so every page gets it: never place it on a page. Desktop is the bar at the top of this page: links on the left, the wordmark in the middle, a Filled compact button on the right. Phone and Phone Open, shown here as pictures, are the closed and open menu under 810 px.
Example sections
Two sections that show how the parts combine. The others are ready to copy from their pages: the hero, the intro with an arch, the services carousel, the two portraits, the panorama, the site notebook and the invitation on Home; the alternating service rows and the steps on Services.
Sheet 10
Arroios, Lisbon
The drawing room, cleared for a client visit.
Example 1: Night band
Who draws, who builds
A Night band holds photos, with a short text or a Text/Drift line. Text inside it uses Background (Paper), and photos use the On ink variant of Figure. Never put two dark sections in a row; text pages (Colophon, Start here, articles, 404) have none.
Example 2: entry list
Six rooms, one way of working
Sheet 03
Graça, Lisbon
Late light across the back wall, before the shutters close.
Kitchen in warm limewash
Sheet 04
Príncipe Real, Lisbon
Sheets sorted by weight on the long table.