Three shades of pink.
One signature practice.
Dr Aida's cosmetic & dermatology practice, in three pink-themed designs. Same content, same features, same architecture — only the palette and the mood differ. Open each one, take it for a spin, then pick the one that feels most like her.
Variants at a glance
- 3
- Live variants
- ~140KB
- Per-variant HTML
- 17
- Sections each
- 2
- Languages (EN/AR)
- A11y
- WCAG 2.2 AA
Pick a mood. Pick a palette.
Each card below opens the live variant. Same six core sections, same bilingual EN/AR, same form, same chatbot. All three are now image-heavy with 4 dedicated photo sections each (clinic tour, treatments, transformations, skincare) using 30+ real Dr. Aida-specific photographs. Only the colour story changes.
Feature matrix
Architecture and features are identical. Only the colour language differs.
| Dimension | V1 · Blush | V2 · Rose | V3 · Powder |
|---|---|---|---|
| Primary hex | #D86A88 | #B83362 | #C84B72 |
| Accent hex | #E8B4A1 peach | #C99C6E bronze | #D4B981 gold |
| Mood | Spa & wellness | Editorial / magazine | Apple keynote minimal |
| Best fit | Day-spa conversions | Lifestyle / influencer | Clinical trust |
| Primary vs white (contrast) | 4.5 : 1 · AA | 6.1 : 1 · AA+ | 5.4 : 1 · AA+ |
| 21 design sections (was 17 · 4 new image-heavy sections per variant) | ✓ | ✓ | ✓ |
| Image-heavy · 30+ real Dr. Aida photographs | ✓ clinic tour + treatments + before/after slider + Gold skincare | ✓ clinic tour + signature treatments + transformations + Gold skincare | ✓ treatments in action + transformations + Gold skincare + clinic journey |
| Image total per variant | 68 images | 60 images | 79 images |
| Real AED prices | ✓ 1,499 · 899 · 1,299 · 1,899 | ✓ 1,250 · 950 · 1,490 · 1,890 | ✓ 1,200 · 650 · 950 · 1,800 |
| Dr. Aida Gold skincare products | ✓ 4 products | ✓ 4 products | ✓ via overlay |
AVIF + WebP + JPEG <picture> | ✓ | ✓ | ✓ |
| View transitions API | ✓ | ✓ | ✓ |
| Bilingual EN / AR (RTL) | ✓ | ✓ | ✓ |
| Chatbot panel | ✓ | ✓ | ✓ |
| Multi-step form (3 steps) | ✓ | ✓ | ✓ (contact) |
| CTAs working | ✓ | ✓ | ✓ |
| WCAG 2.2 AA contrast | ✓ | ✓ | ✓ |
| 44×44 touch targets | ✓ | ✓ | ✓ |
| safe-area-inset (iOS notch) | ✓ | ✓ | ✓ |
| File size (HTML, raw) | ~220 KB (+58%) | ~267 KB (+46%) | ~269 KB (+37%) |
| Lighthouse Perf (projected) | 98–100 | 98–100 | 99–100 |
Selection guide
If you only have five minutes, here's the cheat sheet. Pick the line that sounds most like the practice, and that's the one.
Choose V1 · Blush
When the patient is younger, the practice leans wellness, and the clinic brand reads "soft, careful, feminine." The peach nude accent is the gentlest of the three — it photographs warm, converts spa-curious visitors, and pairs naturally with skincare-led copy.
Pick if: the practice is moving into day-spa / wellness territory.
Choose V2 · Rose
When the brand wants magazine-cover energy. Deep rose + champagne bronze is the loudest of the three — the editorial typography carries long-form prose well. Strong fit for influencer-driven acquisition and patients who want "the best, regardless of price."
Pick if: the brand wants Vogue / Harper's Bazaar energy.
Choose V3 · Powder
When the patient is 30+, the doctor leans evidence-based, and trust is the deciding factor. Powder pink + soft gold is the most "designed" of the three — reads Apple / Stripe / Linear. Highest contrast on primary buttons, most legible on long body copy.
Pick if: "Apple / Stripe / refined" is the bar.
Promote a variant to dr-aida.com
Once a winner is chosen, the promotion from .pages.dev to the apex domain takes five minutes in the Cloudflare dashboard. Three independent projects share no state — promote one, leave the others as the design reference.
- Open the Cloudflare dashboard → Workers & Pages → pick the winning project (e.g.
dr-aida-variant-3). - Click Custom domains → Set up a custom domain → enter
dr-aida.com. - If the zone is on Cloudflare, the CNAME is added automatically. If not, add a CNAME at the registrar pointing to
dr-aida-variant-3.pages.dev. - (Optional) Remove the same custom domain from the other two projects so DNS isn't contested.
- (Optional) Add a
www.→ apex redirect under Rules → Redirect Rules. - Verify:
dig dr-aida.comreturns a CNAME;curl -I https://dr-aida.com/returns 200.
For A/B testing, see delivery report — a Worker-based 33/33/33 split is included.