Place the full customer review here. Keep the text easy to read and let the card grow with the length of the story.
Customer name
Original review platform
Eslite brand book
Enter the team password to open the website component guide.
Team review access. This front-end gate is not secure storage for private information.
The Eslite website playbook
A shared direction for how Eslite looks, reads, and works online. Built around one idea: let customer evidence lead, and give every page a clear purpose.
Working guide for review with Edson. These rules apply to the new clinic page; existing sales pages are not being redesigned in this release.
Design direction
Warm, clear, and evidence-led. Keep Eslite’s orange, teal, and Aileron type. Use pale blue for calm section backgrounds and white for content that needs sustained reading.
Hierarchy: evidence before decoration
Use one main heading. Give it a short introduction, then show a real story. Avoid a large campaign banner before the content a clinic visitor came to see.
Contrast: guide attention
Dark teal is for headings, selected filters, and strong actions. White cards with dark text are the default for long reviews. Do not make every section equally loud.
Harmony: repeat the same decisions
Use the same type scale, spacing, card corners, and filter states throughout a page. Change the content, not the visual rules, from section to section.
Color
Keep orange as a recognizable accent, not the default color for small text. Use dark teal or charcoal for readable copy. Orange with white text is not an approved small-text pairing.
Eslite teal
#3A5F6FEslite orange
#F2784BPale blue
#EBF4F8White
#FFFFFFBody text and controls need at least 4.5:1 contrast. Large text needs 3:1. Use #333333 for body copy on white, and white for text on #3A5F6F. Check new color pairs before use.
Typography
Aileron Regular for reading. Aileron Bold for hierarchy. Let size and weight do the work; avoid all-caps paragraphs and extra-wide letter spacing.
Stories worth reading.
A clear section heading
Body text stays at 18px with 1.6 line height. Keep paragraphs short enough to scan, but preserve each customer’s words.
Main heading: 32–56px. Section heading: 24–32px. Card heading: 18px. Body: 18px. Controls: 16px. Supporting labels: 14px. Keep long text within 65–75 characters per line.
Spacing & layout
Use an 8px spacing scale. Keep related content close and separate sections clearly. Mobile gets 16px page gutters; desktop content stops at 1120px.
Use 8px between filters, 16–24px between cards, 20–28px inside cards, and 64px between sections. Written reviews use one column on mobile and two on desktop, with natural card heights.
Components
The examples below use the same CSS as the clinic page. They are a reference for future work, not a new set of unrelated styles.
Written-review card
Layout example only; not a customer testimonial.
Keep each customer’s full words and paragraph breaks. Do not rewrite a quote into a stronger health claim. Show its topic and source context; leave order IDs out. Use only the photo supplied with that review, with a link to open it at full size.
Before-and-after cards: keep the two photos side by side, show both labels, and place the customer name and full story below. Do not crop away the result. Browsing controls must not cover the photos or text.
Video stories: use a consistent portrait frame, a clear title, and the creator’s name. Keep playback under the visitor’s control. Do not autoplay with sound.
Filter states
Showing 1 stories
Layout example only; not a customer testimonial.
No reviews match this filter yet.
Each story belongs to one topic; All Reviews shows every story. White means available and dark teal means selected. Keep the result count, keyboard focus, and empty state. Expose the selected state to assistive technology, not just through color.
Clinic vs. sales pages
These pages serve different needs. A clinic visitor is browsing while waiting for an appointment. A sales-page visitor may be ready to buy. Do not use one layout for both.
| Element | Clinic QR page | Sales pages |
|---|---|---|
| Navigation | Links within the page only. No store navigation or cart. | Normal store navigation and cart are allowed. |
| Purchase actions | No shop buttons, pricing blocks, or sticky sales CTA. | Use clear purchase actions at decision points. |
| Page ending | End with reviews and a back-to-top link. | Normal store footer and useful shopping links. |
| Opening | A short introduction followed by customer evidence. | A focused value proposition with a relevant next step. |
Before a page ships
- Check the page on a narrow phone and a wide desktop. Nothing should cause page-wide horizontal scrolling.
- Test every filter, link, and video. Make sure keyboard focus is visible and touch targets are at least 44px high.
- Keep headings in order and give photos meaningful descriptions. Test long reviews and empty results.
- Confirm whether the page is for clinic reading or sales. Only show the actions that belong to that purpose.
- Review any new component against this guide before repeating it across the site.
Clinic QR files
Use this QR code on clinic posters. It opens the standalone reviews page, with no shopping links or pricing.
Keep the white border intact. Use the SVG in print artwork, and test the final printed size with a phone before distributing posters.