01

Foundations

Colour
Brand, neutrals and feedback
Token
{{ c.name }}{{ c.hex }}
Radius & elevation
Corners and shadows
Token
r 4
r 8
pill
e 1
e 3
Typography
14 styles · desktop & mobile · Montserrat headings, Open Sans text
Token
DESKTOP MOBILE
{{ ty.dLabel }} {{ ty.dSpec }}
{{ ty.mLabel }} {{ ty.mSpec }}
Icons
24px grid · 1.5px stroke · navy
Atom
{{ ic.name }}
02

Molecules

Button
3 types × 6 states · live demo on the left
Molecule
{{ s }} {{ r.name }}
{{ c.label }}
{{ c.n }}{{ c.label }}
{{ pbBtn.clock }}
Text input
Default · Focus · Filled · Error · Success · Disabled
Molecule
{{ inp.text }}
{{ inp.msg }}
Default
First name
Hover
First name
Focus
Ann
Filled
Anna
Error
anna@
Enter a valid email
Disabled
United Kingdom
{{ c.n }}{{ c.label }}
{{ pbInp.clock }}
Filter pill
Default · Hover · Pressed · Selected · Focus · Disabled
Molecule
Toric
{{ ps.label }}
Toric
Try it
{{ pillSummary }}
{{ c.n }}{{ c.label }}
{{ pbPill.clock }}
Checkbox & radio
Unchecked · Hover · Checked · Focus · Error · Disabled
Molecule
I accept the terms & conditions
Please accept the terms to continue
{{ s }} {{ r.name }}
{{ c.n }}{{ c.label }}
{{ pbCb.clock }}
Toggle
Off · Hover · On · Focus · Disabled
Molecule
Auto-reorder{{ liveTg.status }}
{{ g.label }}
{{ c.n }}{{ c.label }}
{{ pbTg.clock }}
Quantity stepper
Default · Hover · Pressed · Min · Max · Disabled — click to take over
Molecule
Boxes per eye
{{ n }}
Maximum 6 boxes per order
{{ liveQ.boxes }}{{ liveQ.price }}
{{ q.label }}
{{ q.v }}
{{ c.n }}{{ c.label }}
{{ pbQty.clock }}
Tooltip & tags
Hover the info icon · product tags
Molecule
Base curve (BC) Base curveThe curvature of the lens. You’ll find it on your prescription or lens box.
Multifocal Astigmatism −20% New Best seller
{{ c.n }}{{ c.label }}
{{ pbTip.clock }}
Alerts
Info · Success · Warning · Error · dismissible
Molecule
{{ a.title }}{{ a.body }}
{{ c.n }}{{ c.label }}
{{ pbAlerts.clock }}
Navigation aids
Breadcrumbs · pagination · checkout progress
Molecule
{{ st.n }} {{ st.name }}
{{ c.n }}{{ c.label }}
{{ pbNav.clock }}
Snackbar
Auto-dismiss after 4s · with action
Molecule
Address removed from your address book
{{ c.n }}{{ c.label }}
{{ pbSnack.clock }}
03

Organisms

Header
Basket count reacts to the quantity stepper
Organism
Free UK delivery over £39Same-day dispatch before 4pmRated Excellent on Trustpilot
Vision Direct
Search lenses, brands, solutions…
{{ c.n }}{{ c.label }}
{{ pbHdr.clock }}
Product card
Default · Hover · Loading — hover any loaded card
Organism
{{ p.name }} {{ p.tag }}
{{ p.brand }} {{ p.name }}
{{ p.reviews }}
{{ p.price }}{{ p.was }}
Quick add
{{ c.n }}{{ c.label }}
{{ pbCard.clock }}
Accordion
Collapsed · Expanded · one open at a time
Organism

{{ f.a }}
{{ c.n }}{{ c.label }}
{{ pbAcc.clock }}
Address select tile
Unselected · Hover · Selected · Focus · Error · Disabled
Organism
Anna Clarke12 Baker Street, London, NW1 6XE
Add a phone number for the courier
Edit
{{ a.label }}
Anna Clarke12 Baker Street, London
{{ c.n }}{{ c.label }}
{{ pbAddr.clock }}
Payment tiles
Payment section · switch method with the radios · Order type disables Apple Pay & PayPal
Organism

Payment method

{{ pt.name }} Ending in 4567+ Add card
Place Order
By selecting ‘Place Order’, you agree to our Terms and Conditions
{{ pt.tip }}

Order type

One time purchase
Subscribe and save
You will receive your products every:
Three months
3 reasons to subscribe: Save 5% on all recurring orders. FREE delivery on all orders over 49€. Cancel anytime.
{{ payNote }}
{{ c.n }}{{ c.label }}
{{ pbPay.clock }}
Payment tiles · all variants
4 methods × Default · Hover · Selected · Focus · Disabled (subscription)
Organism
{{ row.name }}
{{ pc.label }}
{{ pc.name }} Ending in 4567
Place Order
By selecting ‘Place Order’, you agree to our Terms and Conditions
Always available
 Hover tooltip: “{{ pc.tip }}”
Modal
Two CTA · scrim · scale-in
Organism
Delete this address?

12 Baker Street will be removed. Subscriptions using it will switch to your default address.

{{ c.n }}{{ c.label }}
{{ pbModal.clock }}
Prescription table
Row hover · OD / OS
Organism
EYEPWRBCDIACYLAXIS
{{ r.eye }}{{ r.pwr }}{{ r.bc }}{{ r.dia }}{{ r.cyl }}{{ r.axis }}
Empty state · No saved prescriptions Add one at checkout and we’ll remember it for next time.
Cookie banner
Slides up on load · Accept dismisses
Organism
We value your privacyWe use cookies to improve your experience and show relevant offers. Cookie policy
{{ c.n }}{{ c.label }}
{{ pbCookie.clock }}
04

Motion

{{ e.name }}{{ e.spec }}
 Standard for most UI; Emphasised for things entering; Spring for confirmations (ticks, badges, selections); Exit for dismissals.
{{ c.n }}{{ c.label }}
{{ pbMotion.clock }}