Style guide

How the template is built.
Change it here, every page follows.

Colours, type and components all come from styles. This page is hidden from search; delete it or keep it for whoever edits the site next.

Start here

Six things to change first.
In this order.

01

Change the name

Della Marsh appears in the Wordmark component, the footer and each page title. Search the project for it once and replace them all.

02

Replace the photos

Each song in the Setlist collection has its own photo, and those drive the opening. Band, Shows, Releases, Products and Diary each carry their own images.

03

Add your dates

Every night is an item in Shows. Tick Played after the show and add the setlist; it moves to Already played on Shows and into the set changes on Home on its own.

04

Pick your colours

Each colour style has a light and a dark value. The House lights switch in the menu swaps between them for visitors.

05

Send the forms somewhere

The contact form and the pre-sale form each need a destination. Select the form and set it in the panel on the right.

06

Check the fonts

Sofia Sans Semi Condensed for headings and Sofia Sans for text. Code components have a font control, so set it there too if you change them.

Colours

Ten colour styles.
Each with a light and a dark value.

Switch the House lights in the menu to see the dark values on this page.

Page

Light #EEEBE5, dark #0C0B0A

Background of every page

Surface

Light #E3DFD7, dark #171614

Behind photos while they load

Ink

Light #161411, dark #EFECE6

Headings, body text, buttons

Muted

Light #6E6961, dark #8E8981

Second lines, labels, notes

Faint

Light #ADA79D, dark #46433E

Songs not yet played

Line

Light #161411 at 14%, dark #EFECE6 at 14%

Hairlines between rows

Accent

Light #C2402A, dark #E35B40

The song playing now, one per screen

Stage

Light #0C0B0A, dark #0C0B0A

Pinned scenes and the closing

Photo text

Light #F3F0EA, dark #F3F0EA

Words over photos

Photo muted

Light #F3F0EA at 68%, dark #F3F0EA at 68%

Second lines over photos

Other palettes

Three accents that also work.
Change Page, Ink and Accent to try one.

Lake Effect

Now playing

Exit sign

Page #EDEEE8, ink #141714, accent #2F7A4E. A green for venues that light their exits.

Lake Effect

Now playing

Gel blue

Page #ECEDF0, ink #12141A, accent #2F55B5. Cooler, for a band that plays under blue gels.

Lake Effect

Now playing

Tungsten

Page #F0EBE1, ink #1A1611, accent #B4651B. Warmer, closer to an old theatre.

Type

Fifteen text styles.
Two families, regular and medium.

Headings are Sofia Sans Semi Condensed, text is Sofia Sans. Sizes step down on tablet and phone inside each style.

Display

Regular, 104px, h1

Low Ceiling

Low Ceiling

Statement

Regular, 72px, h2

Fourteen nights

Fourteen nights

Heading

Regular, 40px, h3

The Halsted Room

The Halsted Room

Title

Medium, 26px, h4

Chicago, Illinois

Chicago, Illinois

Date

Regular, 30px, p

March 28

March 28

Lead

Regular, 20px, p

Della Marsh and her band play fourteen nights in March.

Della Marsh and her band play fourteen nights in March.

Article

Regular, 19px, p

We loaded in at four and the room was already warm.

We loaded in at four and the room was already warm.

Article heading

Regular, 34px, h2

Load-in

Load-in

Body

Regular, 16px, p

Doors at seven, support at eight, Della and the band at nine.

Doors at seven, support at eight, Della and the band at nine.

Small

Regular, 14px, p

Ages 18 and over, ID at the door

Ages 18 and over, ID at the door

Label

Medium, 13px, p

Now playing

Now playing

Button

Medium, 15px, p

Get tickets

Get tickets

Nav

Medium, 15px, p

Shows

Shows

Wordmark

Regular, 24px, p

Della Marsh

Della Marsh

Opening

Regular, 28px, h1

Low Ceiling Tour, March 2027

Low Ceiling Tour, March 2027

Components

Buttons, the submit button and the switch.
Each is a component, so one edit covers every page.

Get tickets

Button, Ink

The main action on a page. Label and link are controls.

Show details

Button, Line

The second action beside an Ink button.

Get tickets

Button, Photo

For buttons over photos and the stage colour.

Submit button

Used by both forms. Label and Sent text are controls; Sending and Try again are variants.

Submit button, sent

What a visitor sees after the form goes through.

House lights

The light and dark switch in the menu. It remembers the visitor’s choice.

Code components

Eight pieces of code.
Every control has a plain name.

Each one reads from a collection where it can, so changing content never means opening the code. All of them hold still when a visitor asks for reduced motion.

Setlist Row and Setlist Photo

Setlist Row and Setlist Photo

The opening. One of each per song in a list of the Setlist collection; the list pins and the songs play as the page scrolls. Bind Place to the item index.

The opening. One of each per song in a list of the Setlist collection; the list pins and the songs play as the page scrolls. Bind Place to the item index.

Show Row

Show Row

Tour dates with the running order for each night: doors, support, headliner, curfew. Hover or tap a row to see its night.

Tour dates with the running order for each night: doors, support, headliner, curfew. Hover or tap a row to see its night.

Front Row

Front Row

The walk from the back of the room to the barrier. Room, crowd in front and up close are three photos.

The walk from the back of the room to the barrier. Room, crowd in front and up close are three photos.

Play Count

Play Count

A record’s songs set heavier the more nights they were played. Bind Nights per track.

A record’s songs set heavier the more nights they were played. Bind Nights per track.

Band Spot

Band Spot

The stage plot. Position decides where each player is marked; hover or tap a name for their portrait.

The stage plot. Position decides where each player is marked; hover or tap a name for their portrait.

Night Tab

Night Tab

How the setlist changed from night to night. Each played show is a tab; songs move from where they were the night before.

How the setlist changed from night to night. Each played show is a tab; songs move from where they were the night before.

House Lights Scene and switch

House Lights Scene and switch

The closing photo brightens as the page ends, and the menu switch swaps light and dark.

The closing photo brightens as the page ends, and the menu switch swaps light and dark.

Track overrides

Track overrides

withSetTrack, withFrontTrack, withLightsTrack and withPin set how long each pinned scene lasts. Put them on the section and its sticky layer.

withSetTrack, withFrontTrack, withLightsTrack and withPin set how long each pinned scene lasts. Put them on the section and its sticky layer.

Collections

Nine collections.
Most of the site is edited here.

Setlist

The songs in the opening, in order, each with its photo. Encore marks the last songs.

Shows

Every night of the tour. Played nights carry their setlist and move to Already played.

Releases

Records, with a Tracks list that feeds Play Count.

Products

The merch table. Featured puts a piece on Home, up to four, in Order. Buy link points at your shop.

Diary

Tour diary posts.

Band

The players on the stage plot and the About page.

Press

Quotes on the About page.

FAQs

Questions on Shows and Shop, picked by Topic.

Legal

Privacy policy, terms of use and ticket terms. Placeholder text to replace.

Create a free website with Framer, the website builder loved by startups, designers and agencies.