1234 Ortho-K Vision Care — website design concepts
Five concepts, same structure, different style. Open locally (e.g. npx serve .) so Google Fonts and relative CSS load.
A · Friendly Notebook
Leads with: Voice · Design system on claude.ai
Reads like a warm, handwritten note from Dr. Woo to a worried parent — plain paper, ink, and one warm accent color, designed to feel personal and reassuring rather than clinical.
English homepage · 繁體中文 homepage
All 26 preview cards
- 3-step How it works block
- Booking call-to-action band
- Color
- Contact row
- Cover
- Doctor card
- FAQ accordion
- Footer
- Form field set
- Hero block
- Homepage Traditional Chinese desktop
- Homepage Traditional Chinese mobile
- Homepage desktop EN
- Homepage mobile EN
- Icons
- Imagery
- Language switcher
- Light-night toggle
- Location card
- Primary button
- Secondary button
- Shape
- Spacing & Layout
- Top navigation + mobile menu
- Typography
- Voice & Tone
B · Grid-Paper Classroom
Leads with: Pattern · Design system on claude.ai
Built around the exercise-book grid pattern many Chinese-speaking parents grew up writing in, with red-pen checkmarks and stickers, so the site feels familiar and trustworthy from the first glance.
English homepage · 繁體中文 homepage
All 28 preview cards
- 3-step How it works block
- Booking call-to-action band
- Checked list
- Color
- Contact row
- Cover
- Doctor card
- FAQ accordion
- Footer
- Form field set
- Grid pattern
- Hero block
- Homepage Traditional Chinese desktop
- Homepage Traditional Chinese mobile
- Homepage desktop EN
- Homepage mobile EN
- Icons
- Imagery
- Language switcher
- Location card
- Primary button
- Secondary button
- Shape
- Spacing & Layout
- Sticker badge
- Top navigation + mobile menu
- Typography
- Voice & Tone
C · Picture-Book
Leads with: Illustration · Design system on claude.ai
Soft, hand-illustrated scenes tell your child's ortho-k story — asleep with lenses in, waking up seeing clearly, off to school — making an unfamiliar treatment feel gentle and easy for a young child to picture.
English homepage · 繁體中文 homepage
All 27 preview cards
- 3-step How it works block
- Booking call-to-action band
- Color
- Contact row
- Cover
- Doctor card
- FAQ accordion
- Footer
- Form field set
- Hero block
- Homepage Traditional Chinese desktop
- Homepage Traditional Chinese mobile
- Homepage desktop EN
- Homepage mobile EN
- Icons
- Illustrated photo frame
- Imagery
- Language switcher
- Location card
- Primary button
- Secondary button
- Shape
- Spacing & Layout
- Story scenes
- Top navigation + mobile menu
- Typography
- Voice & Tone
D · Calm Clinical
Leads with: Photography · Design system on claude.ai
Lots of white space, one calm teal, and real photography project medical credibility — built for parents who want visible proof this is a serious, specialist-led treatment.
English homepage · 繁體中文 homepage
All 27 preview cards
- 3-step How it works block
- Booking call-to-action band
- Color
- Contact row
- Cover
- Doctor card
- FAQ accordion
- Footer
- Form field set
- Hero block
- Homepage Traditional Chinese desktop
- Homepage Traditional Chinese mobile
- Homepage desktop EN
- Homepage mobile EN
- Icons
- Imagery
- Language switcher
- Location card
- Photo block
- Primary button
- Secondary button
- Shape
- Spacing & Layout
- Top navigation + mobile menu
- Trust strip
- Typography
- Voice & Tone
E · Modern Practice
Leads with: Convention · Design system on claude.ai
The familiar structure of a trusted optometry practice website, modernized with navy, stone, and brass — for parents who want something that already looks and feels like a real doctor's office, just more current.
English homepage · 繁體中文 homepage
All 27 preview cards
- 3-step How it works block
- Appointment card
- Booking call-to-action band
- Color
- Contact row
- Cover
- Doctor card
- FAQ accordion
- Footer
- Form field set
- Hero block
- Homepage Traditional Chinese desktop
- Homepage Traditional Chinese mobile
- Homepage desktop EN
- Homepage mobile EN
- Icons
- Imagery
- Info bar
- Language switcher
- Location card
- Primary button
- Secondary button
- Shape
- Spacing & Layout
- Top navigation + mobile menu
- Typography
- Voice & Tone