# FaceSPec — website replacement mockup

A proposed replacement for [www.facespec.com](https://www.facespec.com), the practice of
**Seolhee Patel, NP** — Korean-style skin treatments and a small set of IV infusions,
1 Boerum Place, Suite 210, Brooklyn Heights.

**Live mockup (Claude artifact):** https://claude.ai/code/artifact/90cf0b76-199a-40d1-8acb-76b37387a0d4

## What's in this repo

| File | What it is |
|---|---|
| `index.html` | **The deliverable.** A single self-contained page (no external fonts, images, or scripts). Open it in any browser. Client-reviewed: Seolhee's round-2 corrections are applied. |
| `CLAUDE.md` | Session context for any Claude account picking this up — prime directive, current state, hard rules. **Start here.** |
| `HANDOFF-DEPLOY.md` | **The launch runbook**: Netlify hosting, Squarespace DNS pointing, form backend, artwork-swap points, launch checklist. |
| `docs/site-evaluation.md` | Why the current Squarespace site falls short, across brand / UX / copy / medical-trust lenses. |
| `docs/design-brief.md` | The design system the mockup implements — palette, typography, section order, copy-voice rules. **Read this before editing.** |
| `docs/current-site-content.md` | Archive of every page of the existing site (content + prices), so you never need to re-scrape it. |
| `docs/review-log.md` | Round-1 four-lens review findings (fixed), Seolhee's round-2 corrections (applied), and the open items. |
| `docs/advertising-pr.md` | Advertising & PR playbook for a practice that must stay small — messaging house, owned surfaces, earned-media filter, referral system, NY legal guardrails. |
| `assets/` | Artwork as standalone files: `fs-logo-original.png` (her full logo lockup from the live site), `fs-mark-ink.png` / `fs-mark-mask.png` (the circular mark as ink PNG and as the alpha mask the page embeds), `face-study-1/2.svg` (the two sketch-traced drawings), `face-studies-preview.png`. |
| `FaceSPec-handoff.pdf` | The round-1 package as one printable document (this is what Seolhee reviewed and sketched over). |
| `screenshots/` | Round-1 captures of the mockup: desktop (`d-*`), dark mode (`dark-*`), mobile at 375px (`m-*`). Pre-date the real logo and sketch faces. |
| `research/workflow-outputs.json` | Raw multi-agent research: 4 site critiques, 3 competing design directions, the judge's synthesis, the 4 mockup reviews, and the 3 PR perspectives. |

## The one-paragraph brief

The site's job is **not** lead generation. Seolhee deliberately keeps the practice small —
no social media, no ad funnels, word-of-mouth only — so she has flexibility for her family.
A referred visitor arrives already half-sold; the site must *confirm the story they were told*
(Gangnam-trained, a decade in NYC ERs/SICU, hospice experience, subtle artistic work) within
seconds, feel like a private clinic rather than a medspa chain, and offer exactly one calm
door in: "Request an appointment." Quiet luxury, engraved-stationery register, first-person
clinician voice, zero superlatives.

## Design constraints (do not break these)

1. **Self-contained (for now).** No CDN fonts, no external requests. System font stacks +
   inline SVG only. This is what lets the page publish as a Claude artifact for preview.
   Once hosted externally, local files in `assets/` are fine (images, favicon) — but never
   third-party CDNs or fonts.
2. **Cinnabar `#A34D39` appears exactly once** — the dojang seal beside her signature in About.
   It is the single warm note of the whole composition. Never reuse it.
3. **Light and dark mode** both work via CSS custom properties. Tokens are defined on `:root`,
   overridden in `@media (prefers-color-scheme: dark)`, and again in `:root[data-theme="dark"]`
   / `:root[data-theme="light"]` (the artifact viewer's theme toggle stamps `data-theme`).
   If you add a themed color, add it to **all four blocks**.
4. **Copy voice:** first person, present tense, short declarative sentences. Banned: emoji,
   exclamation marks, "best", "ultimate", "radiant", "effortlessly", "luxury". Every proper
   noun gets one plain-language sentence before any claim. Wellness/IV claims stay in
   "patients choose it for…" framing with the FDA disclaimer intact. Typographic quotes (“ ” ’).
5. **Prices** use one format: `$350–$900` (en dash, both dollar signs). Treatment names must
   match *exactly* between the Treatments section and the Fees carte.
6. Contrast is verified AA: light-mode taupe is `#746A5C` (don't lighten it), accent text is
   `#57705F` (decorative celadon `#6E8B7B` is never used for text).

## What's placeholder / still needed from Seolhee

- **Photography** — the two framed placards ("portrait to come", "treatment room, morning")
  are built to receive a half-day shoot: a warm professional portrait (3:4), the treatment
  room, and ideally the building entrance for the Visit section.
- **Form backend** — the note form is a mockup (it confirms without sending). Wire it via
  Netlify Forms to `skp@facespec.com` — steps in `HANDOFF-DEPLOY.md`.
- **Final artwork files** — the two Seoul-method drawings are traced from Seolhee's pencil
  sketches; per standing instruction, final artwork is produced separately as image files
  and swapped in (swap points in `HANDOFF-DEPLOY.md` §Artwork).
- **Facts still to verify with her:** NAD+ dosing/pricing (mockup standardized on
  500 mg / $500 — the old site listed 250–500 mg); whether the Korean dermatologist/clinic
  may be named; whether "The SP in FaceSPec is me" line lands with her; the hangul on the
  seal (설희) is correct for "Seolhee".
  (Already confirmed, don't re-ask: MSN, ANCC, Korea SICU → NY timeline, Daejeon, Hearst
  Award, six years comfort care, two botox products, no before/after photos.)

## Editing / previewing

Open `index.html` directly, or serve it (`python3 -m http.server`) for correct UTF-8.
Everything — CSS, SVG artwork (the `fs` mark, the injection-constellation face, the
hand-drawn Boerum Place map), and the small form script — lives in this one file, in
clearly commented sections. `docs/review-log.md` lists the few known open nits.
