Website Style Guide

Do Not Drift

Use this design system on all core pages unless a deliberate rebrand is approved and rolled out globally.

• Serif display/headlines: Playfair Display
• Utility labels/nav/meta: DM Mono
• Body copy: Lato
• Tone: premium, practical, direct

Standard Order

1. Services
2. Projects
3. Museum School
4. About
5. Search icon
6. Start a Conversation (CTA)

• Do not add a separate Contact nav item.
• Use fixed 60px dark nav with gold CTA.
• Use assets/nav-mobile.css and assets/nav-mobile.js.
• Keep search IDs consistent: searchToggle, searchOverlay, searchClose, searchResults.

Link Conventions

• Use consistent root/site-relative links within each page.
• For nested pages (projects/*, museum-school/*, documents/*), adjust path depth correctly.
• If maintaining mirrored files in multiple locations, update all copies in one change set.
• Canonical URLs should match final GitHub Pages location.

Required Composition

1. Fixed global nav
2. Hero with dark field and serif headline
3. Readable body sections/cards
4. CTA block with gold primary action
5. Standard footer
6. Search overlay + scripts

How Social Links Are Managed

• Official platforms (if active): LinkedIn, Instagram, X.
• Default placement: footer on all primary pages.
• Optional additional placement: contact page only.
• Order: LinkedIn, Instagram, X.
• Text labels only (not icon-only).
• Open external links in a new tab with target="_blank" and rel="noopener noreferrer".
• No placeholders: if a platform is not active, omit it.
• Use identical URLs and order across every page where social links appear.

Operational Standards

• Desktop side padding baseline: 56px; mobile: 24px.
• Keep terms exact: Museum School, Start a Conversation, Museum Planning LLC.
• Avoid one-off visual systems on individual pages.
• Pre-publish checklist: nav, mobile nav, search, tokens, links, footer, social standard, no accidental theme drift.
• If intentionally changing the standard, document rationale and update the style guide.