Design system
The colours, type, components and sections Stopover is built from. The Framer Agent's /design-system skill copies from this page, so update it whenever you change a style or a component.
Setting up
Seven steps make Stopover yours. Everything else follows from the colour styles, text styles and the CMS.
1. Name and intro
Edit them twice: in the Home page’s Bento (Identity tile) and in the Inner page layout template (Panel and Top panel).
2. Photos
CMS, Photos: one item per photograph with its image, place, hour, minute and trip. The wall files each photo under its hour.
3. Trips
CMS, Trips: name, country, story, dates, client, cover and notes. A trip’s page shows its own photos on its own.
4. Now in
In the Inner page layout template, select Now in and set the place, the time zone (such as Europe/Oslo) and the note.
5. Colours
Assets, Colours: every style has a light and a dark value. The theme switch starts in Dark; change Start in on the switch.
6. Contact form
On Contact, select the form and choose where briefs are sent. The demo address is a placeholder.
7. Tours, prints, journal, legal
CMS collections of the same names. Turn on Featured for the tour shown on the home page.
Colours
Color/Page
Light #ECECEA · Dark #0D0D0C
Behind the tiles.
Color/Tile
Light #FFFFFF · Dark #181816
Every tile and card.
Color/Text
Light #151514 · Dark #EEE8DD
Titles and text.
Color/Text muted
Light Ink at 55% · Dark Ink at 55%
Labels, captions and times.
Color/Line
Light Ink at 12% · Dark Ink at 13%
Hairlines between rows.
Color/Line strong
Light Ink at 28% · Dark Ink at 30%
Rules that must read clearly, such as input borders.
Color/Accent
Light #B8730F · Dark #EFB14E
Only the current hour, ruler markers and places left.
Color/Button
Light #151514 · Dark #EEE8DD
Button fill.
Color/Button text
Light #FFFFFF · Dark #0D0D0C
Button label.
Color/Paper
Light #FFFFFF · Dark #E9E4DA
Behind prints.
Color/Mount
Light #FFFFFF · Dark #262522
The Hour wall's slide mount frame.
Color/Mount text
Light Ink at 55% · Dark Ink at 60%
Captions on slide mounts.
Other palettes
Paste these into the colour styles to change the mood. Light and dark values for Page, Tile and Accent; keep Ink and Line as they are.
Fjord
Page #E9ECEE / #0B0E10
Tile #FFFFFF / #15191C
Accent #2F6F8F / #7FB8D4
Clay
Page #EEEAE6 / #120E0C
Tile #FFFFFF / #1C1714
Accent #A8573B / #E08A68
Moss
Page #ECEDE8 / #0D0F0B
Tile #FFFFFF / #171A14
Accent #5E7A3A / #A8C77A
Type
Text/H1 · page title, 46
Trips
Text/H2 · section title, 24
Huts and high passes
Text/H3 · tile title, 19
Lofoten, Norway
Text/Lead · under a title, 17
Assignments and personal work since 2014, newest first.
Text/Reading · CMS paragraphs, 15.5
Grey light is honest. It shows the colour of a red cabin as it is.
Text/Small · row text, 13
Winter light for a harbour hotel in Reine
Text/Body · short paragraphs, 13.5
Travel photographer in Vancouver.
Text/Label · small labels, 12.5
Next photo tour
Text/Reading H2 · CMS h2, 21
Twenty minutes at Vestrahorn
Text/Reading H3 · CMS h3, 15.5
What to bring
Text/Nav · navigation, 13.5
Trips Tours Prints Journal About
Text/Site name · the photographer's name, 27
Kit Halloran
Text/Button · inside buttons, 13.5
Send a brief
Pieces
Change the place and time zone in the layout template.
- 05:10First light
- 12:30Lunch at the col
- 18:40Golden hour
- 21:30Stars
Components
What each piece does and where to change it. Code components keep their settings in the right panel when selected.
Hour wall
The home wall and the band on each trip page. Frame, column width, sundial, Edges (soft focus or fade) and Hours (every hour, or only hours with photos). Its photos come from the hidden Wall feed list next to it: keep that list on the page.
Wall photo
Sits inside each Wall feed list and hands one CMS photo to the wall. Nothing to edit; change photos in the CMS.
Hour clock
The visitor’s time, a line about the hour on the wall, and a ruler that sends the wall to an hour. Edit the sentences in its settings.
Hour jump
The First light, Midday, Golden hour and After dark buttons. Set the label and the From and To hours.
Wall count
Counts the photographs on the wall and the places they come from.
Now in
The panel tile with the place you are in, its local time and both times on a 24-hour ruler. Set place, time zone and note.
Trip hours
The 24-hour strip on the Trips list. Bound to the trip’s name; type * to show every photo (as on About).
Day plan
A day on a tour. Write one stop per line in the tour’s Day plan field, time first: 05:10 First light.
Photo
Every photo outside the wall. Bind it to a CMS image or pick one; Shape keeps the frame or the photo’s own proportions; Load first for the top of a page.
Theme switch
Sun and moon switch. Start in sets what a first-time visitor sees.
Button and Submit button
Canvas components. The label is a property; the submit button has Sending and Sent states.
Example sections
How the pieces combine on a real page. Start a new section from the closest one; the /design-system skill points the Agent here first.
Page header
Top of every inner page: Text/H1 and Text/Lead in one tile.
Photo tours
Small groups, long days, planned around the light. I lead four or five a year, to places I have photographed for clients and know well. Each tour shows a typical day, hour by hour.
Rows with hairlines
Lists of short facts. Prefer it over cards and grids.
Who I work for
Hotels and lodges
38 commissions
Tourism boards
11 campaigns
Magazines and airline titles
24 stories
Outdoor and travel brands
7 campaigns
Photo tours
26 groups since 2018
Photo beside text
A section with one picture, using the Photo component. On phone the photo goes under the text.
I photograph places for the people who look after them.
Hotels, lodges, tourism boards and the magazines that write about them. I have been doing it from Vancouver since 2014, mostly in places where the weather has the final say.
I started as a hiking guide and picked up a camera to remember the routes. Clients asked for the pictures, then for more, and the guiding slowly turned into photography. The habit of planning a day around the light never left.
Booking
A call to action: one line, the email and a Button.
Booking spring 2027
kit@halloran.example
Send a brief
Hour wall kit
The wall with its hidden Wall feed list. Hour clock, Hour jump, Wall count and Trip hours read that list, so keep them on the same page.
Jump to
On the wall
When I work
Every photograph on the wall, by the minute it was taken. Most of the marks sit in the first and last hours of light.
Agent skills
Type a command in the Agent chat, then describe what you want. Each skill's rules are in Settings, Skills; edit them to suit your site.
/design-system
New pages, sections and tiles that match Stopover. It starts from the example sections above.
/add-photos
New photographs on the wall, new trips, or a photo's time, place or trip changed.
/rebrand
Your name, colours, type, booking details, contact form and site settings.
Always on
Colour and text styles only, the Inner page layout template for every new page, and what must not break.
Collections
Where each CMS collection shows up.
Photos
The home wall, each trip’s band, the hour strips on Trips and the strip on About.
Trips
The Trips list and trip pages, and each photo’s place, country and story in the open view.
Tours
The Tours list, tour pages and the Next photo tour tile on Home (the tour with Featured on).
Prints
The Prints list and print pages.
Journal
The Journal list and post pages.
Legal
Licensing, Privacy and Terms, linked from the footer.
Photographs
One grade for every photograph: cooler blues, softer contrast, warm highlights. Prints sit on Paper with a soft shadow; photos on the wall carry the sundial shadow of the hour.
Stopover, a Framer template by Ajoy