A women’s-health clinic that deliberately trades the clinical blue-and-white of healthcare for a warm, editorial living room. The canvas is a warm cream #fcf4e9 that alternates into sand #ecdccd panels and the occasional deep berry #831a4a or slate #27455c band behind full-bleed photographs of real clinic interiors, with the whole surface reading like a considered print magazine rather than a SaaS product. The identity the queue hint misses is a serif/sans type pairing: a high-contrast Inferi serif (Fraunces stand-in) is reserved for large display headlines and a single italic emphasis word (“care for women”) at 60/66 weight 400, while a plain Basis Grotesque neo-grotesque (Inter stand-in) does all UI and 18px body. Colour is warm and rationed — coral #f6544a drives every CTA, berry #831a4a and bright pink #ef308d handle accents and the circular check-marks, and the one clinical blue #3860be is quarantined to links only, never chrome. Buttons are unusually heavy (Basis weight 800), coral, either an 8px rounded rect or a full 32/90px pill at 46–54px tall; cards carry a signature 1px berry #831a4a hairline over a soft warm shadow (rgba(0,0,0,.12) 0 6px 18px) with otherwise small 2–8px radii. Motion is gentle (all 0.3s ease-in-out over cubic-bezier(0.25,0.46,0.45,0.94)) and hover simply fades links to opacity 0.5, with one reduced-motion block honoured; atmosphere is flat warm surfaces plus photography scrimmed with a dark gradient, no canvas or grain. There are no :root tokens (Gatsby CSS-modules) so the palette was read from computed styles, and the only anti-pattern is a missing focus ring on main controls. Inferi and Basis Grotesque are licensed, so the preview stands in with Fraunces and Inter.
⚠ needs-dashboard
Browse Tia in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #282725 | Primary text, serif headlines (warm near-black) |
| gray-600 | #696969 | Secondary text |
| gray-500 | #555555 | Tertiary text, captions |
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| berry-line | #831a4a | Most-used border (berry hairline around cards) |
| border-gray | #d8d8d8 | Neutral hairline (also #d1d1d1) |
| 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.
| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.