Visual Identity Reference
Whole Pet Grooming Academy - extracted from wholepetnh.com
Colors were extracted directly from the compiled site.css HSL variables and confirmed against custom.css. Squarespace stores color as HSL component tuples in :root; hex values below are calculated from those components. Note: Squarespace's internal variable naming is inverted for dark-template builds - their --white-hsl is the dark background and --black-hsl is the light text color. All rebuild work uses the confirmed tokens listed here as the foundation.
All buttons: Raleway, weight 500, all-caps, letter-spacing 0.05em. Border-radius: 3px (tight, intentional). Padding: 10px 28px.
Primary
Outline
Accent
On Dark
Primary: #2F446F fill / #FEFEFD text • Outline: #2F446F border / #FFFDF5 bg • Accent: #D4B078 fill / #1C2D4A text • On-dark: border+text #FEFEFD on #2F446F fill
Squarespace stores colors as HSL component variables in :root (e.g., --accent-hsl: 36.52, 51.69%, 65.1%). Hex values below are calculated from those HSL components and cross-checked against visual inspection of the live site.
Use these fixed opacity steps rather than deriving custom tints. Consistent tint usage ensures visual cohesion across all touchpoints. All tints shown on white (#FFFFFF) ground.
Use 8% for card backgrounds and subtle highlights. Use 15-30% for bordered callout fills. Use 55% for hover states or medium overlays. Use 100% for CTAs, headings, and solid fills.
Use 10% for callout box fills and tooltip backgrounds. Use 20-40% for decorative border accents. Use 100% only for solid CTA fills and accent bars - never as body text on cream or white (fails WCAG; see section 04).
WCAG 2.1 requires 4.5:1 contrast for normal body text and 3.0:1 for large text (24px+ or 18.67px+ bold). Contrast ratios calculated per WCAG relative luminance formula.
| Pairing | Ratio | AA | AAA | Approved use |
|---|---|---|---|---|
Aa Near-white #FEFEFD on Navy #2F446F |
9.8:1 | Pass | Pass | Primary body text and headings on all dark navy panels |
Aa Light blue #C8D8E4 on Navy #2F446F |
6.7:1 | Pass | Pass (lg) | Secondary and body copy on dark navy panels |
Aa Gold #D4B078 on Navy #2F446F |
4.9:1 | Pass | Fail | Eyebrow labels and accent text on dark panels; not for small body copy |
Aa Navy #2F446F on Cream #FFFDF5 |
9.8:1 | Pass | Pass | All headings and body text on cream and white light sections |
Aa Muted navy #5A6A8A on Cream #FFFDF5 |
5.3:1 | Pass | Fail | Secondary and caption text on light sections |
Aa Dark navy #1C2D4A on Gold #D4B078 |
7.0:1 | Pass | Pass | Button label text on gold CTA fill |
Aa Gold #D4B078 on Cream #FFFDF5 |
2.0:1 | Fail | Fail | Decorative only. Never use as body text or UI labels on light backgrounds |
The live wholepetnh.com site currently uses gold (#D4B078) as body text color in several sections on cream backgrounds - this fails WCAG AA at 2.0:1. The rebuild must restrict gold to eyebrow labels, icon accents, and button fills only. All body copy on light backgrounds must use navy (#2F446F) or muted navy (#5A6A8A).
Representative examples of how the WPGA palette, type, and components should be applied together in context.
Semantic tokens for any rebuild or new build work. These are the named equivalents of the extracted Squarespace values and serve as the foundation for all new WPGA development.
| Token | Value | Usage |
|---|---|---|
| --wpga-navy | #2F446F | Primary CTAs, links, nav backgrounds, dark section fills, headings on light |
| --wpga-navy-dark | #1C2D4A | Deepest text on dark, hover states, button label on gold CTA |
| --wpga-gold | #D4B078 | Accent CTAs, eyebrow labels, decorative accents, icon fills |
| --wpga-cream | #FFFDF5 | Light section backgrounds, card fills, alternating section ground |
| --wpga-near-white | #FEFEFD | Primary text and nav links on all dark navy backgrounds |
| --wpga-light-blue | #C8D8E4 | Body copy and secondary text on navy dark backgrounds |
| --wpga-overlay | #545B67 | Modal overlays, quick-view backgrounds, secondary dark fills |
| --wpga-font-heading | 'Merriweather', Georgia, serif | H1, H2, H3, hero text, section titles, testimonial pull quotes |
| --wpga-font-ui | 'Raleway', sans-serif | Navigation, CTA buttons (all-caps), labels, captions, form fields |
| --wpga-btn-tracking | 0.05em | Letter-spacing on all CTA buttons using Raleway all-caps pattern |
| --wpga-btn-radius | 3px | Button border-radius. Intentionally tight; reflects institutional identity |
| --wpga-section-pad | 80px 0 | Standard vertical padding for all full-width content bands |
Squarespace compiles these values into minified site.css with non-semantic class names. Their own variable names (e.g., --white-hsl, --black-hsl) are inverted in dark-template builds and must not be used as references. Always refer to the semantic tokens above for rebuild and extension work.
WPGA uses its existing registered logo. The NH DOE accreditation requires the registered name and mark to remain consistent across all enrollment-related and public-facing materials.
- 1Consistent sizing. Standardize to 160px wide on desktop, 120px on mobile. The current Squarespace implementation renders the logo at varying sizes by section. Clear-space rule: 1x logo height on all four sides.
- 2DOE accreditation lockup. Introduce a sub-mark pairing the logo with "Licensed Career School - NH Dept. of Education" on all hero sections and the sticky header. This is WPGA's strongest differentiator and is currently invisible on the live site.
- 3Asset CDN. Current logo assets are served from the Squarespace CDN (site ID
673f16b2657ee500443cff90) at Squarespace-managed URLs. PIR will export and re-serve these from the rebuilt site's own CDN at proper responsive breakpoint sizes.
WPGA issues six formal diploma-level credentials and a suite of program and alumni badges. All badge assets are served from the Squarespace CDN and should be exported and re-hosted for the rebuild. Badges are a primary trust signal and must appear prominently on program and enrollment pages.
The Master Therapeutic Pet Aesthetician (MTPA) is co-credentialed with the International Canine Professionals and Educators (ICPE). This is a unique competitive advantage - no competing grooming program in NH carries a dual-body credential. The ICPE mark should appear alongside the WPGA badge wherever the MTPA program is marketed.
WPGA holds institutional credentials no competitor school in New Hampshire can match. These signals must be front-and-center on every public page - they are currently buried or absent on the live site.
All portal and rebuilt site UI uses Phosphor Icons v2 (MIT license, 1,256 icons, 6 weights). Load via CDN: https://unpkg.com/@phosphor-icons/web@2.1.1.
Use Regular weight (ph) for most UI. Use Bold weight (ph-bold) for emphasis and primary nav icons. Size rules: 14–16px inline text, 20px card/label icons, 24px standalone nav icons.
font-size:16px. Color matches surrounding text or uses var(--navy). Gap between icon and label: 6–8px.font-size:20px with color:var(--gold) for section label icons. Never use gold for body text, only accent signals like these.ph-bold class for standalone nav and action icons at 24px. Regular weight at 24px can look thin.#D4B078) for accent icons, near-white (#FEFEFD) for neutral icons. Never use cream on navy - it reads as yellow.Add to <head>: <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>. Icon markup: <i class="ph ph-[name]"></i> (regular) or <i class="ph-bold ph-[name]"></i> (bold). Full icon list at phosphoricons.com.
/about, /programs, /boardroom, /the-summit, /blog, /certification-pathways. Dead nav items cannot be indexed by Google and cannot convert traffic. Confirmed working routes: /, /contact-us, /diplomas, /about-us.