Healthy Vision Hub brand guide

Construction

A pair of tall spectacle lenses that also form an H, a lemon tint along the bottom of each lens, and a small sun rising in the corner. It is built on a 64-unit grid; strokes are 4 units, so they land on whole pixels at 32 px.

• Spectacles

  Two tall, soft lenses joined by an arched bridge.

• An H

  The lenses are the uprights; the bridge is the crossbar. H for Healthy and Hub.

• And a “hi”

  The right lens and the sun give a friendly second reading.

Lockups, clear space and sizes

Lockup maths: wordmark size = 0.55 × mark height; gap = 0.25 ×; total width = 5.5 × mark height. Clear space: keep 0.25 × the mark height free on every side.

¼M

Minimum sizes

Full mark: 24 px and up Shown at 24, 32 and 48 px.

Small-size mark: 16–23 px Thicker strokes, no tints. Shown at 16, 20 and 23 px.

Horizontal lockup: 154 px wide The smallest it goes (M = 28 px).

Variants and backgrounds

On White and the light tints use the Grape tile. On Night Ink or Grape, use the tile-less reversed mark.

Preview the lockups on

White

Lemon Cream

Night Ink

Grape

On White: logo.svg and logo-stacked.svg, the Grape tile mark with a Night Ink and Grape wordmark.

• 

  Primary lockup

  logo.svg

  White, Lemon Cream, Lilac Mist, Kiwi Mist and Lemon.

• 

  Stacked lockup

  logo-stacked.svg

  Brand guide, packaging, social avatars and the case.

• 

  Reversed lockup

  logo-reverse.svg

  Night Ink and Grape: the tile-less mark with a White and Lemon wordmark.

• 

  Stacked reversed

  logo-stacked-reverse.svg

  Stacked lockup for Night Ink and Grape.

• 

  Mark

  mark.svg

  App icon, 32 px favicon and the apple-touch icon.

• 

  Small-size mark

  mark-small.svg

  16 to 23 px only: thicker strokes and no tints.

• 

  Tile-less reversed mark

  mark-reverse.svg

  On Night Ink or Grape, always. Never the Grape tile on dark.

• 

  One-colour mark

  mark-mono.svg

  Engraving, embossing and print. Night Ink on light, White on dark; tints left out.

• Lens glyph

  lens-glyph.svg

  The pair counter: Grape on Lilac Mist, Lemon on Grape.

Misuse

• Don’t fill the lenses.

• Don’t add temple arms.

• Don’t move the sun over the bridge.

• Don’t put the Grape tile on Night Ink.

• Don’t recolour, outline, rotate or stretch the mark.

• healthy vision hub

  Don’t let the wordmark use automatic optical size.

Palette

White and soft tints carry every page; Grape does the doing, Lemon brings the sun and Kiwi adds a little fresh. Lemon and Kiwi are fills, never text on light backgrounds.

Brand

• Aa

  Grape

  #5B2BD1Copy: copy the Grape hex code

  RGB 91 43 209
  HSL 257 66% 49%

  Primary colour and the only CTA fill. Links, eyebrow times, icons, the logo tile and every state indicator.

  • White on Grape7.75:1AA text
  • Grape on White7.75:1AA text
• Aa

  Grape Deep

  #4519AECopy: copy the Grape Deep hex code

  RGB 69 25 174
  HSL 258 75% 39%

  CTA hover and pressed fill, and link hover.

  • White on Grape Deep10.48:1AA text
  • Grape Deep on White10.48:1AA text
• Aa

  Night Ink

  #21133ACopy: copy the Night Ink hex code

  RGB 33 19 58
  HSL 262 51% 15%

  Aubergine ink for body and headings, dark blocks and the 4 px offset under buttons.

  • Night Ink on White17.23:1AA text
  • Lemon on Night Ink14.26:1AA text
• Aa

  Dusk Grey

  #5F5675Copy: copy the Dusk Grey hex code

  RGB 95 86 117
  HSL 257 15% 40%

  Muted text: captions, per-pair prices, helper text and eyebrow labels.

  • Dusk Grey on White6.83:1AA text
  • Dusk Grey on Lilac Mist5.87:1AA text
• Aa

  Lemon

  #F4F03FCopy: copy the Lemon hex code

  RGB 244 240 63
  HSL 59 89% 60%

  The sun accent. A fill on light surfaces, always carrying Night Ink content.

  • Night Ink on Lemon14.26:1AA text
  • Lemon on White1.21:1Decorative
• Aa

  Kiwi

  #9BD85ACopy: copy the Kiwi hex code

  RGB 155 216 90
  HSL 89 62% 60%

  Fact tags such as “Wider fit” and “Ages 4–10” and the bundle sticker, with a 2 px ink edge.

  • Night Ink on Kiwi10.14:1AA text
  • Kiwi on White1.70:1Decorative

Surfaces

• Aa

  White

  #FFFFFFCopy: copy the White hex code

  RGB 255 255 255
  HSL 0 0% 100%

  Daylight White: at least 70% of every viewport, plus product image wells.

  • Night Ink on White17.23:1AA text
  • White on Grape7.75:1AA text
• Aa

  Lemon Cream

  #FCF9B8Copy: copy the Lemon Cream hex code

  RGB 252 249 184
  HSL 57 92% 85%

  Warm surface: story sheet, menu, shop header, summaries and notices.

  • Night Ink on Lemon Cream15.90:1AA text
  • Dusk Grey on Lemon Cream6.30:1AA text
• Aa

  Lilac Mist

  #F0EBFFCopy: copy the Lilac Mist hex code

  RGB 240 235 255
  HSL 255 100% 96%

  Cool surface: price and accordion tiles, cart ground and segmented tracks.

  • Night Ink on Lilac Mist14.79:1AA text
  • Grape on Lilac Mist6.65:1AA text
• Aa

  Kiwi Mist

  #E9F8CCCopy: copy the Kiwi Mist hex code

  RGB 233 248 204
  HSL 80 76% 89%

  Fresh surface for the Rest Window and bento tiles.

  • Night Ink on Kiwi Mist15.39:1AA text
  • Dusk Grey on Kiwi Mist6.10:1AA text

Utility

• Aa

  Lilac Haze

  #C9BEEBCopy: copy the Lilac Haze hex code

  RGB 201 190 235
  HSL 255 53% 83%

  Muted text on Night Ink only.

  • Lilac Haze on Night Ink9.88:1AA text
  • Grape on Lilac Haze4.44:1UI only
• Field Line

  #857AA3Copy: copy the Field Line hex code

  RGB 133 122 163
  HSL 256 18% 56%

  The 2 px idle border on every input, checkbox, chip and option tile.

  • Field Line on White3.95:1UI only
  • Field Line on Lemon3.27:1UI only
• Aa

  Berry

  #9C2A6BCopy: copy the Berry hex code

  RGB 156 42 107
  HSL 326 58% 39%

  Error text and borders.

  • Berry on White7.10:1AA text
  • Berry on Lilac Mist6.10:1AA text
• Aa

  Kiwi Deep

  #3D6B12Copy: copy the Kiwi Deep hex code

  RGB 61 107 18
  HSL 91 71% 25%

  Success and savings text.

  • Kiwi Deep on White6.34:1AA text
  • Kiwi Deep on Lilac Mist5.45:1AA text

Contrast pairs

Result labels: AA text (4.5:1 and up) · UI and large text only (3:1 and up) · Decorative only.

Every pair here is calculated live with the WCAG contrast formula.

Never pairs

These fail. Lemon and Kiwi are fills, never text on light backgrounds, and nothing white sits on them.

• Aa

  Lemon on White1.21:1

  Lemon is a fill on light surfaces: never text, an icon or an indicator.

  Decorative only
• Aa

  Kiwi on White1.70:1

  Kiwi is a fill only, with Night Ink text and a 2 px ink edge.

  Decorative only
• Aa

  Kiwi on Lilac Mist1.46:1

  Not even on tiles. Kiwi is never the only signal of a state.

  Decorative only
• Aa

  White on Lemon1.21:1

  Never white text on Lemon.

  Decorative only
• Aa

  White on Kiwi1.70:1

  Never white text on Kiwi.

  Decorative only
• Aa

  Grape on Night Ink2.22:1

  No Grape buttons or Grape logo tile on dark. Use the Lemon CTA and the tile-less mark.

  Decorative only
• Aa

  Lemon on Lemon Cream1.12:1

  No lemon dividers or details on cream.

  Decorative only
• Aa

  Lilac Mist on White1.16:1

  Tinted cards are not boundaries. Interactive tiles carry the Field Line border.

  Decorative only

Display scale · Bricolage Grotesque

Confident grocery-shelf packaging: ink-trapped, slightly quirky, set left with a 16ch measure. Sizes are fluid; “Now” is measured in your browser.

Reading and UI · Figtree

A warm, open sans with round dots that stays readable in long product copy and forms.

The opsz-96 wordmark rule

Headings use automatic optical sizing. The wordmark alone locks font-variation-settings: 'opsz' 96 with −0.02em tracking.

Buttons

Chunky and pressable: 52 px tall (44 px small), radius 14, never a pill. Grape stays the primary on every page.

• Primary

  Grape fill, white text, ink offset

  • DefaultShop now
  • HoverShop now
  • PressedShop now
  • FocusShop now
  • DisabledShop now

• Secondary

  Lemon fill, ink text, 2 px ink edge

  • DefaultBuy now
  • HoverBuy now
  • PressedBuy now
  • FocusBuy now
  • DisabledBuy now

• Ghost

  2 px ink edge, Lilac Mist on hover

  • DefaultSee all
  • HoverSee all
  • PressedSee all
  • FocusSee all
  • DisabledSee all

• On Night Ink

  Lemon fill, Grape offset

  • DefaultShop now
  • HoverShop now
  • PressedShop now
  • FocusShop now
  • DisabledShop now

• Small

  44 px, for cards and toasts

  • DefaultAdd to cart
  • HoverAdd to cart
  • PressedAdd to cart
  • FocusAdd to cart
  • DisabledAdd to cart

Inputs

52 px tall with a 2 px Field Line border. Focus adds a Grape border and the 3 px ring; errors use Berry with a warning icon; success uses Kiwi Deep with a check.

The four fields below are static examples of the idle, focus, error and success states.

Selected states and quantity

Selected = Grape fill, white text and a Lemon check tile. Lemon and Kiwi never signal a state on light surfaces.

Tags and stickers

Kiwi or Lemon fills with Night Ink 800 uppercase text, radius 8 and a 2 px ink edge, sitting inline.

Tile accordion

Radius scale

No square corners, no pills and no circles. The suns are the only circles, and photos are never round.

• 6Checkboxes
• 8Badges, swatches
• 12Chips, icon buttons
• 14Buttons, inputs
• 16Accordion tiles, thumbs
• 24Cards, photos
• 32Hero panel, bento
• 40Inset containers
• 48Rising sheet tops
• ArchArch photos (4:5)
• PackPack tiles

Time-stamp eyebrows

A 20 px sun-position glyph, the time in Figtree 800 Grape, a middle dot and a 600 Dusk Grey label. Seven per home page, in clock order, never numbered.

Filter stripes

Four full-width bars, drawn in the next section’s colour at the foot of the current one, so each block dissolves into the next like light through a blind. At most five per page.

Sun-path arc

A half-ellipse in a solid 4 px Grape line with round caps and a non-scaling stroke. Three 36 px Lemon suns with a 2 px ink edge sit at 18%, 50% and 82%.

Arch frames

• 4:5 photos with border-radius: 999px 999px 28px 28px.
• Keep the subject in the upper two-thirds so the arch never cuts a head.
• At most one arch per section.
• Never a circle, and never more than one arch side by side.

Lens-glyph counter

The logo’s lens pair at 20 × 12 px with a 2 px stroke: one glyph per pair, 4 px apart, aria-hidden and always next to text such as “3 pairs”.

Rest Window

The sprite · 44 icons

• searchmagnifying-glass
• baghandbag
• menulist
• closex
• arrow-rightarrow-right
• arrow-leftarrow-left
• caret-downcaret-down
• caret-rightcaret-right
• plusplus
• minusminus
• checkcheck
• locklock-simple
• trucktruck
• packagepackage
• chatchat-circle-dots
• phonephone
• mailenvelope-simple
• pinmap-pin
• warningwarning-circle
• infoinfo
• rulerruler
• clockclock
• shieldshield-check
• returnarrow-counter-clockwise
• glasseseyeglasses
• sunsun
• moonmoon
• sun-horizonsun-horizon
• heartheart
• starstar
• timertimer
• leafleaf
• kidsbaby
• giftgift
• cardcredit-card
• check-circlecheck-circle
• smileysmiley
• monitormonitor
• dropdrop
• carehand-heart
• sparklesparkle
• storestorefront
• tagtag
• peopleusers-three

Icons: Phosphor Icons, Bold weight, MIT licence. Use ico('name') from the sprite.

Do

Real people in real daylight, warm and candid.

• 

  Real daylight and a real laugh.

• 

  Warm whites, mid-activity.

• 

  A range of ages, candid and bright.

Don’t

No blue screen glow, eye close-ups, clinics, round crops or illustrations. The examples below are our own photos, treated wrongly on purpose.

• 

  Round crops.

• 

  Blue screen glow or colour overlays.

• 

  Dark, moody desks.

• No eye exams or clinics, no eyeball close-ups, and no illustrations, 3D renders or AI images standing in for photos.

  Clinics, eye close-ups and fake photos.

Treatment

• Crop to a 4:5 arch, a 1:1 card or a 16:10 tile.
• A light lift only: +5 warmth, +5 exposure.
• Unsplash free-license photos only, credited below.
• Descriptive alt text; decorative images get alt="".
• No visible eyewear brand logos.
• No duotones or colour overlays.

Claims

Check every spec against supplier documents before it goes live: UV400, filter percentage, weight, materials and dispatch time.

Rewrites

• Not this

  “Protects your eyes from harmful blue light.”

  Say this

  “Zero-power lenses with a blue-light filtering coating and a light warm tint.”

• Not this

  “Clinically proven to improve your sleep.”

  Say this

  “Screens down, glasses off, good night. A nice wind-down habit.”

• Not this

  “Blocks 100% of blue light.”

  Say this

  “Blue-light filtering coating. The lens details are on every product page.”

Claim checker