Trieu Nails London · Homepage Build Spec

Developer hand-off — new homepage

Rebuild the Trieu Nails homepage in Elementor to match the live design mockup linked below. Build it natively with Elementor widgets (not embedded raw HTML) so the client can edit content afterwards. This doc contains every colour, font, section, copy line, link and image asset you need.

◆ The single source of truth — click to open the live design View the homepage design → build to match it exactly.
⚙️
Workflow: build on a new draft page (“Home v2”), review, then set as the front page (Settings → Reading) and keep the old homepage as a draft as a rollback. The existing site header already matches the design — reuse it. Focus is the page body + footer restyle.
1

Global design tokens

Set as Elementor Global Colors / Fonts.

Colours

TokenHexUsage
Charcoal#494B4FBody text / headings
Mint#7CFDCEPrimary buttons, accents, footer detail
Deep Mint#229A80Links / small text on white (contrast)
Sky#C6ECFBSoft section backgrounds
Mid Grey#98999ECaptions / secondary
Footer Grey#474C50Footer + careers band background
White#FCFEFFPage background (slightly cool)

Fonts

  • Headings: Playfair Display (Google). Weights 400/500/600; use italic for accent words (e.g. “Obsessed”).
  • Body / UI: Jost (Google) — or Montserrat.
  • Buttons & eyebrow labels: uppercase, letter-spacing ~0.15em.
Mockup uses “Didot” (Mac system) for display — Playfair Display is the web-safe equivalent already reflected in the intended look.
2

Page structure (top → bottom)

11 sections + footer.
  • Hero (2-col: copy + image)
  • Scrolling word strip (optional marquee)
  • 3 photo tiles (Services / Contact Us / Nail Designs)
  • “Excellence in nail care” (2-col: image + text)
  • Services & prices (menu list + CTA)
  • Shades — by season (4 groups)
  • Shades — by mood (4 groups)
  • Reviews (3 testimonials)
  • Careers band (grey, full-width)
  • Visit us (2-col: details + Google Map)
  • SEO paragraph (centred)
  • Footer (grey, 5-col)
3

Hero

2 columns, white background.
  • Left: eyebrow label (Deep Mint, uppercase) · H1 (Playfair, “Obsessed” = mint italic) · intro text · 2 buttons · optional 3 stat items.
  • Right: Image = hero (marble/chrome nails) — client to supply file (see Assets). Radius ~6px.
Eyebrow
East London's leading nail bar · Roman Road
H1
Nailed once. Obsessed forever.
Intro
A calm, considered nail studio where precision meets ritual. Manicures, pedicures and lasting gel finishes — done properly, by hands that care.
ButtonStyleLink
Book an appointmentMint bg / charcoal text/book/
View the menuOutline/menu/
Stats (optional): “4.9★ — Google & Trustpilot” · “21 days — gel wear” · “Since 2002 — 20+ years on Roman Road”.
4

3 photo tiles

Full-width, 3 equal columns, gap ~6px.
  • Each column: background image + dark overlay (~40%), min-height ~420px, content bottom-aligned.
  • Contents: bold uppercase Heading (white) + mint Button. Subtle hover zoom on the image.
TileLabelButtonLinkImage
1SERVICESView/menu/nails-at-nail-salon
2CONTACT USMore/contact-us/nail-salon-near-me
3NAIL DESIGNSExplore/gallery/nails-from-the-nail-salon
Images already in the media library (see Assets §12).
5

Excellence in nail care

2 columns, Sky background.
  • Left: Image = salon interior (who-we-are). Right: eyebrow “THE TRIEU WAY” + H2 + 2 paragraphs.
H2
Excellence in nail care.
Paragraph 1
Trieu Nails is the best-rated nail salon in East London, Bethnal Green, and the go-to nail salon for flawless manicures, pedicures, gel polish, BIAB gel and Gel-X tips.
Paragraph 2
With a key focus on late opening and therapeutic sessions, unwind after working hours in a relaxing space designed for ultimate pampering.
6

Services & prices

Menu list (name · desc · from-price) + CTA button.

Eyebrow “THE MENU” + H2 “Treatments, done properly.” Rows with thin top borders. End with mint button “View the full menu & prices”/menu/.

TreatmentDescriptionFrom
Classic ManicureShape, cuticle care and a flawless polish finish.£25
Gel / Shellac ManicureHigh-shine, chip-resistant colour that lasts.£35
BIAB Gel ManicureStrength and structure for natural nails — our most requested.£45
Gel-X TipsLightweight, full-coverage tips for instant length.£47
Acrylic ExtensionsSculpted, durable enhancements in any length.£45
Spa PedicureA restoring soak, exfoliation and massage.£37
Nail ArtFrom chrome to 3D — priced per finger.£5
“From” = lowest listed price per category on /menu/. Client to confirm.
7

Shades — season & mood

Two sections, each a 4-group row of circular swatches.

By season (H2 “A colour for every season.”): Spring · Summer · Autumn · Winter — each a title + 3–4 circular swatches with names.

By mood (H2 “A colour for the mood you're in.”): Bare & Calm · Soft & Romantic · Bold & Playful · Cool & Editorial.

Swatch = circular colour disc (border-radius 50%) or small round photo + caption. Names/colours are placeholder — client to supply real polish range.
8

Reviews · Careers · Visit

Three sections.

Reviews: 3-col testimonials (★★★★★ + quote + name/source). Placeholder quotes — client to supply real ones.

Careers band: full-width, background Footer Grey #474C50, white heading + text + mint button “Explore careers” → /careers.

Careers copy
We're always looking for gifted hands. If you're a nail technician who cares about the craft, we'd love to meet you. Great space, great clients, a team that has your back.

Visit: 2-col — details (Icon List) + free Google Maps widget at the address.

Visit details
Address   105 Roman Road, London E2 0QN
Weekdays  Monday – Friday · 12:00 – 21:00
Weekends  Saturday – Sunday · 10:00 – 19:00
Call      020 8981 8161
Buttons: “Call to book” → tel:02089818161 · “Book online” → /book/.
9

SEO paragraph

Centred block above footer.
Heading
We're rated the best nail salon in London by our customers
Body
London, the capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times. At its centre is the imposing Houses of Parliament, the iconic 'Big Ben' clock tower and Westminster Abbey, site of British monarch coronations. Across the Thames River, the London Eye observation wheel provides panoramic views of the South Bank cultural complex, and the entire city. There are many things to do such as walking tours, visiting History Museums and amazing places to eat out. London offers an array of Sports Complexes, Art Museums and a wide option of food, Wine & Nightlife.
Closing (italic)
Trieu Nails London is a must visit if you're in London for a short break!
10

Footer

Background Footer Grey #474C50, 4px mint top border.
  • Brand column: TRIEU NAILS LONDON wordmark (white, letter-spaced serif — same style as header, LONDON centred under it), tagline “Nailed once. Obsessed forever.” (mint italic), address + phone.
  • Column headings in Mint; links light grey → white on hover.
ColumnLinks
ExploreHome / · Services /menu/ · Careers /careers · Our Charity /trieu-nails-foundation/
SalonAbout Us /about-us-trieu-nails-london/ · Pop-up Shop /london-most-reliable-mobile-nail-salon-and-pop-up-nail-bar-and-barbers/ · Aftercare /manicure-and-pedicure-aftercare/ · Blog /blog/
HelpFAQs /faqs/ · Contact Us /contact-us/ · Book Now /book/
FollowIG instagram.com/trieunailslondon · TikTok tiktok.com/@trieunailslondon · FB facebook.com/trieunailslondon · X twitter.com/trieunailsldn
11

Header (reuse existing)

Already matches — verify only.
  • Sticky. Black top call-bar: “Call to book or ask us anything — 020 8981 8161” (number in mint).
  • White header: centred TRIEU NAILS LONDON wordmark · mint BOOK button top-right → /book/.
  • Nav: Home · Services (/menu/) · Careers · Our Charity (/trieu-nails-foundation/) · Contact (/contact-us/). Active = mint.
  • Thin gold→mint divider strip under the header.
12

Image assets

Mostly already in the media library.
WhereFile
HeroMarble/chrome nails — client to supply (not yet on site)
Tile — Services/wp-content/uploads/2025/07/nails-at-nail-salon.webp
Tile — Contact/wp-content/uploads/2025/07/nail-salon-near-me.webp
Tile — Nail Designs/wp-content/uploads/2025/07/nails-from-the-nail-salon.webp
Excellence / story/wp-content/uploads/2025/07/who-we-are.webp
Logo (header/footer)/wp-content/uploads/2016/07/trieu-nails-london-logo.png
📌
Notes: Reviews quotes, real polish shade names/colours, and the hero image file are the only content still to be supplied by the client. Everything else is specified here or in the media library.
13

Technical notes

  • Set Global Colors/Fonts first; style all elements via globals so it's maintainable.
  • Fully responsive — check tablet + mobile (stack 2-col → 1-col; tiles 3→1; shade groups 4→2→1).
  • Reveal-on-scroll = Elementor entrance animations (fade-in-up); keep subtle. Respect reduced-motion.
  • Header/footer ideally as Theme Builder templates (Elementor Pro) so they're site-wide; on Free, build footer in-page for now.
  • Build on draft → QA against mockup → set as front page → keep previous homepage as draft rollback.