For the site owner
The colors, type and pieces behind Loring Hair, and the steps to make the site yours. This page is hidden from search engines. Keep it as a reference or delete it before you publish.
This template helps you follow common rules for salon websites in the US. It is not legal advice. Check your state board, your city and your booking provider’s settings before you publish.
Setup
Make it yours, step by step
Work through these in order. Each step says where the change goes and which skill can do it for you. Type the request in the agent chat, for example “Make this site mine.”
01
Salon details
Name, legal name, address, phone, hours, owner and license line. They show in the navigation, footer, phone bar, Visit page and search details.
Skill: salon-setup
02
Booking links
Paste your booking page from Square, Vagaro, Boulevard, Fresha, GlossGenius or Booksy. Every Book button, the picker card and the phone bar use it.
Skill: booking-links
03
Prices
Set the three level prices of each service in the Services collection, then the five big rows on Home and the “Prices updated” date.
Skill: update-prices
04
Stylists
Edit the Stylists collection: name, level, specialties, portrait, license and booking link. Portraits fit the mirror frame on their own.
Skill: add-stylist
05
Work photos
Swap the sample photos for your own. Tag each one Real client or Model, and show a client only with a signed photo release.
Skill: add-work
06
Policies
Match the cancel window, deposit, late window and redo window to your booking provider’s settings, on the Policies page and the Home summary.
Skill: policies
07
Forms
Select the forms on Visit and Careers and choose where each one sends, such as your salon email. Until then they send nothing. Both open the Thank you page.
In Framer: form settings
08
Publish checks
Replace every Sample tag, the demo note and the 555 numbers. Then ask the agent to run search-check, and send one test from each form.
Skill: search-check
Color
Navy, butter and a cool ground
Use the color styles, never raw hex. Navy marks the main action and the second line of the Home headline. Butter is a band or a chip, never a big field of strong yellow, so it never fights the photos.
Background
#F3F4F1
Page ground and inner page heads
Surface
#FFFFFF
White sections, cards, inputs, picker card
Surface Muted
#E2E7EE
Soft sections such as Your first visit
Text Primary
#131B2B
Headings, body text, rules
Text Secondary
#4A5466
Leads, notes and meta
Accent
#1F3566
Primary buttons, second headline line, big numbers
Accent Hover
#15264C
Primary button hover
Accent Soft
#F3E2A6
Price band, gift card strip, Sample chips
Background Dark
#15213B
Visit panel, Our work page, footer
Aa
Text On Dark
#F3F4F1
Text on navy
Aa
Text On Dark Muted
#B9C3D3
Meta text on navy
Line
#CDD3DB
Hairlines on light fills
Line On Dark
#F3F4F1 at 16%
Hairlines on navy
Input Border
#7F8899
Form field borders, 3:1 on white
Status Open
#2E7D4F
The Open dot in the Home hero, always next to text
Error
#A3312B
Form error state
Hover Tint
#1F3566 at 6%
Row hover in the picker card
Photo Shade
#131B2B at 78%
End of the shade under photo captions
Photo Shade Clear
#131B2B at 0%
Start of the shade, shown fading into Photo Shade
Type
Anybody, fitted to the line
Anybody for headings, prices and the wordmark. Radio Canada for body text, labels and buttons. Always apply a text style; never set a size or font by hand.
Headlines that fill the line
Every page headline is one Heading 1 text layer (Display Fit on Home). Each line has its own Width setting, the wdth axis of Anybody from 50 to 150, so the line ends at the right edge: long lines get a lower width, short lines a higher one. Desktop and tablet stay on one line until the width would drop below about 72; then the headline splits into two lines. Phones carry their own line breaks.
To re-fit after you change the words, ask the agent to run edit-headline. By hand: select the headline on each breakpoint, open Font, then Variable, and move Width until the line just reaches the right edge, about 1000 px on desktop, 700 px on tablet and 316 px on phone. On the phone breakpoint, retype the words and line breaks too, because phone text does not follow desktop edits.
Width 50
Loring
Width 100
Loring
Width 150
Loring
Display Fit
Anybody 800, 118 px, auto fit. The Home headline only.
Cuts
Heading 1
Anybody 800, 84 / 64 / 44 px. One per page, fitted per line.
Stylists
Heading 2
Anybody 800, width 130, 56 / 46 / 34 px. Section titles.
Your first visit
Heading 3
Anybody 800, width 112, 26 / 24 / 21 px. Card and step titles.
Start with a consult
Stylist Name
Anybody 800, 44 / 38 / 26 px. Names in stylist rows.
Luz Ortega
Service Name
Anybody 800, width 130, 34 / 30 / 24 px. Big price rows.
Curly cut
Card Title
Anybody 800, 20 / 19 / 17 px. Small cards and rows.
E-gift card
Price Row
Anybody 800, width 150, tabular figures, 40 / 34 / 28 px.
$190
Score
Anybody 800, width 150, tabular figures, 64 / 56 / 44 px.
4.9
Logo Wordmark
Anybody 800, 27 / 27 / 23 px. Logo only.
Loring
Eyebrow
Radio Canada 600, 13 px, caps. Above headings.
Hair salon in Loring Park
Body Large
Radio Canada 400, 19 / 18 / 17 px. Leads.
Cuts for every hair type, lived-in color, curly cuts and clipper fades.
Body
Radio Canada 400, 17 / 17 / 16 px. Running text.
Your stylist confirms the price before starting.
Label
Radio Canada 600, 15 px. Row names and field labels.
Cut & style
Small
Radio Canada 400, 14 px. Notes and meta.
Prices updated November 2026
Caption
Radio Canada 500, 12.5 px. Fine print and notices.
Minnesota Salon License #SAMPLE-0000
Tag
Radio Canada 600, 11 px, caps. Photo tags.
Model
Button
Radio Canada 600, 16 px. Large buttons.
Book an appointment
Button Small
Radio Canada 600, 15 px. Small buttons.
See open times
Nav Link
Radio Canada 500, 15 px. Menu links.
Services & prices
Logo Tagline
Radio Canada 600, 10.5 px, caps. Under the wordmark.
Hair
Components
Pieces to reuse
Every repeated part of the site is a component. Reuse these instead of drawing new frames, and change words and links through each instance’s properties. Edit a component once and every page follows.
Logo
The Loring wordmark with the small HAIR tagline. Default on light fills, On Dark on navy, as in the footer. It links to Home. Change the name once in the component and the navigation and footer follow.
Variants: Default, On Dark
Navigation
The bar at the top of this page is the Navigation component: Desktop on desktop, Tablet on tablet, Phone on phones, all set in the Main layout template. The menu button opens Tablet Open or Phone Open; a link tap closes it. Menu links, the phone number and Book an appointment live inside the component.
Variants: Desktop, Tablet, Tablet Open, Phone, Phone Open. Shown here: the open menu states.
Phone
Phone Open
Footer
The navy footer at the bottom of this page: legal name, address, phone, hours, license line, link columns, the same Google review link for everyone, and the demo note. Desktop, Tablet and Phone variants are set per breakpoint in the Main layout template. Shown here: the Phone variant.
Variants: Desktop, Tablet, Phone
Button
Primary (filled navy) for the main action, Secondary (outlined) for the second. A pair always has the same height and corner, and Call and Text are always outlined. On navy use Primary On Dark (butter fill) and Secondary On Dark. Small variants sit inside rows and cards. Set Label, Link and the Text, Call or Map icon switch on the instance; hover states come with it.
Variants: Primary, Secondary, Primary Small, Secondary Small, Primary On Dark, Secondary On Dark, each with a hover state
Form Button
The submit button of the Visit and Careers forms. Default, Loading, Success and Error switch on their own while a form sends. Set Label, Sending Label, Success Label and Error Label on the instance for the wording; never build a new submit button.
Variants: Default (Label), Loading (Sending Label), Success (Success Label), Error (Error Label)
Picker Card
Book in two steps, in the Home hero. Each variant is one selected service: a row tap switches the variant, the phone bar line follows, and See open times goes to that service’s booking link. To change the four services, edit the rows and the link in every variant.
Variants: Cut & style, Clipper cut, Curly cut, Root color
Book in two steps
Sample prices
1
Choose a service
Cut & style
60 min
from
$55
Clipper cut
30 min
from
$35
Curly cut
75 min
from
$70
Root color
90 min
from
$85
2
Pick a time
Mirror Portrait
The cut-corner mirror frame, the template’s second signature after the fitted headlines. L on stylist profiles, M in stylist rows, S on phones and small rows. Set Image on the instance; the frame and crop stay. Use it on white or Surface fills, because the ring between frame and photo is Surface.
Variants: L (280 x 350), M (120 x 150), S (88 x 110)
Sample Chip
Marks demo numbers, prices, ratings and photos. Default on light fills, On Accent Soft on butter bands. Remove a chip only when the value next to it is real.
Variants: Default, On Accent Soft
Sample prices
Sample prices
FAQ Item
One question and answer. A tap opens and closes it. Set the Question and Answer properties, and keep answers to two or three short sentences that answer in the first one.
Variants: Closed, Open
Do you take walk-ins?
Do you cut every hair type?
Yes. Every stylist cuts straight, wavy, curly, coily and textured hair.
Mobile Action Bar
Fixed at the bottom of every page on phones, from the Main layout template. Service and Details show the picked service, Book Link goes to its booking link, and Change jumps to the picker on Home. Call and Text stay outlined, Book stays filled.
One variant. Properties: Service, Details, Book Link
Notice lines
Plain text lines, not components, set in Caption or Small. Keep the license line in the footer and on About, the not legal advice line on Policies, and the demo note until every name, price and photo is yours.
Where: footer, About, Policies, Services, Gift cards
License Line
Loring Hair LLC · Minnesota Salon License #SAMPLE-0000
Demo Note
Loring Hair is a fictional salon. Names, stylists, prices and review numbers are samples. Replace them before you publish.
Legal Note
This template helps you follow common rules for salon websites in the US. It is not legal advice.
Price Date
Prices updated November 2026
Gift Card Terms
Gift cards don’t expire.
Patterns
How the pieces fit together
The recipe behind every page, then four real sections built only from the styles and components above. Follow the same recipe when you or the agent add a section.
Section rhythm
Each section is full width with 112 px padding at the top and bottom on desktop, 88 on tablet and 64 on phone, and 80, 40 and 16 px at the sides. Content sits in a Container, max width 1280 px.
Home, top to bottom: Background (hero), the photo strip, Accent Soft (prices), Surface (stylists), Surface Muted (first visit), the photo half (about), Background (good to know), the Accent Soft strip (gift cards), Background Dark (visit), then the navy footer.
The same fill never sits twice in a row. Butter is only a band or a slim strip. Navy is for the Visit panel, the Our work page and the footer.
Page heads
T: eyebrow, fitted h1, a rule and one plain sentence on Background. Book, Visit, Policies, the legal pages, Thank you, 404 and this page.
TM: the same on Surface Muted (Stylists, New clients, Careers). TB: on the Accent Soft band (Services & prices, Gift cards).
M: the head with a mirror-framed photo on the right (About, stylist profiles). D: the navy head (Our work).
Neighboring menu pages never open the same way, so a new page takes a head type its neighbors don’t use.
Buttons and wording
A pair is a filled Primary and an outlined Secondary with the same height and corner. Call and Text are always outlined, also on navy, where the pair is Primary On Dark and Secondary On Dark.
One Primary per section. Words salons use: Book an appointment, Text us, Call (612) 555-0148, See open times, Book with [Name], Book this service, See the full menu, Buy a gift card, Get directions.
Every price says from, every demo number carries a Sample chip, and services are named by length or technique, never by gender.
Example 1 · Prices up front
Use for the five headline prices, once per page, on the Accent Soft band. Price Row text style for the figure, Service Name for the service, a Sample chip until the prices are real, and the Prices updated date under the rows.
Prices, up front
Priced by hair length and stylist level, never by gender. These are New Talent prices; your stylist confirms the price before starting.
Sample prices
Cut & style
any length
from
$55
Clipper cut
fades and tapers
from
$35
Curly cut
cut dry, curl by curl
from
$70
Root color
up to 1 inch
from
$85
Balayage
includes gloss
from
$190
Prices updated November 2026
Example 2 · Level table
Use where a price depends on the stylist’s level. Three columns: New Talent, Stylist, Senior, each with what the level means. Level names never use Master unless the license says so.
One menu, three levels
Book the same service at any level. The level decides the starting price, not the care you get.
New Talent
Licensed and newer to the chair. The lowest starting prices on the menu, with a senior stylist on the floor.
Stylist
Several years of cuts and color. Where most of our clients book.
Senior
Ten years or more behind the chair. Complex color, corrections and big changes.
Example 3 · Numbered steps
Use for any three-step how-it-works. Each step has a 1.5 px top rule, the number in Price Row and Accent, a Heading 3 and one or two plain sentences. Steps stack on phones.
New here?
Your first visit
01
Start with a consult
Fifteen minutes with your stylist before any color service, so the plan and the price are clear.
02
We patch test new color
Trying a new color line? We test it 48 hours ahead at no charge to you.
03
Running late?
Text us. We’ll keep your spot when we can, or move you to the next open chair.
Example 4 · Policy lines and questions
Use next to booking. Three short policy lines with a link to the Policies page, then FAQ Items. Keep the numbers the same as on the Policies page and in your booking provider.
Good to know
Before you book
Cancel 24 hours ahead
Move or cancel up to 24 hours before your visit at no charge. Later changes may carry a fee.
Deposit on long color
Color services over 2 hours need a 50% deposit when you book. It goes toward your service.
10 minute late window
Running more than 10 minutes late? Text us. We may need to shorten or move your service.
Do you cut every hair type?
How do you set prices?
Do I need a consult before color?
Can I walk in?
How do I pay and tip?
Framer agent
Built to work with the Framer agent
Twelve skills come with this template, plus base rules the agent always follows. Each skill holds the rules of this site, so a page the agent adds looks and reads like the rest. Type a request in plain words, or start it with the skill’s command, such as /salon-setup.
default (always on)
Base rules
Loaded on every request. Sends the agent to the right skill and keeps it on the Loring styles, components, collections and Main layout. No new colors or fonts.
Try asking
Add a page with hair care tips for curly hair.
/design-system
Site rules
Layout, colors, type, components, page heads and wording for any new page or section. Points to the examples on this page.
Try asking
Add a page for bridal and event hair, with prices and a booking button.
/salon-setup
Make it yours
Swaps the demo salon for yours everywhere: name, legal name, address, phone, hours, owner and license line, then re-fits the headline. It asks for anything missing.
Try asking
Make this site mine: Juniper Hair, Portland, OR, (503) 555-0172.
/booking-links
Booking links
Connects every Book button, the picker card, the phone bar and the gift card button to your booking provider, with a link per service and per stylist.
Try asking
We use Vagaro. Our booking page is vagaro.com/juniperhair.
/edit-headline
Fitted headlines
Rewrites a page headline and re-fits each line on desktop, tablet and phone, including the phone line breaks.
Try asking
Change the Home headline to “Color, cuts and curls in Portland.”
/add-service
New service
Adds a service with category, time, three level prices and a name by length or technique, and gives it its own page.
Try asking
Add a silk press: 90 minutes, from $85, $100 and $120.
/update-prices
Prices
Updates level prices in the Services collection, the five rows on Home, the picker card and the Prices updated date in one go.
Try asking
Raise all color prices by $10 starting December 1.
/add-stylist
New stylist
Adds a stylist with level, specialties, a portrait in the mirror frame, license and issuer, booking link and an optional chair rental line.
Try asking
Add Maya Chen, Stylist level, curly cuts and color. Here is her photo.
/add-work
Work photos
Adds photos to Our work and stylist pages, each tagged Real client or Model, with a release on file and a typical-result note on color.
Try asking
Add these three balayage photos. All are clients with signed releases.
/policies
Policies
Sets the cancel window, deposit, late window, redo window and kids rules on the Policies page and Home, matched to your booking provider.
Try asking
Our cancel window is 48 hours and color over two hours needs a $30 deposit.
/barber-mode
Barber mode
Turns the site into a barbershop: Barber level labels, the barber service set, a walk-ins line and beard services. Layout, styles and pages stay.
Try asking
Switch the site to barber mode. We take walk-ins until 6 PM.
/add-review
Reviews
Adds a real rating or review with its source and date, words unchanged, and removes Sample tags only when the numbers are real.
Try asking
Our Google rating is 4.8 from 126 reviews as of today.
/search-check
Search check
Checks page titles, descriptions, one h1 per page, alt text, slugs and the HairSalon structured data before you publish. It reports first and changes nothing until you say so.
Try asking
Is the site ready for Google? Check it before we publish.
The rule notes in these skills help you follow common rules for salon websites in the US. They are not legal advice. Check your state board, your city and your booking provider’s settings.