Focal

Best for

• Optometrists. It's written to Medicare's eye test intervals, Ahpra's advertising rules (no clinical testimonials), the sunglasses safety standard and the end of card surcharges (see "Eye care: what we build in").
• Anyone fitting, testing or seeing people soon:
  • eyewear and sunglasses shops (Sundial: a frame finder and a builder with tints and the fund gap)
  • dentists (Brightside Dental: how soon to be seen, and same-day hours)
  • physios, podiatrists, audiologists and other allied health with urgent appointments
• Audiences: people due for an eye test, parents booking a child's first test, glasses buyers who want the full price, and anyone with a worrying eye right now.

Less suited to: a pharmacy (Remedy), a hospital, or anything that needs clinical records online.

Personality and voice

Calm and careful, the optometrist who tells you when you don't need new glasses.

• Headlines: "See it all, clearly." · "Your glasses, priced in full." · "Is it urgent? Here's how soon."
• Buttons: "Book an eye test" · "Build with this frame" · "Is it urgent?"
• Microcopy:
  • "Medicare covers a full eye test every 3 years under 65, and it's been long enough."
  • "Your fund pays about $250 on the spot; you pay $88."
  • "Go to emergency now. Call 000 or go to the nearest emergency department."
• Words to avoid: "free eye test" without saying who pays, "best optometrist in town", patient quotes or star ratings about care, "cure", and anything that sounds like a diagnosis.

Colour

Measured contrast (WCAG).

• Clear sight:
  • ink on paper 15.9:1
  • muted on paper 5.8:1 (5.3:1 on well)
  • rust on paper 6.3:1 (5.8:1 on well, 5.5:1 on its soft fill, 6.8:1 on card), white on rust 6.8:1
  • ink on lens 12.9:1; lens ink 6.7:1 (6.3:1 on its soft fill)
  • ok 6.5:1 (5.7:1 on lens soft), alert 6.5:1
• Low light:
  • ink 16.4:1
  • muted 7.5:1 (6.7:1 on card)
  • rust 9.4:1, text on rust 9.2:1, rust on its soft fill 8.6:1
  • lens ink 13.8:1 (11.3:1 on its soft fill)
  • ok 9.4:1, alert 8.0:1
• Closing card: text 14.5:1, body 11.0:1, rust em 8.4:1, ink on its button 8.8:1.
• Example dials: teal (Sundial, white on teal 6.8:1), plum (Brightside, 9.4:1) and spruce (Lumen, 8.0:1) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Prata, 400. Headlines, prices, the big total. A high-contrast serif, like the letters on a test chart.
• Body: Wix Madefor Text, 400–800. Reading, forms, buttons.
• Mono: PT Mono, 400. Times, prices in lists, frame details, labels.

The signature move: the lit words come into focus. They start blurred and faint, sharpen to rust, and a fine line draws in under them, like a lens clicking into place.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a lens-blue label; a sticky header with the lens mark; a large lens of fine concentric rings behind the hero that slowly breathes.
• Hero: copy on the left; the eye test booker on the right.
• Then: the frame finder full width; the glasses builder beside two notes (no upselling, fund claims on the spot); the urgent guide; questions; and a dark closing card with a pair of lenses that catch a glint of light.

Shape

• Soft: --r-s 8px, --r-m 14px, --r-l 24px, pill buttons.
• Lenses: circles drawn in CSS for the mark, the tag, the hero, the page heads, the frames and the closing card. No images needed.

Motion language

• Focus: the lit words sharpen from a blur, and the line draws in.
• Finder and builder: frames lift on hover and the picked one is outlined; the builder's total slides in when anything changes.
• Elsewhere: the hero lens breathes, the closing card's lenses catch a glint, sections reveal with a rise, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the blur, the breathing, the glint and the slides.
• Low light switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own practice, your own team and your real frames on the wall, photographed in daylight. The template draws its glasses in CSS, so nothing is borrowed. No stock "woman laughing in glasses", no eye chart clip art, no brand logos without the supplier's permission, and no patient quotes about care.

Signature components

• Eye test booker: .eyetest[data-eyetest] containing script[data-eye-data] (price, closed days, times, booked as [dayOffset, slotIndex], days, and optional yes, no, likely wording), input[data-age], select[data-last] (years since the last full test), input[data-symptoms], [data-eye-verdict], [data-eye-why], [data-eye-days], [data-eye-times] and [data-eye-msg]. Under 65 a full test is covered every 3 years, from 65 every year; ticking a change says "likely covered" and that it's confirmed on the day.
• Frame finder: .frames[data-frames] containing segmented filters [data-f-shape], [data-f-size], [data-f-material] (buttons with data-value), input[data-f-max] with [data-f-max-out], [data-f-count], .frames-none, and .frame cards (data-price, data-shape, data-size, data-material, and --frame for the colour) with a [data-pick-frame] button (a #id to scroll to, or a page to go to).
• Glasses builder: .specs[data-specs] with data-for (the finder's id) and script[data-specs-data] (frame), containing lens radios named <id>-lens with data-price, input[data-coat] with data-price, [data-frame-name], [data-specs-lines], [data-specs-total], input[data-fund], [data-fund-out] and [data-gap].
• Urgent guide: .urgent[data-urgent] containing script[data-urgent-data] (levels, 0 to 3, each a heading and a sentence), input[data-level] checkboxes, [data-urgent-head] and [data-urgent-out]; the guide sets data-now for styling.
• Supporting pieces: .plan-pair, .card, .facts (--n columns), .notice, .side-box, .checks, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a soft pill.
• Inner pages: .page-head (rings and a small pair of lenses), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: eyetest (covered, likely, when), frame (name, price), specs (total, gap, frame), urgent (level).
• Helper: Focal.refresh(root), and Focal.last, the latest detail of each event, for scripts that load afterwards.

Eye care: what we build in

We checked these for Australian optometrists in October 2026:

• Medicare eye tests. A comprehensive initial consultation is covered once every 36 months under 65 (item 10910) and once every 12 months from 65 (item 10911). A test sooner is covered when the optometrist documents a significant change in vision or new, clinically significant signs (items 10912 and 10913); symptoms alone aren't always enough, so the booker says "likely covered, confirmed on the day" rather than promising it. Children follow the same rules, with an extra assessment for ages 3 to 14 when it's needed.
• No clinical testimonials. Ahpra's advertising rules don't allow testimonials about symptoms, diagnosis, treatment or outcomes in advertising a regulated health service; comments on customer service are allowed. The template has no star ratings or patient quotes, and says why on the industry site.
• Registration. The footer names the Optometry Board of Australia (Ahpra), with room for registration numbers.
• Sunglasses. The Consumer Goods (Sunglasses and Fashion Spectacles) Safety Standard 2017 sets lens categories 0 to 4 and their labels; category 4 isn't suitable for driving. Sundial shows each pair's category.
• Urgent care. Sudden vision loss and chemical splashes go straight to emergency (rinse with water for 15 to 20 minutes on the way); new flashes or floaters and a red, painful eye are seen the same day. Every guide says it isn't a diagnosis.
• Prices and surcharges. Prices include GST, the health fund gap is an estimate that depends on cover, and there are no card surcharges, which end for eftpos, Mastercard and Visa on 1 October 2026.

These notes are design guidance, not medical or legal advice.

• Optometry MBS item use guide (Optometry Australia)
• MBS item 10910 (Department of Health)
• Testimonials: understand the requirements (Ahpra)
• Sunglasses and fashion spectacles mandatory standard (Product Safety Australia)
• Eye injuries: chemical burns (Better Health Channel)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do say when Medicare covers a test, and what it costs when it doesn't.
• Do price glasses in full, frame, lenses and coatings, before anyone books.
• Do send sudden vision loss and chemical splashes to emergency, in the first line.
• Don't use patient quotes, star ratings or before-and-after claims about care.
• Don't ask for a Medicare number or health details in a web form.
• Don't put text on lens blue in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Booker: labelled fields; the Medicare answer and the reason are announced as they change; days and times are buttons with aria-pressed and full spoken dates, and booked times are disabled.
• Finder: filters are buttons with aria-pressed; the match count is announced; the drawn frames are decorative and each card has its name, size, material and price as text.
• Builder: lens radios and coating checkboxes are labelled with their prices; each line, the total and the fund gap are text.
• Urgent guide: checkboxes, with the answer announced in words, not just colour.
• Forms: labelled fields, errors listed in an alert, linked to and marked on each field.
• Testing: responsive to 360px, and tested with motion on and off, in Clear sight and Low light.

How to make it yours