{ "schema_version": "1.0", "run_id": "2026-05-11-stage-5b-natural-harmony-pdp", "source": { "current_page_url": "https://huxberry.com/products/natural-harmony-select-mattress", "store_homepage_url": "https://huxberry.com", "fetched_at": "2026-05-11T10:30:00Z", "fetch_method": "get", "notes": "Raw HTML captured via curl for both PDP and homepage. Theme CSS fetched from cdn.shopify.com/t/42/assets/: style.css, custom.css, website-fonts.css, theme.css. IveMode is a self-hosted custom serif used for headings. Montserrat and Inter are also self-hosted. REGRESSION CONFIRMED: live ATC button uses #3A4F3C (hover/active dark green) as its resting color — this is documented as a known continuity violation in brief.resolved.yaml buybox_pattern. #585048 is confined to the announcement bar only (confirmed in raw CSS). Canonical resting CTA green is #537156 per brand_color_usage_notes." }, "colors": { "bg": { "value": "#ffffff", "on": "#191919", "notes": "Dominant page background. Body and main content area are white." }, "fg": { "value": "#191919", "on": "#ffffff", "notes": "Dominant body text color. Most frequently observed text color across PDP and homepage inline styles (20 occurrences in PDP raw HTML). Also appears as #1d1d1d (CSS custom property --primary-black / --dark-black) which is near-identical." }, "accent": { "value": "#537156", "on": "#ffffff", "notes": "Canonical resting CTA green per brand_color_usage_notes. Used as --badge-color, --mgmenu-primary-button-bg, banner button background, badge background. REGRESSION: the live PDP ATC button (.product-form--atc-button) currently uses #3A4F3C as resting color — this is a continuity violation flagged by the brief. Downstream roles MUST use #537156 for resting CTAs." }, "muted": { "value": "#4a4a4a", "on": "#ffffff", "notes": "Caption/metadata text. Observed 14x on homepage. Also --light-grey (#8a898d) used for footer item text and compare prices." }, "border": { "value": "#D3D3D3", "on": "#191919", "notes": "Form field borders and card edges. Observed on select dropdowns and product image thumbnail borders (#D9D9D9 variant also used on card images)." }, "surface": { "value": "#efefe5", "on": "#191919", "notes": "Card/panel background distinct from page bg. Used on icon-with-text-grid panels below product gallery images and the text_and_icons section background." }, "extras": [ { "name": "announcement_bar_only", "value": "#585048", "notes": "ANNOUNCEMENT BAR ONLY. Warm gray used exclusively as the announcement bar background. Must not be promoted to hero, CTA, or footer band surfaces. Per brand_color_usage_notes: keep confined to that strip or eliminate it. Any appearance on hero/CTA/footer is a continuity violation." }, { "name": "canonical_brown", "value": "#54412f", "notes": "Canonical warm brown. Used for Signature-Collection CTAs (button-hux style with color:#fff9f5 on text) and footer/CTA band surfaces. Conveys warmth, evening, family — not institutional. R>G>B with saturation. Homepage shows 6 uses as button background with #fff9f5 foreground." }, { "name": "hover_active_green", "value": "#3A4F3C", "notes": "Hover/active companion to canonical accent #537156. Used on :hover and :active states only. About half the luminance of #537156; crosses into 'dark color of indeterminate hue' for ~4-5% of viewers at small sizes. DO NOT use as resting CTA color. REGRESSION: live PDP ATC button currently uses this as resting color — flagged as violation." }, { "name": "hover_green_mid", "value": "#5c765f", "notes": "Mid-luminance hover green used on ATC button hover in the live CSS. Lighter than #3A4F3C. Appears as the actual :hover state in the live inline CSS on the PDP, conflicting with the dark green resting state." }, { "name": "cream_warm", "value": "#fff9f5", "notes": "Warm cream used as foreground-on-brown-surface text and as background for the NHC section richtext on homepage (background-color:#fff9f5 with color:#537156 text). Warm undertone echoes New Zealand wool / natural materials positioning." }, { "name": "review_card_bg", "value": "#f8f8f8", "notes": "Review card background. Light warm-neutral used for testimonial/review item cards." }, { "name": "sale_badge_dark", "value": "#000000", "notes": "Sale badge background on product gallery images." }, { "name": "coral_accent_legacy", "value": "#e16f62", "notes": "Legacy coral/orange accent from the base theme. Present in style.css as --orange and --secondary-orange (#f04f36). Appears in product gallery border-bottom, breadcrumb links, and active tab states. Not used in the Natural Harmony PDP design intent; present in shared theme CSS but not dominant on NHC surfaces." } ] }, "typography": { "families": { "sans": { "stack": "Montserrat, sans-serif", "source": "self_hosted", "url": "https://huxberry.com/cdn/shop/t/42/assets/website-fonts.css" }, "serif": { "stack": "IveMode, serif", "source": "self_hosted", "url": "https://huxberry.com/cdn/shop/files/IvyMode-Regular.woff" }, "display": { "stack": "Urbanist, sans-serif", "source": "google", "url": "https://fonts.googleapis.com/css2?family=Urbanist:wght@600;700&display=swap" } }, "scale": [ { "name": "caption", "size_px": 12, "line_height": 1.33, "weight": 400, "family_key": "sans", "usage": "Caption text, badge labels, small metadata (g-body3 class: font-size:12px, line-height:16px)" }, { "name": "body-sm", "size_px": 14, "line_height": 1.5, "weight": 400, "family_key": "sans", "letter_spacing_em": 0.001, "usage": "Secondary body copy, form field labels, nav items, announcement bar text, select option text (font-size:14px declared in style.css g-body2 and website-fonts.css global rule)" }, { "name": "body", "size_px": 16, "line_height": 1.5, "weight": 400, "family_key": "sans", "usage": "Primary body copy, accordion body text, tab content (g-body1 class: font-size:16px, line-height:24px)" }, { "name": "h5-section-label", "size_px": 18, "line_height": 1.33, "weight": 500, "family_key": "serif", "usage": "Section sub-headings, product badge font size (g-heading5 class: font-size:18px, line-height:24px; IveMode used for headings per website-fonts.css)" }, { "name": "h4-subsection", "size_px": 20, "line_height": 1.25, "weight": 500, "family_key": "serif", "usage": "Sub-section headers, section title labels (g-heading4: font-size:20px; .l-cstm-prod-sec-hdr: font-size:20px, line-height:25px; IveMode font-family)" }, { "name": "h3-product-title", "size_px": 26, "line_height": 1.31, "weight": 500, "family_key": "serif", "usage": "Product section title / PDP product name (g-prod-hdr class: font-size:26px, line-height:34px; .product-section--title uses IveMode per website-fonts.css)" }, { "name": "h2-section", "size_px": 32, "line_height": 1.2, "weight": 500, "family_key": "serif", "usage": "Major section headings, features headings (font-size:32px observed in PDP inline CSS; .template-product .image-with-text--section h2 font-size:28px; IveMode)" }, { "name": "h1-hero", "size_px": 42, "line_height": 1.2, "weight": 500, "family_key": "serif", "usage": "Hero / page-level headings (font-size:42px observed in PDP inline styles for tai-heading section at 38px and hero blocks at 42px; IveMode; .heading-font, h1 uses IveMode per website-fonts.css)" } ] }, "spacing": { "scale_px": [4, 8, 12, 16, 20, 24, 32, 48, 64, 72], "container_max_px": 1400, "gutter_px": 20 }, "buttons": [ { "role": "primary", "bg": "#3A4F3C", "fg": "#ffffff", "border": "#3A4F3C", "radius_px": 0, "weight": 500, "size_px": 14, "padding_x_px": 20, "padding_y_px": 16, "uppercase": false, "letter_spacing_em": 0.03, "hover_notes": "REGRESSION: live ATC button (.product-form--atc-button) uses #3A4F3C as resting background — this is the hover/active dark green, not the canonical resting CTA. Brand policy (brand_color_usage_notes) mandates #537156 for resting CTA color. The live :hover state is #5c765f (lighter mid-green). Redesign MUST correct bg to #537156 at rest with #3A4F3C only on :hover/:active. Observed inline CSS: background:#3A4F3C; font-size:14px; letter-spacing extracted from style.css .l-cstm-prdt-main-cont .product-form--atc-button. Radius is 0 (square, no border-radius on ATC per inline CSS)." }, { "role": "secondary", "bg": "#54412f", "fg": "#fff9f5", "radius_px": 4, "weight": 600, "size_px": 20, "padding_x_px": 30, "padding_y_px": 20, "uppercase": true, "letter_spacing_em": 0.05, "hover_notes": "Canonical brown button observed on homepage collection grid tiles (button-hux style with background-color:#54412f; color:#fff9f5). Used for Signature/Organic Collection CTAs. Padding 20px 30px. border-radius:4px. text-transform:uppercase per .button-hux CSS. font-size:20px observed on homepage section instances." }, { "role": "ghost", "bg": "#537156", "fg": "#ffffff", "radius_px": 4, "weight": 600, "size_px": 20, "padding_x_px": 30, "padding_y_px": 20, "uppercase": true, "letter_spacing_em": 0.05, "hover_notes": "Green ghost/tertiary button used for collection-level CTAs on homepage (banner--button with background:#537156; color:#ffffff; font-size:20px; font-weight:600; text-transform:uppercase; letter-spacing:1px). Also seen as richtext section background (#537156 section band). This is the canonical resting CTA green surface in secondary contexts outside the PDP buybox." } ], "photography": { "treatment": "mixed", "mood": ["natural light", "warm", "minimal", "materials-forward", "soft-neutral tones"], "subject_emphasis": "Product-led with close material detail shots — mattress layers, fabric textures, and NHC range comparison imagery (NaturalHarmonyEssentia.png, NaturalHarmonyReserve.png). Lifestyle bedroom context present but secondary. Sleep-bundle cross-sell items (protector, pillow) shown in clean studio shots.", "aspect_ratios_observed": ["1:1", "4:3"], "notes": "PDP gallery uses 1:1 square images (padding-top:100% on media container). Range comparison cards also 1:1. Homepage lifestyle images include bedroom shots. Product images for Natural Harmony Select use rendered/3D product photography (mattress_1-4.png filenames suggest still-life asset set). Icon-with-text grid tiles below gallery use a warm cream background (#efefe5) with small icon imagery." }, "voice": { "tone": ["materials-forward", "quietly confident", "evidence-led", "understated"], "cues": [ { "cue": "Leads with material origin — names the source and type before benefits", "example": "100% New Zealand Wool", "location": "PDP feature callout, key features list" }, { "cue": "Specifies certifications inline as secondary validators, not headline claims", "example": "CertiPUR-US performance foams", "location": "PDP features list" }, { "cue": "Uses technical construction language to signal craft without hype", "example": "7-zone Pocket-Spring Support Core", "location": "PDP key features" }, { "cue": "Delivery promise is plain and precise — no superlatives on logistics", "example": "Made to Order - Delivery within 5 working days", "location": "PDP pricing block / trust strip" }, { "cue": "Pairs material story with functional sleep benefit in the same phrase", "example": "Tencel and Cashmere infused fabric cover", "location": "PDP features list" } ], "forbidden_observed": [ "Experience Nature At Its Finest (homepage hero — 'Experience' is on the forbidden list)", "KNow More (homepage collection tile CTA — incorrect capitalisation mid-word; also 'Know More' is a hollow CTA phrase)" ], "preferred_terminology": [ { "term": "Natural Harmony", "context": "Collection name — always two words, title case. Not 'natural harmony' or 'Natural-Harmony'." }, { "term": "New Zealand wool", "context": "Material provenance. Use 'New Zealand wool' (full form) or 'NZ wool' as shorthand — not 'organic wool' or 'merino' (no evidence of merino claim)." }, { "term": "pocket-spring", "context": "Hyphenated when used as modifier: 'pocket-spring core', 'pocket-spring support'. Not 'pocketed spring' or 'pocket spring' (no hyphen)." }, { "term": "Dhs.", "context": "Currency display format on the live store. Always 'Dhs.' followed by space and amount. Not 'AED' in customer-facing UI." }, { "term": "Made to order", "context": "Delivery promise phrasing. Use exactly — not 'handcrafted to order' or 'custom made'. Ships in 5 working days is the companion clause." } ] }, "warnings": [ "REGRESSION — resting CTA color: Live PDP ATC button (.product-form--atc-button) uses #3A4F3C as resting background. Brand policy mandates #537156 for resting CTAs. #3A4F3C is hover/active only. All downstream roles must use #537156 for primary resting button surfaces.", "REGRESSION — dark green as resting text/icon color: #3A4F3C also appears as a resting text/heading color (e.g., .cbb-frequently-bought-title color:#3A4F3C, .heading-option color:#3A4F3C). At 14px this crosses into perceptual-clarity concern for deuteranomaly viewers. Downstream roles should use #537156 or #191919 for body-weight text instead.", "CONFINE #585048 — announcement bar background: #585048 appears once on the PDP as the announcement bar background. CSS confirms it is confined to that strip. No leak to hero or CTA surfaces detected on either URL. Monitor for regression in prototype output.", "'Experience' observed on homepage hero: 'Experience Nature At Its Finest' — the word 'Experience' is on the spec's forbidden list. Copy-writer must not propagate this phrase to redesign copy.", "Homepage uses 'KNow More' as a collection tile CTA label — mid-word capitalisation error plus hollow CTA phrase. Do not carry forward.", "Font families include a legacy coral theme variable (--orange: #e16f62 / --secondary-orange: #f04f36) visible in shared style.css. These are not part of the Natural Harmony brand palette; they are base-theme remnants. Do not use in NHC redesign surfaces.", "Photography source files for NHC Select mattress gallery are named mattress_1-4.png — generic filenames suggest asset set may be shared or provisional. Graphics-director should confirm final imagery assets before prototype build.", "No observed 100-night trial messaging on the live PDP — the claim is unverified per brief.resolved.yaml. Do not add trial period language to redesign copy without PM sign-off." ] }