← Live site Design notes tokens.json glow.css

Glow UI framework

Design tokens, components, icons and fonts measured from the original Glow design. The website, the Affinity build and the PhotoCraft build all read the same tokens.json, so colours, type, radii and icons stay identical everywhere.

Colour

• ink#111111Headlines, primary text, icons
• ink-strong#0B0B0BPrimary buttons
• text#1E1E1EField values
• text-muted#555555Intro paragraph, secondary copy
• text-subtle#6A6A6AFeature descriptions
• text-faint#8A8A8APlaceholders, inactive tabs
• eyebrow#3A3A3AUppercase eyebrow labels
• line#E8E8E8Borders of pills, rings, search bar
• line-soft#EFEFEFCard borders, dividers inside the phone
• divider#DDDDDDVertical dividers between features
• surface#FFFFFFCards, pills, search bar, badge
• canvas-top#EEEEEEPage background, top of gradient
• canvas#F6F6F6Page background from ~450px down
• strip#FBFBFBBrand strip
• tile#EFEDEBWarm service tile
• btn-primary#000001Sign Up button (measured)
• btn-search#111214Hero Search button (measured)
• btn-app#060606App Book buttons (measured)
• field#FEFEFESearch bar, app search field, badge (measured)
• surface-soft#F7F7F7Location pill, phone screen (measured)
• ring-fill#FBFBFBFeature icon rings (measured)
• card#FCFCFBApp listing cards (measured)
• on-dark#FFFFFFText on primary buttons

Type

Display text uses Glow Display, a font traced from the design's own lettering with kerning measured from the design. It covers the headline's letters plus the badge's 0 1 +; other display text falls back to Libre Caslon Display. Body text is Figtree, the closest match the font finder found.

• display-xlSearching and booking73.4px / 74 — Hero headline
• display-lSearching and booking64px / 64 — Wordmark
• display-mSearching and booking25px / 28 — Badge numeral (measured with glyphfont.py)
• display-sSearching and booking21px / 24 — App screen title
• body-lSearching and booking18.5px / 30 — Intro paragraph
• titleSearching and booking17px / 22 · 500 — Feature titles
• bodySearching and booking16px / 22 — Nav links, buttons
• body-sSearching and booking15px / 20 — Field text, pills
• labelSearching and booking14px / 22 — Feature descriptions
• eyebrowSearching and booking13px / 14 — Section eyebrow
• app-titleSearching and booking11.5px · 500 — App section heading
• app-bodySearching and booking9.3px — App body / placeholders
• app-captionSearching and booking8.5px — Tile labels, meta

Radius

• pill999px
• xl26px
• l18px
• m10px
• s8px
• device52px
• device-screen42px

Buttons & pills

Search bar

Features

• SearchFind the perfect
  service
• BookInstant booking
  in seconds
• EnjoyFeel amazing,
  every time
• TrustedVerified reviews
  you can trust

App components

Facials

Nails

Brows

Hair

Makeup

The Facial Room

★ 4.9 (128) · Surry Hills

Signature Glow Facial

$149

Book

TRUSTED BY1000+HAPPY CLIENTS

Icons

Traced from the design with tools/slicer.py (potrace at 8×). Each is a <symbol id="gl-NAME"> in icons.svg; colour follows CSS color.

• logo_glow
• logo_sparkle
• nav_pin
• nav_chevron
• h1_sparkle
• search_icon
• search_pin
• search_chevron
• feat_search
• feat_book
• feat_enjoy
• feat_trusted
• status_bars
• status_wifi
• status_battery
• app_search
• app_filter
• tile_facials
• tile_nails
• tile_brows
• tile_hair
• tile_makeup
• card_bookmark
• card_star
• tab_home
• tab_search
• tab_bookings
• tab_favourites
• tab_profile
• badge_sparkle

Brand logos

Split out of the logo strip into separate vector components. Third-party trademarks: get permission before using them.