G-001 — Style guide
General · Drawing conventions
Style guide
The conventions behind every sheet in this set: colours, type, spacing and the components that hold it together. Edit the shared styles and everything follows.
Studio
Varda Hale Architects
Sheet
G-001
Project
Drawing conventions
Scale
NTS
Date
10.2026
Drawn
IV / TH
Status
For reference
Grid — 12 columns — 1120 — gutter 20
G-010 — Colour
Five inks and two rules.
Paper and Ink carry almost everything. Redline is for the one thing that matters on a sheet: a code, a dimension, a warning.
Paper
#ECEAE3
Page background
Tracing
#DEDBD1
Alternate sections, panels
Ink
#151515
Text, rules, dark sections
Graphite
#605E57
Secondary text, labels
Redline
#AE2E14
Codes, dimensions, accents
Rule
Ink 20%
Hairlines on Paper
Rule on ink
Paper 22%
Hairlines on Ink
G-020 — Type
Host Grotesk for the words, Plex Mono for the data.
Every sample below is a live text style. Change the style and every page updates; sizes step down at tablet and phone.
Page title
Host Grotesk 600 · 168 / 128 / 72
Studio
Display
Host Grotesk 600 · 88
Quiet houses, drawn slowly.
Heading 2
Host Grotesk 500 · 56
Selected work, 2019–2026
Heading 3
Host Grotesk 500 · 24
House on the Minho
Lead
Host Grotesk 400 · 22
We draw by hand first, because a pencil decides almost nothing.
Body
Host Grotesk 400 · 16
Varda Hale is a small practice in Porto working on houses, retrofits and the occasional public room.
Article body
Host Grotesk 400 · 19 / 18 / 17
The first drawing on every project is made by hand, at 1:100, in soft pencil.
Pull quote
Host Grotesk 500 · 34 · Redline
A model is the only drawing a client never has to learn to read.
Label mono
IBM Plex Mono 400 · 11 · uppercase
A-102 — Residential — Ponte de Lima
Sheet number
IBM Plex Mono 400 · 13
S-100
Caption mono
IBM Plex Mono 400 · 11 · Graphite
Fig. 01 — Card model at 1:200
G-030 — Spacing
Nine steps, on a 4px base.
Section padding steps 144 / 96 / 64 across desktop, tablet and phone. Side margins step 40 / 32 / 20. The grid is 12 columns, 1120 wide, with a 20 gutter.
SP-01 · 4
SP-02 · 8
SP-03 · 12
SP-04 · 20
SP-05 · 32
SP-06 · 40
SP-07 · 64
SP-08 · 96
SP-09 · 144
G-040 — Components
Six parts, used everywhere.
All components are shared. Edit the master and every instance follows; change content through the component controls, not by detaching.
C-01
Button
Default for primary actions on Paper. Inverse on Ink sections. Submit is the form state set: default, Sending, Sent. One primary button per section.
Default
Inverse
Submit
C-02
Dimension
A dimension line with a centred label. Redline on Paper, Ink for quieter sheets, Paper on Ink. Use one per cover or section, never as decoration in lists.
Redline
12 000
Ink
12 000
Paper
12 000
C-03
Title block
The drawing-sheet stamp: project, sheet, scale, date, drawn by, status. Paper on light sections, Ink on dark ones. Keep it at 360 wide on desktop.
Paper
Studio
Varda Hale Architects
Sheet
A-102
Project
House on the Minho
Scale
1:100
Date
10.2026
Drawn
IV / TH
Status
Built
Ink
Studio
Varda Hale Architects
Sheet
A-102
Project
House on the Minho
Scale
1:100
Date
10.2026
Drawn
IV / TH
Status
Built
C-04
Project sheet
A project card drawn as a sheet. Large for featured work, Small for grids, Mobile below 810. Hover lifts a compact title block over the photograph. Feed it from the Projects CMS.
Large
Small
C-05
Register row
One line of the drawing register: sheet, project, location, year, status. Stack rows inside a list with a top rule; the Mobile variant folds to two lines.
C-06
Submit Button
The form button with built-in states: default, Sending and Sent. Only place it inside a Form; the form switches its state on submit.
G-005 — Template setup
Make the set your own.
Pages — New pages automatically inherit the Site / Navbar + Footer template from Home. Add your page sections in the Page content area; the navbar and footer are supplied by the template. Edit that template to change the shared layout across the site.
1. Projects — Edit the Projects collection to update the home register, selected sheets, project index and detail pages. Keep sheet numbers unique: the home sorts by this field. The first sheet is featured; the next two form the selected pair.
2. Journal — Edit the Journal collection to update notes, covers, captions and authors. Keep each slug unique. Current lists sort by sheet number, with the latest numbered note first.
3. Contact form — The form intentionally has no submission destination in this template. In Framer, select the contact form and add your own destination before publishing. Check a test submission and its success and error states.
4. Brand and content — Replace the studio name, people, email addresses, telephone number, map, statistics and project copy with your own. Update the Navigation and Footer components in the shared page template, and the site and page metadata.
5. Privacy and assets — The privacy page is sample copy for customization. Adapt it to the services you actually use. Confirm redistribution rights for every image and project before distributing or selling your version.
6. Final checks — Preview desktop, tablet and phone; check filters, links and the 404 page. Run Framer’s publishing and performance checks. Add a real support contact, setup requirements and refund terms to your marketplace listing.
7. SEO and sharing — Site and page titles, descriptions, social previews, light/dark favicons and the Apple touch icon are configured. Project and journal metadata uses the CMS title, summary and cover. Edit the source cards in Design pages → Brand assets / SEO & sharing, export them at 1200 × 630 and replace the images in Settings after changing your brand. Replace icons in Site Settings. The style guide and 404 are excluded from indexing. Before launch, connect your final domain, check the published metadata, sitemap and robots.txt on that domain, and verify your own Search Console account. Add analytics only with your own account and consent setup.
This template is free. Architecture, material, studio and neighbourhood images were generated with AI for this fictional portfolio; the seven team portraits are also AI-generated examples. Project names, people, awards and contact details are demonstration content. Replace them with your own real work and information. The neighbourhood image is illustrative and must not be used for directions. The contact form has no destination until you configure one.