Design system
The Lyman design system
Everything this site is built from: colors, type, components and ready sections you can copy into new pages.
This template helps you follow common rules for hotel websites in the US. It is not legal advice.
Start here
Make it your hotel in four steps
Open the Framer agent and ask for these skills by name, in this order. Each one asks you for facts instead of guessing them.
Step 1
Swap in your hotel
hotel-setup
Replaces the demo hotel with yours everywhere: name, address, phone, check-in times, fees and state rules. It asks for anything it can’t find.
Step 2
Connect the Book buttons
booking-engine-setup
Links every Book button to your booking engine with the guest’s dates. No engine yet? Keep request mode, which sends the dates to your Book page as a request.
Step 3
Set rates and the hotel fee
rates-and-fees
Updates rates and the hotel fee, and keeps every price on the site a total that already includes the fee.
Step 4
Check before you publish
claims-check
search-check
First, claims-check lists prices, claims and wording to fix. Then search-check reviews titles, descriptions, headings, alt text and the hotel’s search data.
Colors
Colors, named by what they do
Use these color styles for every fill and text color. Change a style once and the whole site follows.
Text on Accent Soft is always Text Primary.
Accent text is too light on Accent Soft, so eyebrows, links and labels there use Text Primary. Background Dark is only for the top strip, the Gatherings band, the final booking band and the footer.
Background
#F5F5F1
Page background.
Surface
#FFFFFF
Cards, the date card, form fields and the phone bar.
Surface Muted
#ECEDE4
Soft sections and the info band.
Text Primary
#1E1F16
Headings, body text and all text on Accent Soft.
Text Secondary
#4F5143
Small text and details, like room facts.
Accent
#6B6F00
Filled buttons, links and eyebrows on light colors.
Accent Hover
#555900
Hover for filled buttons and links.
Accent Soft
#F0D0CC
Hero panel, offers band, Dogs welcome badge and the main button on dark.
Border
#DCDDD2
Hairlines between rows and around cards.
Input Border
#82846F
Form fields and chip outlines.
On Background Dark
Background Dark
#2B2B12
Top strip, Gatherings band, final booking band and footer.
Text On Dark
#F6F6EF
Headings and text on Background Dark.
Text On Dark Secondary
#CACBB5
Small text and details on dark.
Border On Dark
#F6F6EF at 18%
Hairlines on dark.
Type
Besley for headings, Rethink Sans for reading
Pick a text style instead of setting fonts by hand. Each style has its own tablet and phone size, so text steps down on smaller screens.
Display
Besley 700 · 50 / 44 / 34 px · the Home H1
Antiques by day, oysters at night.
Heading 1
Besley 700 · 54 / 46 / 34 px · page titles, one per page
Rooms and suites on Warren Street
Heading 2
Besley 700 · 42 / 36 / 30 px · section titles
Book with us and talk to a person.
Heading 3
Besley 700 · 23 / 22 / 20 px · card and block titles
Change your dates by phone
Room Name
Besley 700 · 28 / 26 / 21 px · room and offer names
Warren Queen
Day Number
Besley 700 · 62 / 56 / 44 px · days on the date card
11
Price Big
Besley 700 · 34 / 32 / 28 px · big prices
$331
Walking Minutes
Besley 700 · 30 / 28 / 24 px · walking ruler
6 min
Quote
Besley 700 · 24 / 22 / 20 px · guest quotes
“Ask us for the corner room with two street windows.”
Logo Wordmark
Besley 700 · 27 / 27 / 23 px · logo only
The Lyman
Eyebrow
Rethink Sans 700 · 12 / 12 / 11 px · capitals · above headings
Boutique hotel · Hudson, New York
Label
Rethink Sans 700 · 11 px · capitals · card details, field labels
Room 204 · Second floor
Logo Tagline
Rethink Sans 600 · 9.5 / 9.5 / 8.5 px · capitals · logo only
Hudson, New York
Body Large
Rethink Sans 400 · 18 / 17 / 16 px · intros
24 rooms in an 1870s brick block, an oyster bar downstairs and the Amtrak station six blocks away.
Body
Rethink Sans 400 · 16 px · running text
Check-in is at 3:00 PM and check-out is at 11:00 AM. Ask the front desk if you need more time.
Body Strong
Rethink Sans 600 · 18 / 17 / 16 px · key facts
Every rate includes the $42 hotel fee.
Small
Rethink Sans 400 · 14 px · notes and details
Taxes extra. Sample rate.
Price Line
Rethink Sans 400 · 13.5 / 13 / 12.5 px · total price lines
From $331 a night with the $42 hotel fee included. Taxes extra.
Nav Link
Rethink Sans 500 · 15.5 px · menu links
Eat & Drink
Strip
Rethink Sans 400 · 13 / 13 / 12 px · top strip, on dark
Oyster bar downstairs, 5 to 11 PM, closed Tuesday
Tag
Rethink Sans 700 · 10 px · capitals · Sample tags
Sample rate
Badge
Rethink Sans 600 · 12 px · room badges
Dogs welcome
Button
Rethink Sans 600 · 16 px · large buttons
Check availability
Button Small
Rethink Sans 600 · 15 px · small buttons
Book this room
Button Bar
Rethink Sans 600 · 17 px · phone action bar
Book
Components
Every component and its versions
Drop these in from the Assets panel instead of building new ones. Each card below shows every version with a short note on where it goes.
Button
Filled for the main action, outlined next to it at the same size. Call is always outlined. On Dark versions go on Background Dark; Bar versions are for the phone action bar.
Primary
Secondary
Primary Small
Secondary Small
Primary Bar
Secondary Bar
Primary On Dark
Secondary On Dark
Primary On Dark Small
Secondary On Dark Small
Text Link
An underlined text link for “See all” and “Read more” lines next to a heading. Use On Dark on Background Dark.
Default
On Dark
Form Button
The send button for every form, with sending, sent and error states that Framer switches on its own. On Dark versions are for dark sections and the footer.
Default
Loading
Success
Error
Default On Dark
Loading On Dark
Success On Dark
Error On Dark
Sample Tag
Marks demo facts such as rates, fees, photos and reviews. hotel-setup removes each tag once the fact is real.
Sample rate
Default
Sample photo
On Photo
Sample offer
On Soft
Sample rate
On Dark
Badge
Room flags on key cards and room cards. Outline is for any other short fact about a room.
Dogs welcome
Dogs Welcome
Accessible
Accessible
Claw-foot tub
Outline
Logo
The wordmark for the nav and footer. The Inn versions are for inn mode.
On Dark
Inn On Dark
Fanlight Mark
The fanlight window mark for the favicon, social images and email. Olive on light colors, On Dark on Background Dark.
Olive L
Olive M
Olive S
On Dark L
On Dark M
On Dark S
Fanlight Divider
The small arc above section eyebrows on Home. Pick the version that matches the section color.
Default
On Soft
On Dark
Room Key Card
Room number and floor, name and facts, like a key tag. Hero sits on the hero photo, Card Head tops a room card, Phone overlaps the hero photo on phones.
Room 204 · Second floor
Dogs welcome
Warren Queen
Queen bed · Sleeps 2 · 260 sq ft · Street view
Hero
Warren Queen
Queen bed · Sleeps 2 · 260 sq ft · Street view
Phone
Room 204 · Second floor
Dogs welcome
Warren Queen
Queen bed · Sleeps 2 · 260 sq ft · Street view
Card Head
Room Card
A room from the Rooms collection, with a price that already includes the hotel fee. Grid for card rows, Row for room lists on wider screens.
Room 102 · First floor
Accessible room
Courtyard Queen
Queen bed · Sleeps 2 · 300 sq ft · Courtyard view
From $356 a night with the $42 hotel fee included. Taxes extra. Sample rate.
Grid
Offer Card
An offer from the Offers collection, with its total price and the hotel fee included. Card for grids, Row for offer lists on wider screens.
Jan 4 to Mar 25, 2027 · Sunday to Thursday
Midweek in Hudson
Three nights, breakfast for two each morning and a noon checkout.
From $906 total for 3 nights with the hotel fee included. Taxes extra. Sample offer.
Card
Info Band Cell
One fact in the band under the hero. First has no divider line, for the first cell in a row.
24 rooms
1870s brick block
First
By train
Amtrak, 6 blocks
Default
Reason
An icon, a title and one line for the “Book with us” reasons. Default sits on Background, On Surface on white sections.
Change your dates by phone
Change or cancel up to 7 days before arrival. Sample policy.
Default
Ask for the room you want
Corner rooms, quiet rooms, the one with the tub.
On Surface
Walking Ruler
Walking times from the front door, three to five stops. Turn on stops 4 and 5 in its controls.
On foot from our door
Sample times
1 min
Antiques on Warren
6 min
Amtrak station
8 min
Hudson River park
Default
Place Card
A nearby place with a category, one line and the minutes from your door.
Antiques
1 min on foot
Antiques on Warren Street
Dealers and shops along the 300 to 600 blocks, most open Thursday to Monday.
Default
Venue Block
An event room with its photo, capacity and what it suits.
The Brick Room
60 standing · 40 seated
Rehearsal dinners, welcome parties and small weddings under the original 1871 beams.
Default
Team Card
A portrait, name, role, start year and one line, for the About page.
Since 2016
Graham Whitcomb
Co-owner, runs the front of the house
We bought the building with the bar still in it. The oysters came back first.
Default
Rating Line
Your rating with its source, review count and date. Never put stars next to a review site’s logo.
4.8
from 612 reviews on Google, as of November 2026
Sample rating
Default
Press Line
A press mention written as text: publication, year and a link to the story. No logo wall.
Default
Quote Card
A real guest review with a first name and initial, the source and the date.
We asked for the room with the claw-foot tub and got it. The oysters downstairs made the weekend.
Maya R.
Google review, Oct 2026
Sample review
Default
Policy Summary
Five stay facts at a glance. Row on wide screens, Stacked on phones.
Check-in
3:00 PM
Check-out
11:00 AM
Minimum age
21
Dogs
In 4 rooms
Smoking
No smoking
Stacked
FAQ Item
One question and its answer. Guests tap the question to open it.
Closed
Yes. Every rate on this site includes the $42 hotel fee, which covers Wi-Fi, the morning coffee bar, bikes and the Amtrak station pickup. Only taxes are added. Sample fee.
Open
Consent Boxes
Separate, unchecked consent boxes. SMS holds the two text boxes and the opt-out line; Email holds the email box. Add them to every form that asks for a phone number or an email.
Msg & data rates may apply. Reply STOP to opt out, HELP for help. Consent is not a condition of purchase. See our Privacy policy.
SMS
Code components
These run code on the live site. Select one on a page and change it in the controls on the right.
Booking Card
Guests pick dates and guests, and Check availability opens your booking engine with them filled in. Set the engine in the “Engine” control: SynXis, Mews, Cloudbeds, ThinkReservations, iHotelier, Little Hotelier or Other. With None, request mode sends the dates to /book#request so guests can send a request. The live site starts on the next Friday at least 14 days ahead; the canvas shows Dec 11 to 13. Room and Offer versions use the Hero layout on room and offer pages; Offer adds the offer code line.
Hero
From $331 a night with the $42 hotel fee included. Taxes extra. Sample rate.
Compact
From $331 a night with the $42 hotel fee included. Taxes extra. Sample rate.
Wide
From $331 a night with the $42 hotel fee included. Taxes extra. Sample rate.
Dark Bar
Price Line
Writes every price as a total with the hotel fee included, from the rate and the fee. Rates live in the Rooms and Offers collections; ask rates-and-fees to change them.
From $331 a night with the $42 hotel fee included. Taxes extra. Sample rate.
A night
From $906 total for 3 nights with the hotel fee included. Taxes extra. Sample offer.
Offer total
From $289 a night. No hotel fee. Taxes extra. Sample rate.
No hotel fee
Hotel Structured Data
Adds the hotel’s name, address, phone, check-in times and rooms to every page for search engines. It sits once in the layout template Main and shows only a small label on the canvas, so you never add it to a page. Edit its fields there, or ask hotel-setup.
On every page
Menu, top strip, footer and phone bar
These live in the layout template Main, and every page uses it. Edit them there once and every page follows.
Below, each version at its own screen size. The menu button opens the drawer, and the Open versions show it open. On phones the action bar with Call, Text and Book stays at the bottom of the screen.
Top Strip · Phone
Oyster bar downstairs, 5 to 11 PM, closed Tuesday
Navigation · Phone
Navigation · Phone Open
Footer · Phone
Examples
Ready sections from Home
Copy a section into a new page, then change the words and photos. Each one keeps its tablet and phone layout.
When to use
To show three rooms with prices, on Home or any page that should lead to booking. The cards come from the Rooms collection (Featured on Home), so edit rooms in the CMS, not here.
Stay
Rooms and suites
Sample rates for a Friday night with the $42 hotel fee included. Taxes extra.
When to use
To show current offers with their total prices. The cards come from the Offers collection; switch Featured on Home to choose the two shown.
Offers
Offers this winter
When to use
For one dark band per page that asks for a single action, like events, weddings or group stays. Keep one filled and one outlined button.
Gatherings
Weddings and small retreats for up to 60 guests.
Three rooms in the old brick block, dinner from the oyster bar kitchen and rooms upstairs for your guests.
The Brick Room
Receptions and long-table dinners
60 standing · 40 seated
The Courtyard
Ceremonies and cocktails, May to October
40 standing · 24 seated
The Library
Private dinners and meetings
14 seated
When to use
For directions by train, car and air next to a map, on Home or the Getting here page.
Getting here
Two hours from New York, by train or car
By train
Amtrak from New York Penn Station takes about 2 hours. We pick you up at the Hudson station; it’s part of the hotel fee.
By car
About 2 hours from the city on the Taconic Parkway. Park on Warren Street or in the small lot behind the building.
By air
Albany International is 45 minutes away by car. Stewart International is about 75 minutes.
Sample times
Hudson
River
Warren St
Amtrak
The Lyman
1871 Warren St, Hudson, NY 12534
Sample address