Style Guide & Section Colours

This is the master style guide for SellMyHomeNZ.
  • Each section has a unique accent colour, icon, and theme.
  • Accent colours are set using CSS variables (see :root above).
  • To theme a new page, add <body style="--section-accent: var(--[section]-accent)">.
  • Sidebar, headers, dashboard cards, and links use var(--section-accent) for accenting.
  • To add a new section, pick a fresh accent colour and add it as --[section]-accent in :root.
Section Accent Colours & Icons
--decide-accent
Decide 🌟
Mustard gold
Sidebar: Decide
--prepare-accent
Prepare 🧰
Orange
Sidebar: Prepare
--valuation-accent
Valuation 💰
Red
Sidebar: Valuation
--realtor-accent
Realtor 🧑‍💼
Masculine purple
Sidebar: Realtor
--market-accent
Market & List 📢
Dark blue
Sidebar: Market & List
--openhome-accent
Open Home 🏡
Forest/olive green
Sidebar: Open Home
--negotiate-accent
Negotiate & Close 🤝
Traffic light green
Sidebar: Negotiate & Close
--move-accent
Move 🚚
Peach-gold
Sidebar: Move
How to Theme a Section Page
  1. Set the accent colour on <body> using: <body style="--section-accent: var(--[section]-accent)">
    For example, for the Prepare section: <body style="--section-accent: var(--prepare-accent)">
  2. Sidebar, headers, dashboard cards, and links will use var(--section-accent) for background, borders, and highlights.
  3. To add a new section, pick a new accent colour (avoid clashes with existing) and add it as --[section]-accent: #xxxxxx; in :root.
  4. To highlight a nav section or link, apply .current to the section and .active to the current link.
  5. Cards, fliers, and print templates can use the section’s accent for trim, borders, or headings.
Example dashboard card (Negotiate & Close section, traffic light green)
Example dashboard card (Market & List, dark blue)
Example dashboard card (Move, peach-gold)
Typography & Layout
  • Font: Inter (system-ui fallback)
  • Headers: Extra bold, section-accent colour for section header and dashboard cards
  • Max content width: 900–1000px for desktop readability
  • Sidebar: 255px fixed; collapses on mobile: vertical scroller
  • Breadcrumbs: Always show at the top
  • Responsive: Dashboard cards stack on mobile
Footer
Footer content: Section orientation ("Coming up in this section"), cross-links to related sections, and copyright line.
Use section accent colour for links and headings.
Letter to Future AI (and Editors)
  • All accent colours are defined in :root and referenced via --section-accent on <body>.
  • To restyle a page for a section: set --section-accent accordingly, use the sidebar, and update section/subnav highlights.
  • Icons are for clarity, not decoration—keep them readable and subtle.
  • For print: Use section accent for trim, but always check greyscale legibility.
  • To add a new section: pick a distinct colour, assign a --[section]-accent, update the sidebar, and copy a section template.
  • Keep dashboard cards and footer structure for instant user orientation.
  • If in doubt, check /style-guide.html for the latest standard!