# HGM Connected Intelligence — design system 1.0

## Purpose

The homepage establishes a restrained corporate language for the whole site: clear message, explicit choice, evidence before commitment, and practical resources for visitors who are not ready to inquire. Every section must orient, explain, demonstrate, help evaluate, prepare an action, or provide support. Decoration alone is not a section purpose.

## Foundations

- Primary identity: existing HGM logo, company name and verified positioning. No invented proof, clients, prices, outcome figures or availability claims.
- Light surfaces: paper #f6f7f9, ink #283646, muted #536274, primary #3157d5, surface white, divider #dce2e9.
- Dark/Agentic surfaces: paper #111923, ink #e7edf5, muted #b6c2d2, accent #b5caff, surface #192433. Existing Agentic and Circadian behavior remains intact.
- Five typography roles: small 12px; body 16px; subheading 24px; section heading up to 40px; display heading up to 56px. Reading preferences scale the relevant roles. Existing legacy micro-controls may retain their own sizes.
- Weights: 400, 500 and 600 in the shared components. Body line-height 1.65–1.75; reading copy at most 75 characters wide.
- Spacing uses an 8px rhythm: 8, 16, 24, 32, 40, 48, 64, 88, 96. Corners: 8px controls, 12px secondary surfaces, 16px principal components.
- Use one visual boundary per component. Product cards use a quiet surface and single fine boundary; no competing colored illustrations or stacked shadows.
- Functional transitions only in new components. Do not add autoplay to carousels or block meaningful content behind animation. Existing reduced-motion and accessibility settings remain authoritative.

## Components

| Component | Visitor job | Required behavior |
|---|---|---|
| Message + decision hero | Understand the page and select a goal | One H1, concise scope, deliberate options, clear active route |
| Product showcase | Compare product fit | Purpose → actual public-interface preview → owning-product CTA |
| Topic section | Learn one owned concept | Descriptive heading, evidence or guidance, contextual next link |
| Working utility | Try a bounded task | Actual input/output, input limits and interpretation boundaries |
| Decision desk | Move forward or prepare independently | Page-owned primary action plus optional local checklist and real resource download |
| Inquiry form | Prepare a relevant conversation | Clear fields, actual delivery behavior, privacy notice, no invented receipt |
| Related destinations | Continue with useful context | Semantic parent/child/sibling or relevant tool/service; no keyword-only linking |
| Policy/support | Find information or exercise a choice | Direct request routes; no forced sales diversion |
| Footer | Recover navigation and find company information | Consistent identity, policies, service/product destinations |

## Conversion hierarchy

The primary action is a solid button. Secondary actions use a plain contextual link or outlined button. Avoid presenting two unrelated solid buttons as equally urgent in the same section. A comparable product row can contain one owning-product action per product. Place the screenshot before the final product action so visitors can inspect the interface first.

A service inquiry, product account, and software subscription are distinct journeys. Never promise that a purchase or account is activated by a frontend redirect. No pricing or account entitlements changed in this design update.

## Templates

- Product: purpose and access → scope/workflow → actual screenshots → product destination; optional implementation inquiry remains separate.
- Service/location: business problem → scope/evidence → implementation expectations → relevant inquiry.
- Article/resource: explanation → application and limits → relevant tool/service → optional action sheet.
- Tool: supported inputs → real workspace where implemented → output limits → maintained-product or implementation route.
- Evidence/case study: documented facts and limitations → relevant implementation connection. Pending results are not recast as completed proof.
- Policy/transaction: readable information → request, account or billing-help route. No promotional decision desk is injected.

## Working resource behavior

Each content page has a Markdown action sheet derived from its current scope and review items. Commercial and informational templates also provide a browser-local selection tool. Visitors select checklist items and download a short brief. Selections are not stored, transmitted or used for tracking; the worksheet is not a booking, contract or paid audit.

The frontend's 41 existing forms still prepare an email or a downloaded request. They do not establish durable server receipt. Do not change those notices until a real backend is implemented and tested.

## Implementation

`assets/hgm-design-system.css` supplies the tokens and components after legacy styles. `assets/hgm-decision-tools.js` implements the checklist. Pages declare their template with `body[data-page-kind]` and main sections declare `data-section-role`. Existing theme/accessibility scripts remain in place.

Use `downloads/design-system-pages.json` for the page's owning intent and primary action, and `section-purpose-register.json` for section roles. Adding content requires updating its action sheet, semantic links and registry. Do not add a section that lacks a role and a real visitor action or resource.

## Verification and limits

Run `python tests/design-system.py` and the existing JavaScript interaction tests before packaging. The build check covers metadata, resources, local destinations, IDs, headings, embedded JSON-LD parsing, intent coverage and sitemap membership. Parsing valid JSON-LD is not equivalent to a full vocabulary or search-feature validation.

No percentage conversion improvement or fatigue reduction is claimed. Browser review uses representative templates; full manual assistive-technology testing remains a separate review. Existing legacy policies and operational records are retained; this design is not a legal opinion or billing implementation.


## Editorial edition

The shared editorial layer adds warm paper (#f5f3ee), near-black ink (#262a2e), restrained cobalt, Georgia headline typography and the existing sans-serif interface stack. Fluid display typography, asymmetrical lead composition, 3px functional corners, crisp section rules, product subgrid alignment, and consistent article reading widths apply across all page templates. Functional hover transitions stay below 250ms. Dark, readable-font, high-contrast and reduced-motion settings remain available. No third-party font or animation dependencies added. No page copy changed.