# Tia — Marketing Site Design Spec

> Source: asktia.com (live DOM, computed styles), 2026-08-03; desktop 1512px.
> Coverage: marketing home + hero + insurance/services sections. No `:root` custom properties (Gatsby CSS-modules) — §2 read from computed styles + border/section census. sheetsBlocked 0.
> Reality check: hint ("warm earthy tones replacing clinical blue, custom illustration") is HALF right — the warm palette is exactly right (cream/sand base, berry + coral accents, blue reserved for links only), but the identity is **photography-led** (full-bleed clinic interiors), not custom illustration; the real signature the hint misses is a **serif/sans type pairing** — Inferi high-contrast serif display over Basis Grotesque.

## 1. Visual Theme & Atmosphere

Warm, editorial and reassuringly human — a women's-health clinic that deliberately trades the clinical blue-and-white of healthcare for a cream-and-terracotta living room. The canvas is a warm cream `#fcf4e9`; sections step into sand `#ecdccd` and the occasional deep berry `#831a4a` or slate `#27455c` panel behind full-bleed photographs of real clinic interiors. The headline voice is a high-contrast serif (Inferi) with an italic emphasis word — "care for *women*" — set against a plain Swiss grotesque (Basis) for everything else, so the page reads like a considered print magazine rather than a SaaS product. Colour is warm and rationed: coral drives the CTAs, berry and bright pink handle accents and check-marks, and blue is quarantined to links. Feels: warm, editorial, human, unclinical.

## 2. Color Palette & Roles

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#282725` | Primary text, serif headlines (warm near-black) |
| gray-600 | `#696969` | Secondary text |
| gray-500 | `#555555` | Tertiary text, captions |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| cream | `#fcf4e9` | Page canvas + cream secondary-button fill |
| sand | `#ecdccd` | Alternating section background, warm panels |
| white | `#ffffff` | Cards, inverse text on dark panels |
| off-white | `#f8f8f8` | Light-gray inset panels |
| mint-white | `#f9fffa` | Success / info panel tint |
| pale-blue | `#cddcf2` | Soft blue info panel |
| slate | `#27455c` | Deep slate dark-section background |

### Borders
| Token | Hex | Role / usage |
|---|---|---|
| berry-line | `#831a4a` | Most-used border (berry hairline around cards) |
| border-gray | `#d8d8d8` | Neutral hairline (also `#d1d1d1`) |

### Accent & semantic
| Token | Hex | Role / usage |
|---|---|---|
| coral | `#f6544a` | Primary CTA fill ("Book now" / "Book an appointment") |
| coral-alt | `#f95647` | CTA border / hover coral |
| berry | `#831a4a` | Signature berry panel + accent |
| pink | `#ef308d` | Bright-pink check-marks and highlight accents |
| link-blue | `#3860be` | Links only (the one "clinical" blue, quarantined) |
| green | `#32ae88` | Success / positive borders |

Rule: warm cream + sand carry the whole surface; coral `#f6544a` and berry `#831a4a` are the brand accents that replace clinical blue. Blue `#3860be` is allowed only on links, never on chrome.

## 3. Typography Rules

- Families: **Basis Grotesque** (Swiss neo-grotesque workhorse — 1434 uses, regular/bold/mono) + **Inferi** (high-contrast serif display + italic, 29 uses).
- Body base: 18px. Specimen swaps: **Fraunces** stands in for licensed Inferi; **Inter** for licensed Basis Grotesque.

| Role | Family | Size/Line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Display (h1) | Inferi (serif) | 60 / 66 | 400 | normal | none, `#282725` |
| Display emphasis | Inferi Italic | 60 / 66 | 400 | normal | italic ("women") |
| Section (h2) | Basis Grotesque | 44 / 52.8 | 400 | normal | none |
| Sub (h3, on dark) | Inferi (serif) | 30 / 39 | 400 | normal | none, `#ffffff` |
| Body | Basis Grotesque | 18 / 30.6 | 400 | normal | none, `#282725` |
| Nav | Basis Grotesque | 16 / 20 | 400 | +0.08px | Capitalize |
| Button | Basis Grotesque | 16 / 20 | 800 / bold | +0.08px | none |

Patterns: serif (Inferi) is reserved for large display + italic emphasis; Basis Grotesque does all UI/body. Buttons are unusually heavy (weight 800). No uppercase headings; tracking stays near-normal throughout.

## 4. Component Stylings

### Buttons
- **Primary (nav "Book now")**: bg `#f6544a` coral, text `#ffffff`, 1px `#f95647` border, radius **8px**, h 46px, pad 12px 24px, Basis 16/800.
- **Primary (hero "Book an appointment")**: bg `#f6544a` coral, radius **90px** (full pill), h 54px, pad 15px 35px, Basis bold.
- **Secondary ("Find a clinic near you")**: bg `#fcf4e9` cream, text `#000000`, radius 32px pill, h 53px, Basis bold.
- **Outline (nav "Log In")**: transparent/cream fill with a thin dark rule, pill.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Any link / button | as above | `opacity: 0.5` (house hover) | not captured (only `.skip:focus`) — see §9 | — | dimmed |

### Inputs
- Rounded fields on white with a hairline border; search/email fields ~44px. (No explicit focus ring captured beyond the skip link.)

### Cards / panels
- White or sand fill, **1px `#831a4a` berry** hairline (signature), radius 2–8px, soft shadow `rgba(0,0,0,.12) 0 6px 18px`; some warm neumorphic shadows (`rgb(199,197,199) -3px -3px 5px`, warm `rgba(118,84,84,.24) 0 0 24px`).

### Check-list marks
- Bright-pink `#ef308d` circular check bullets in the hero benefit list.

## 5. Layout Principles

- Split hero: left cream text column (serif headline + pink-check benefit list + dual CTA), right full-bleed clinic photograph.
- Alternating full-width bands: cream → sand → berry/slate photo sections.
- Nav: cream bar, "tia Health" wordmark left, capitalized dropdown links centre, coral "Book now" + outline "Log In" right.
- Generous whitespace and large serif display; content max-width centred.

## 6. Depth & Elevation

- Radii: **2px dominant** (cards/small), then 8px, 6px, 10px; buttons pill at **32px / 90px**; avatars/marks 50%.
- Shadows: soft warm ambient — `rgba(0,0,0,.12) 0 6px 18px`, `rgba(0,0,0,.1) 0 4px 12px`, warm `rgba(118,84,84,.24) 0 0 24px`, plus subtle neumorphic `rgb(199,197,199)` pairs.
- Borders: **1px `#831a4a` berry** (most-used), 1px `#d8d8d8`/`#d1d1d1` neutral, 1px `#3860be` blue, 2px `#000000`, 1px `#32ae88` green.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| all | 0.3s | ease-in-out | house transition (dominant, 196×) |
| transform | 0.3s | ease | menu / lift |
| opacity, transform | 0.16s | ease | quick reveals |
| opacity | 0.5s | ease | link fade to 0.5 on hover |
| all | 0.25s | ease-out | buttons / cards |

- House transition: `all 0.3s ease-in-out`; a notable easing is `cubic-bezier(0.25,0.46,0.45,0.94)` (easeOutQuad).
- Keyframes by name: `marquee` / `marquee-mobile` (logo/press ticker), `spin`, `editorial-floating-toc-enter`, `bounce`, `fontbulger`, `shimmer`.
- No animation library detected (Gatsby, hand-rolled). **1 `prefers-reduced-motion` block honoured** (reducedMotionBlocks: 1) — good practice, not an anti-pattern.

## 8. Backgrounds, Effects & WebGL

- Flat warm surfaces (cream/sand/berry/slate) with **full-bleed photography** as the emotional layer. Photos over dark sections carry a scrim: `linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.24) 42%, rgba(0,0,0,.72))`.
- No canvas/WebGL, no background video, no grain, no backdrop-filter. 3 CSS raster background layers; the rest of the imagery is `<img>`.

## 9. Do's and Don'ts

### Do
- Keep the canvas warm cream `#fcf4e9`; alternate into sand `#ecdccd`, berry `#831a4a` and slate `#27455c` photo bands.
- Reserve the serif (Inferi/Fraunces) for large display + one italic emphasis word; set everything else in Basis Grotesque/Inter.
- Drive CTAs with coral `#f6544a` (pill or 8px), and accent with berry + bright pink `#ef308d`.
- Outline cards with a 1px berry `#831a4a` hairline and a soft warm shadow.
- Make buttons heavy (weight 800) with near-normal tracking.
- Keep motion gentle (`all 0.3s ease-in-out`) and honour reduced motion.

### Don't
- Don't reach for clinical blue on chrome — blue `#3860be` is links only.
- Don't set headlines in the sans; the display voice is the serif.
- Don't use uppercase or wide tracking on headings.
- Don't rely on `opacity: 0.5` as the only interactive feedback without a visible focus ring (the site does — add one).
- Don't switch to a dark theme; this is light-only (darkSchemeBlocks 0).

## 10. Responsive Behavior

- Very dense, hand-tuned breakpoint ladder — **49 seams** mixing em and px (37.5em / 48rem / 56.26em / 75em plus a long px ladder 380 → 1439). The many paired min/max px values are Gatsby CSS-module component breakpoints.
- Mobile collapses the split hero to a stacked photo-over-text layout; dropdown nav becomes a menu.
- Light-only, no theme toggle (`darkSchemeBlocks: 0`); no container queries; **1 reduced-motion block**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fcf4e9` · Text `#282725` · Muted `#696969` · Berry line `#831a4a` · Accent coral `#f6544a` / pink `#ef308d` · Link `#3860be`
- Font: Inferi serif (display) + Basis Grotesque (UI/body) · Body 18px · Radius 8px control / 90px pill / 2px card · Button h 46–54px, weight 800
- Focus: not captured (add a visible ring) · Hover: `opacity 0.5`

<tia-marketing_design_language>
Use the Tia design language: a warm women's-health clinic that replaces clinical blue with a cream-and-terracotta living room. Canvas warm cream #fcf4e9; sections step into sand #ecdccd, deep berry #831a4a and slate #27455c behind full-bleed clinic photography. Text warm near-black #282725; secondary #696969. The identity is a serif/sans pairing: a high-contrast serif (Inferi; Fraunces stand-in) for large display headlines and one italic emphasis word ("care for women"), over Basis Grotesque (Inter stand-in) for all UI and 18px body. Colour is warm and rationed — coral #f6544a drives CTAs, berry #831a4a and bright pink #ef308d handle accents and check-marks, and blue #3860be is quarantined to links only. Buttons are heavy (Basis weight 800), coral, pill (32/90px) or 8px, 46–54px tall; cards carry a 1px berry #831a4a hairline and a soft warm shadow (rgba(0,0,0,.12) 0 6px 18px); radii are otherwise small (2–8px). Gentle motion (all 0.3s ease-in-out), hover fades links to opacity 0.5, reduced motion honoured. Feels: warm, editorial, human, unclinical. Avoid: clinical blue on chrome, setting headlines in the sans, uppercase/wide-tracked headings, a dark theme, and relying on opacity-only hover with no visible focus ring.
</tia-marketing_design_language>