Prototype documentation
Design system & build notes
The clean, logo-led palette used across the site, plus what's still needed from the client and a checklist for the eventual WordPress build.
01
Color palette
Paper
Page background
Paper deep
Alternating bands
Ink
Text, headings
Logo teal
Primary actions, links, phone CTA
Teal soft
Panels, directions CTA
Gold accent
Metallic accents, stars
Gold soft
Highlight cards
Steel blue
Secondary accent
Steel soft
Section wash
Slate teal
Confirmation, checks
Slate soft
Section wash
Border
Hairlines
02
Typography
Display - Lora
Turn gold into cash
Heading 2
What we buy at the counter
Body - Nunito Sans
Body copy runs at 16px with generous line height for easy reading on phones. Muted foreground is used for supporting text, ink for anything the visitor must read.
Eyebrow / label
Sell precious metals
03
Buttons
Logo teal is the primary action color and is used for the phone CTA. Soft teal is used for directions. Every conversion button carries a data-conversion attribute for call tracking and Google Ads.
04
Cards
Card - neutral
Card - gold
Card - teal
Card - steel
05
Spacing & radius
Section padding
64px mobile / 96px desktop
Grid gap
20px cards, 40px columns
Container
Max 1248px, 20px gutters
Radius
16px cards, 24–32px panels, pill buttons
06
Icon style
Lucide outline icons at 1.5px stroke, used sparingly and always paired with a label.
07
Still needed from Rancho Gold
- Final phone number for call tracking
- Exact street address and suite
- Confirmed store hours, including holidays
- Google Business Profile URL
- Owner and staff bios, plus team photos
- Interior and storefront photography
- Confirmation of what is and isn't purchased
- Any credentials, memberships or years in business
- Approved FAQ answers
- Preferred contact-form recipient address
08
SEO & technical checklist for the WordPress build
- One H1 per page, logical H2/H3 hierarchy
- Unique title and meta description per page
- Clean URLs: /sell-gold, /sell-silver, /find-us
- LocalBusiness + PostalAddress schema sitewide
- Service schema on each service page
- FAQPage schema on pages with FAQs
- Descriptive alt text on every image
- Internal links between related service pages
- XML sitemap and robots.txt
- Compressed WebP imagery, lazy loading below the fold
- Google Analytics 4 and Tag Manager containers
- Conversion events: phone_click, directions_click, contact_submit
- Call-tracking numbers wired to tel: links
- Google Business Profile connected by the owner via plugin OAuth
- Mobile-first QA at 375px, 768px and 1440px
- Core Web Vitals check before launch
Google Business Profile note: the owner should complete the connection and authentication themselves through the review plugin. No agency access to the Google account is required or requested.