# Her Down There Design System

Updated October 11, 2026. This document describes the current Sites review website and approved visual direction.

## Brand direction

Latest carousel and layout update: homepage testimonial/blog arrows move to the next actual card offset, ignore duplicate in-flight clicks, and use mandatory one-stop mobile snapping. The homepage marquee scrolls again as an explicit exception; other text remains static. Full layout CSS is embedded in the page to eliminate a blocking stylesheet request without late CSS changes. The hero reserves a fixed responsive frame and its eager image stays static. Adobe Fonts loads as a normal stylesheet in the head with a cross-origin preconnection. Preserve the kit’s native font-display: swap; never override it with optional, which can leave visitors on fallback fonts. Brand fonts replace fallback text when downloaded. Public llms.txt and ai-catalog.json discovery resources describe the website’s existing informational content.

Latest performance update: 44 image families use hashed AVIF variants with responsive WebP fallbacks and sizes matched to their display slots. The homepage hero ranges from 6.8KB at 320px to 49.9KB at 1200px. The logo has 320/480/600px variants. Full cached CSS loads before layout instead of a partial inline stylesheet followed by delayed full CSS. Native IntersectionObserver triggers GSAP image reveals; ScrollTrigger is no longer requested. Node supports Brotli and gzip, with one-year immutable caching for versioned or hashed resources. These rules supersede earlier critical-CSS and ScrollTrigger guidance.

Latest motion decision: headings, paragraphs, navigation text and design-system text are static. No text reveal or text-motion demos remain. The care statement and 404 typography are static too. Image reveals and button interactions remain. The sharing card is exactly 1200 × 630, includes “Book your visit at herdownthere.com,” and uses og:site_name “Her Down There.” These decisions supersede earlier text-motion guidance below.

FAQ answers use a 12px gap below the question area, 20px between content blocks, 28px above answer subheadings, 12px from a subheading to its text, and 28–32px bottom padding. Lists have 10px between items. Mobile FAQ introductions are separated from the accordion by 32px. Apply this shared spacing everywhere, including the design-system component examples.

Accessibility report corrections: all pages measure the sticky header and optional jump bar to set scroll padding. Keyboard focus scrolls clear of the header and leaves 96px bottom space for floating controls. The marquee remains plain text in the body typeface, with decorative duplicates hidden from assistive technology. Logo and service-image alternatives describe the real artwork; Meritain includes “An Aetna Company.” A grouped `/site-map/` page, linked in the footer and flyout, provides a second way to find public content alongside primary navigation. XML sitemap now includes 47 public routes.

October 11 client content corrections: remove Biopsy from additional pricing; combine Vitamin B12 in one card with 4 shots $100 and a single shot $30; use “Nexplanon Removal/Insertion and IUD removal.” Service-page Planning your visit cards separate the service headline and self-pay price, then state: “Have insurance? We accept most plans. Your cost will depend on your coverage and any testing or treatment you need.” Retain the View pricing & coverage action. Every responsive line break includes whitespace so hiding a break on mobile cannot join words or sentences.

Performance: responsive 400/800px WebP illustration and portrait variants preserve complete subjects and transparency. Header/footer use a crisp 600px WebP rendering of the supplied full SVG; original SVG logo options remain available. First-paint styles are inline, with the Adobe Fonts stylesheet loaded normally in the head for reliable discovery. Eager hero images remain visible during scale-settle; initial-screen text moves gently without an opacity delay. Insurer logos use smaller WebP assets with lazy loading. Preserve the site's GA4 tag; upstream Adobe/Google cache policies are external.

Warm, clear, confident and inclusive. Use bold editorial typography, approachable medical illustrations and generous space. Copy should be direct and medically credible without promising outcomes. Preserve the approved clinical copy, prices, provider credentials, patient quotations and article dates. Do not add invented statistics or decorative numbering. No emoji icons.

## Website organization

- `/` is the patient website homepage.
- Interior page URLs use clean root paths. `/concept/` redirects to `/`; other old `/concept/...` URLs redirect directly to the corresponding clean page.
- `/design-system/` contains the interactive brand system. Its footer link follows Medical information throughout the website. It uses the shared website main navigation and flyout, followed directly by the section jump links. The sticky jump bar sits below the main header without overlapping it.
- The prior floating design-system switch and Complete experience directory are removed.
- Interior pages include semantic breadcrumbs with a Home link, relevant parent section, current-page label and BreadcrumbList structured data. Home itself does not need a breadcrumb.
- Preserve all seven care pages, pricing, memberships, About, provider profile/listing, contact, forms, testimonials, policies and 25 Blog articles.
- Primary navigation includes care, pricing and insurance, memberships, About, Supplements and booking. Preserve the accessible slide-out menu.

## Dedicated section illustrations · October 11, 2026

- `/media/ongoing-care.webp`: personal video follow-up for the homepage membership section, conveying continuity and peace of mind.
- `/media/contact-location-hero.webp`: welcoming clinic arrival with a location pin for Contact & Location.
- `/media/patient-stories-hero.webp`: four women with white, Latina, Black and Indian representation sharing stories in a warm conversation.
- These distinct compositions retain the editorial gouache texture, blush shapes, transparent backgrounds and no greenery. All three appear in the design-system illustration gallery; preserve full faces and use contain sizing.
- The homepage's nine accepted-insurance logos form a three-column grid with consistent spacing.

## Logo and sharing assets

| Asset | Use |
| --- | --- |
| `/media/logo.svg` | Active header and footer logo |
| `/media/logo-full.svg` | Full supplied logo with symbol and tagline |
| `/media/logo-text.svg` | Supplied text logo for compact future uses |
| `/media/favicon.svg` | Supplied SVG brand symbol for the logo gallery |
| `/media/favicon.png` | Active supplied 650 × 650 PNG favicon and touch icon |
| `/media/opengraph-1200x630.jpg` | Updated supplied 1200 × 630 Open Graph and X sharing image |

Display full, text and symbol options in the design system. Keep natural proportions, original colors and adequate clear space. Do not crop or redraw the logo. The supplied portrait of Letrice Mason remains the photographic source across the homepage, About, provider listing and biography.

The October 11 supplied SVGs supersede all previous logo artwork. The full logo (1800 × 1050) is used in the website header, footer, design-system header and `/links/`. The text logo retains its 1800 × 458.92 viewBox; the favicon symbol retains its square 1114.67 × 1114.67 viewBox. The later October 11 supplied PNG replaces the active browser favicon at 650 × 650, while the SVG remains the logo-gallery symbol. Versioned logo, favicon and sharing-image URLs refresh cached artwork throughout the website.

## Color tokens

| Token | Hex | Role |
| --- | --- | --- |
| Magenta | `#B5006E` | Primary buttons and accents |
| Deep magenta | `#8F0057` | Hover/pressed colors |
| Brand plum | `#6B1F5C` | Headings and emphasis |
| Deep plum | `#35102E` | Closing CTA and dark surfaces |
| Cream | `#FCF2ED` | Page canvas |
| Blush | `#F5DCEB` | Soft surfaces |
| Ink | `#271D26` | Body and interface text |
| Quiet ink | `#655C64` | Supporting text |
| Soft rose | `#F7E7E5` | Alternate sections |
| Warm line | `#DBCBD1` | Decorative borders |
| White | `#FFFFFF` | Form fields and reversed text |

Interior hero gradients must have a visibly distinct pale left color, rather than blending into the cream canvas. Review cards repeat blush, soft blue and peach surfaces throughout the testimonials grid. Maintain readable contrast on every variant.

## Typography

Include this Adobe Fonts stylesheet sitewide:

```html
<link rel="stylesheet" href="https://use.typekit.net/pzc5rui.css">
```

```css
:root {
  --display: 'fields-display', Georgia, serif;
  --body: 'brandon-grotesque', 'Trebuchet MS', sans-serif;
}
```

Fields Display 700 is the heading direction, including emphasized words. Avoid thin italic headlines. Brandon Grotesque uses 500 for body and 700 for controls. Hero sizes are responsive, approximately 48–96px; section headings 36–60px; body 18–20px; interface labels generally 14–17px. Long body text uses approximately 1.6 line height. Footer text must remain clearly readable.

## Illustration direction: original artwork with editorial gouache texture

Use the approved textured originals across both the patient site and design system. Apply finish changes to the original compositions, not entirely new scenes.

- Preserve the original people, poses, medical objects, diagrams, labels, scale and arrangement.
- Add thick visible gouache brushwork, layered opaque paint, rough paper grain within painted shapes, subtle color variation and soft irregular painted edges.
- Retain the original palette and blush organic shapes. Keep all space outside the artwork transparent; do not add a peach/brown rectangular canvas.
- Keep muted accents and gentle shading. Avoid neon, harsh shadows, vector outlines or exaggerated cartoon styling.
- No plants, trees, foliage, greenery or unrelated environmental props.
- Birth control depicts pills and a patch. Hormone care depicts a patch and creams. Preserve the peptide vial and its label.
- Preserve natural, diverse figures where the original image contains people. Do not turn object illustrations into people or therapy scenes.
- Keep complete subjects visible, with `object-fit: contain` when appropriate.
- The One illustration family gallery has four columns on desktop and two on tablet/mobile. All cards must be siblings in valid markup.
- The family covers the homepage consultation, seven service illustrations and four patient-journey steps.

Reusable edit direction: “Preserve this original illustration’s exact subjects, poses, objects, diagrams, labels, composition and palette. Apply warm editorial gouache texture only: thick brush marks, opaque layered paint, rough paper grain and soft painted edges. Retain the blush silhouette and transparent outer space. No new scenes, plants, greenery or props.”

## Layout and components

Use an approximately 1,248px content width, comfortable responsive gutters and an 8px spacing rhythm: 8, 16, 24, 32, 48, 64 and 96px. Cards use soft consistent corners; buttons use pill corners.

- Homepage hero: centered headline and supporting copy, Book appointment and Find your care actions, then the illustration.
- Keep the licensed-healthcare-professionals marquee; its motion is controlled from the navigation flyout rather than a separate pause button.
- Preserve all insurance logos including Ambetter; do not reduce the set to four.
- Cherry financing has a dedicated homepage feature and pricing section. Use the current graphic without expired dates or invented approval amounts.
- Supplements has a dedicated feature and primary navigation link, separate from social links. On mobile its image comes before its text.
- Homepage testimonials and Blog cards become swipeable mobile carousels with labeled controls.
- Closing “You deserve to feel heard” CTA spans the viewport, keeps upper rounded corners, and has clear separation from preceding sections. Cherry must not butt rounded lower corners against it.
- Membership benefits share one desktop row with space before pricing cards. The ongoing-care feature includes an illustration.
- Both patient intake and insurance verification text-only heroes are centered on desktop and mobile.
- Use official social icons with accessible labels; preserve all social destinations.

## Forms

Use Cognito seamless embeds with key `hIFuIWkF0UaiWZ1_zoHgfQ`:

| Form | ID |
| --- | --- |
| Contact | 9 |
| Insurance verification | 3 |
| Patient intake | 1 |

Style through `#hdt-cognito`: website fonts, rounded white fields, clear borders, magenta primary actions, outlined secondary actions and visible focus. Preserve native validation, upload, pagination and submission behavior. These are live forms, not previews. Do not send test patient submissions. Button motion applies to accessible DOM controls, including dynamically added seamless form buttons; controls inside cross-origin iframes remain governed by Cognito.

## Selected motion

GSAP and ScrollTrigger power the shared motion system. Use `power3.out`, 0.8s entrances, 0.35s interactions, 28px text/section travel and 0.1s group stagger.

- **Buttons: magnetic press.** Fine-pointer movement follows the pointer by at most 6px on each axis, returning to zero on exit or blur. Press scales to 0.98 and release returns to 1. Include keyboard and touch press feedback. Disabled buttons do not animate. Delegate events so dynamically inserted controls are covered.
- **Images: gentle scale settle.** Content images enter from scale 1.06 and autoAlpha 0 to their natural size and full visibility, using a one-time ScrollTrigger. Logos and live motion-demo elements retain their specialized presentation.
- Keep the design system’s replay controls, with Scale settle and Magnetic press selected by default for their categories.
- Respect reduced motion automatically and the design system motion toggle. Leave content visible and buttons usable when JavaScript or animation libraries fail.
- Use GSAP context cleanup, `quickTo` for pointer movement and refresh layout after images/fonts load. Do not add competing hover transforms.

## Content and review safeguards

Confirmed physical address: 1622 W. Alabama St, Houston, TX 77006. Virtual care is for Texas patients. Retain current prices, including $199 ultrasound and breast ultrasound, and the hormone medication exclusion. Preserve the latest FAQs and provider-neutral general care language. Article attribution is Her Down There with existing dates. Use Supplements and Blog labels. Avoid em dashes in site copy.

The production-ready build uses https://herdownthere.com for canonical, sharing and schema URLs. Public content is index/follow; robots.txt allows crawling and references https://herdownthere.com/sitemap.xml. Design-system, link utility, 404 and unfinished privacy/terms/accessibility drafts remain noindex. Publishing this Sites version does not update the official-domain hosting.

## Hero collection and spacing update

Four additional transparent gouache illustrations are used in the Memberships, Pricing & Insurance, Our Care and About page heroes and the design-system hero gallery. The consultation preserves the established clinician and patient identities; About shows the same happy clinician. The membership and pricing images use relevant cards and objects. No plants, greenery, text or pricing is painted into these assets.

Shared spacing uses 24px between supporting content and 28px before actions (24px mobile). Button groups use 16px gaps (14px mobile). Section headings immediately followed by paragraphs or addresses use a 24px gap. Preserve aligned pricing-card buttons and give them at least 28px separation from preceding copy. Contact details use a separate vertical group with 12px gaps.

## Navigation, motion and SEO update

All interior hero headings, descriptions and actions are centered within their copy area. The header/footer-free `/links/` page offers booking, services, pricing, memberships, supplements, patient forms, contact and social links. The medical-information draft badge/introduction were removed at the owner's request; its remaining copy is unchanged and other legal drafts remain.

The pricing/insurance illustration now uses an insurance card, shield, coverage clipboard and stethoscope. It contains no calculator or coins. The design-system gallery uses this revised artwork too.

The flyout Motion on/off button controls the marquee, native heading and paragraph fade-up reveals, image reveals, button effects and interactive 404. The preference is stored only on the visitor's device under `hdt-motion`; OS reduced-motion takes precedence. The 404 uses playful movable typography and supports pointer, arrow-key and touch interaction. No movement is needed to navigate home.

SEO checks cover built HTML for all 51 content routes and the 404 document. Unique titles and descriptions, matching Open Graph/X metadata, contextual image alternatives, heading structure, Organization/WebSite/WebPage, article and breadcrumb schema, internal links and XML sitemap coverage are checked. The sitemap includes all 46 indexable routes on https://herdownthere.com, including patient forms and medical information. Confirm official-domain HTTP responses, HTTPS redirects and real 404 handling after uploading this build. Privacy, terms and accessibility drafts need practice approval. Google Analytics G-70T4NJ0PT8 is installed exactly once per HTML document.