Style & setup guide
How this template is put together, and what to change before you launch. This page is hidden from search engines and from the main menu; it is linked only from the footer. Delete it or unpublish it when you no longer need it.
Type scale
One typeface, Host Grotesk (400, 500, 700). Use these text styles rather than setting sizes by hand; each one already changes size for Tablet and Phone.
Display / Hero — 96 / 72 / 44 px, 700 (Desktop / Tablet / Phone)
Okoro Vale
Display / Index — 96 / 120 / 64 px, 700 (Desktop / Tablet / Phone)
Okoro Vale
Display / Secondary — 72 / 56 / 40 px, 400 (Desktop / Tablet / Phone)
Okoro Vale
Heading / Page Title — 72 / 56 / 40 px, 700, h1 (Desktop / Tablet / Phone)
Okoro Vale
Heading / Section — 32 / 28 / 24 px, 700, h2 (Desktop / Tablet / Phone)
Okoro Vale Architects
Heading / Card — 22 / 20 / 18 px, 700 (Desktop / Tablet / Phone)
Okoro Vale Architects
Body / Lead — 24 / 22 / 19 px, 400 (Desktop / Tablet / Phone)
Okoro Vale Architects
Body / Regular — 16 / 16 / 15 px, 400 (Desktop / Tablet / Phone)
Okoro Vale Architects
Body / Bold — 16 / 16 / 15 px, 700 (Desktop / Tablet / Phone)
Okoro Vale Architects
Caption / Regular — 13 px, 400 (Desktop / Tablet / Phone)
Okoro Vale Architects
Caption / Bold — 13 px, 700 (Desktop / Tablet / Phone)
Okoro Vale Architects
Label / Kicker — 12 px, 500, uppercase (Desktop / Tablet / Phone)
Okoro Vale Architects
Colour
Contrast figures are against the page background (#F4F2EC, paper) unless noted. WCAG AA needs 4.5:1 for small text, 3:1 for large text, graphics and form field borders. Rules: red = start a conversation or live status; ultramarine = confirm / send; ink #111111 for text, paper for text on ink (16.9:1).
Surface / Background #F4F2EC
Page background.
Surface / Alternate #EAE7DF
Alternate bands and panels. Text / Primary and Text / Secondary stay AA on it.
Surface / Stone #E6E2D8 + hatch
Resting fill of the Inquiry CTA and Send button, with a 45° hatch of 1px ink lines at low opacity (architectural section hatching; the Texture toggle turns it off). Ink text on stone 14.6:1; red text #C8000D 4.69:1; ultramarine 7.54:1. Hover/focus fills with ink and paper text (16.9:1).
Surface / Field #FFFFFF
Form field fill.
Surface / Missing Image #E2DFD7
Shown where a CMS image is empty.
Text / Primary #111111
Main text. 16.5:1.
Text / Secondary #5A5955
Captions, labels and meta. 6.26:1, AA for small text.
Border / Hairline #D6D3CB
Decorative rules only. Never use it for text or for a border someone needs to see.
Border / Field #8A8885
Form field borders. 3.16:1, meets the 3:1 rule for controls. Not for text.
Accent / Signal Red #E3000F
Use sparingly, as a graphic: the short bar on the Inquiry CTA, the live “On site” dot. Red means start a conversation or live status. 4.39:1 on paper and 3.84:1 on ink, so graphics and large text only, never small text. Never for submit buttons.
Accent / Ultramarine #1E3A9E
Confirm / send only: the contact form Send button’s top bar and arrow. Never use red on a submit button, it reads as an error. 8.71:1 on paper, 7.54:1 on stone (6.53:1 over the hatch), so AA. Only 1.94:1 on ink, so on the ink hover/pressed state the arrow turns paper (16.9:1).
Accent / Signal Red Text #C8000D
Small red text and arrows on light backgrounds, e.g. the Inquiry CTA arrow. 5.42:1 on paper, 4.69:1 on stone, AA.
Components
Project list row
Indexed row on /projects (List view): number, name, place · type · year, status. The whole row is one link.
Project card
Card in the Grid view and on Home: image, name, year, place · type. The whole card is one link.
Project views
Holds the List / Grid toggle and both collection lists. The type filter sits above it.
Project type filter
Code component. Buttons for All, House, Housing, Reuse, Civic and cultural. The choice is kept in the address, e.g. /projects?type=housing.
Enquiry submit button
Send button of the contact form, with Success and Error variants.
Cookie banner, Mobile menu, Drawing viewer, Layer chip, Layer overlay
Code components, described under Code components below.
CMS collections
Projects
Name, Slug, Type, Status, Place, Year, Area, Client, Team, Collaborators, Key decisions, Summary, Brief, Site, Approach, Outcome, Hero image, Drawing 1–2, Photo 1–5, Image Credit, Featured, Hover style, Map layers, Timeline events, Materials.
Project page fact sheet
Type, Status, Place, Year, Area, Client, Team, Collaborators and Image credit, then a Key decisions list (rich text, use a bulleted list). “Next project” follows CMS order and loops from the last project back to the first.
Journal
Title, Slug, Date, Author, Cover Image, Summary, Body.
Materials
Name, Slug, Photo, Source / origin, Why chosen, How it ages, Sustainability note, Deck, Project.
Map Layers
Name, Slug, Description, Overlay image, Color, Order. The Name links each legend chip to its overlay.
Timeline Events
Title, Slug, Date, Phase, Description, Image.
Contact form
Where it sends
Select the “Enquiry form” layer on /contact and set your address under Send To / Email.
Verify
Framer emails the new address a confirmation link. Confirm it, or enquiries will not arrive. Then publish and send a test enquiry.
Cookie banner and privacy
Banner
The “Cookie banner” layer in the Practice layout. It records the visitor’s choice (localStorage parti-cookie-consent, html data-cookie-consent, a parti-cookie-consent event) but does not block scripts. Load analytics only after “accepted”.
Privacy page
/privacy is written for the fictional studio. Review it with your own adviser and change it to match your business and region before launch.
Replacing demo content
Studio and people
Okoro Vale Architects, its people, projects, clients and journal posts are fictional. Replace them in the CMS and on /studio.
Images
All photos, drawings and portraits are AI-generated for the demo. Use your own images and make sure you hold the rights.
Contact details
studio@okorovale.com, careers@okorovale.com, +1 (213) 555-0142, the Arts District address and office hours appear in the footer (Practice layout) and on /contact.
This page
Remove the “Guide” footer link and this page before launch, or keep it as an internal reference.
Code components
ProjectFilter.tsx
Project type filter (component) plus the withProjectType override on list rows and cards, and the withWrapToFirst override on the project page’s looping Next project link.
MobileMenu.tsx
Phone menu. Esc closes, focus stays inside, page behind is inert.
DrawingViewer.tsx
Full-screen drawing viewer with zoom, pan, pinch, previous/next and keyboard control.
LayerChip.tsx, LayerOverlay.tsx, LayerStore.ts
Map layer legend chips (real buttons with aria-pressed), the overlays they switch, and their shared state.
CookieBanner.tsx
Consent banner with equal Accept and Reject.
TouchRow.tsx
noTapHighlight override: removes the grey tap flash on touch.