---
version: alpha
name: "Nail salon template by 8B"
description: "Gel nail studio one-pager in frosted glass over orange orbs, an orange opening and taupe bands, with heavy uppercase type and pinned scroll scenes. Free HTML template by 8B, MIT."
colors:
  primary: "#23171a"
  secondary: "#62504c"
  tertiary: "#f2671f"
  neutral: "#fbf5f0"
  sand: "#bcb0a9"
  peach: "#ffc49b"
  ember: "#98320c"
  mist: "#a6968f"
typography:
  headline-display:
    fontFamily: Gabarito
    fontSize: 5.2rem
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: 0.005em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 4rem
    fontWeight: 700
    lineHeight: 0.94
    letterSpacing: 0.005em
  headline-md:
    fontFamily: Gabarito
    fontSize: 1.45rem
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: 0.03em
  body-lead:
    fontFamily: Onest
    fontSize: 1.3rem
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: Onest
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Gabarito
    fontSize: 0.76rem
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.14em
  button:
    fontFamily: Gabarito
    fontSize: 0.76rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.14em
  wordmark:
    fontFamily: Gabarito
    fontSize: 1.25rem
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0.1em
rounded:
  sm: 5px
  full: 9999px
spacing:
  wrap-max: 1240px
  gutter: 72px
  field-gap: 18px
  button-height: 44px
  control-height: 46px
components:
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 0.85em 1.7em
    height: 44px
  button-outline-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
  button-solid:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 0.95em 2em
    height: 48px
  nav-link:
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
  pane-smoked:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 24px
  pane-peach:
    backgroundColor: "{colors.peach}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 56px
  pane-light:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 26px
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    height: 46px
  icon-button:
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    height: 46px
---

## Overview

Glaze is a one-page site for a small gel nail studio, built around one idea: glass. Frosted, translucent panes carry every block of text and sit over soft orange orbs and rings, so the page reads like light passing through a coat of gel. The opening is a peach to orange field, then the ground moves through taupe, sand, peach and near black as you scroll, with heavy uppercase headings on top. It is for a studio whose clients pick a finish, meet an artist and book a chair. The feeling is warm, glossy and calm, never loud. Studio name, prices and artists in it are invented demo content.

## Colors

Eight variables; orange is the only saturated colour, and it lives in round shapes.

- **Primary (#23171a):** near black. The layers and footer backgrounds, text on light sections, the filled Request a time button and the tint of smoked glass.
- **Secondary (#62504c):** taupe. The page background and the ground of the finishes, artists and club sections.
- **Tertiary (#f2671f):** orange. The opening ground, orbs, rings, the button hover fill, the number discs in the care notes and the favicon.
- **Neutral (#fbf5f0):** warm cream. Text on dark sections, pale glass borders and highlights.
- **Sand (#bcb0a9):** the ground of the studio, prices and questions sections.
- **Peach (#ffc49b):** the top of the opening ground, the care section ground, finish prices and small labels on dark glass, the light end of every orb gradient, and the peach panes.
- **Ember (#98320c):** the dark end of the orb and ring gradients and the care note titles as they pass the middle of the screen.
- **Mist (#a6968f):** only the upper end of the booking section's background gradient.

## Typography

Two families from Google Fonts. **Gabarito**, weights 600 and 700, carries everything that shouts: uppercase headings, the wordmark, card titles, the finish and club prices, tracked small labels and buttons. **Onest**, weights 400 and 500, carries body text, form fields, text links and the price sheet figures, so numbers and sentences stay quiet beside the display type.

Section headings are uppercase, 700, line height 0.94, from 2.4rem on a phone up to 5.2rem on a wide desktop through `clamp()`; the prices heading goes up to 7.4rem and the club price to 6rem. Card titles are uppercase 600 at 1.15rem to 1.45rem with 0.03em tracking. Labels and buttons are 0.76rem uppercase with 0.14em tracking. Body text is 1rem at line height 1.6.

## Layout

Content sits in a centred wrap of at most 1240px, with a side gutter of `clamp(18px, 5vw, 72px)`. Sections are tall, with about 16vh of padding, and each owns one background band. Panes overlap their photos and step sideways: the four layer sheets are staggered by 3vw each, artist strips alternate left and right, and the price sheet is pushed 14vw in from the left. Photos are cropped with `object-fit: cover`.

Below 860px the grids collapse to one column, the nav links become a menu button with a full-screen glass overlay, the finishes grid (shown when the scene is off) goes to two columns and below 520px to one, and the studio photo frame sticks to the top of the screen above the notes. Orbs and rings cross the screen edges on purpose.

## Elevation & Depth

Depth is made of layers, not shadows. Orbs and rings sit behind translucent panes with a backdrop blur of 20px to 28px and a saturation boost, so the colour behind them shows through softened. Every pane has a one pixel pale inner line along its upper edge (`--shadow-1`); the layer sheets and club cards add a long soft drop shadow, 40px down and 70px wide at 70% near black (`--shadow-2`). Smoked panes are 30% near black, peach panes 58% peach, light panes 34% cream. Keep panes translucent; opaque cards lose the effect.

## Shapes

Corners are a square 5px on panes, photos, buttons and fields. Everything round is a true circle: orbs, rings drawn with a radial mask, the numbered discs of the care notes, the round menu buttons and the small bullets in the club list. Rings are tilted in 3D on the first screen. No pills, no large radii. Photos are portrait crops for the finishes (4 by 5), large crops for the layers and the room, and small landscape crops beside the artist strips.

## Components

- **button-outline:** transparent with a 1px current-colour border, uppercase label, 44px high; hover fills it with an orange orb that grows in from the left.
- **button-solid:** near black fill, 48px high, the same orb fill on hover; used for Request a time.
- **nav-link:** tracked uppercase label with a thin vertical divider between links and an orange underline that draws on hover.
- **pane-smoked, pane-peach, pane-light:** the three glass surfaces; smoked for sheets and strips, peach for the opening and booking panes (about 4vw of padding on desktop), light for notes, the price sheet and questions.
- **input-field:** 46px high, 1px border, cream tint, 5px corners, uppercase 0.72rem labels above.
- **icon-button:** a 46px circle with two lines; a conic orange ring turns around it on hover.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, and Lenis 1.3 for smooth scrolling. The one idea is glass sliding over light: panes arrive, orbs drift, and pinned scenes turn cards.

- **Opening:** pane and photo rise into place on load; two orbs float and two rings turn in loops that pause off screen.
- **Finishes:** pinned; six cards travel sideways past a clear window between two frosted bands, photos drifting inside their frames.
- **Layers:** pinned for two screens on desktop; four sheets land one by one from below, turned a few degrees, each with a band of light. On phones each sheet lands as it scrolls in.
- **Studio:** a sticky photo zooms and pans to a new spot for each of three notes.
- **Care notes:** a ring turns one and a half times while each title turns ember and its disc fills orange.
- **Club:** pinned for about 1.6 screens; the front card rises, turns edge-on and the back card turns in.
- **Visit:** the big orb sinks into its corner, the ring rolls in and a dot rises.
- **Headings:** lines rise out of a mask at 0.95s with a `power3.out` ease, 0.09s apart, once; a band of light sweeps panes in 1.4s. Buttons use a 0.6s curve of `cubic-bezier(.2,.7,.2,1)`.

With reduced motion, entrance and scroll animations, pinned scenes and smooth scrolling switch off; cards fall back to plain grids. The nav bar still hides on scroll and buttons still fill on hover.

## Do's and Don'ts

- Do keep orange for round things only: orbs, rings, discs and hover fills.
- Do keep every text block on a translucent pane or a flat band, and check contrast after recolouring.
- Do keep corners at 5px and circles perfectly round.
- Do keep Gabarito uppercase for headings and labels, and Onest for sentences and numbers.
- Do let panes overlap photos and step sideways.
- Don't add opaque white cards, drop shadows on flat blocks or gradients on text.
- Don't add a third typeface, rounded pill buttons or stock icons.
- Don't change the number of finish cards or layer sheets without scrolling through the pinned scenes.
- Don't remove the footer wordmark's `--len`; set it to the number of letters in the new name.