Style guide. How Pentimento is put together, and where to change each part.

Set up

1. Replace the works

CMS, Works. Each work has an image, title, year, medium, height and width in centimetres, status, price, series and a note. The sizes drive the wall and the scale view, so type the real ones.

2. Choose the hero

Tick Featured on up to three works. The hero reads them in the order they appear in the collection.

3. Change the headline

On Home, select the Close Reading component inside Hero and edit Headline and Headline, quiet part.

4. Colours and type

Assets, Styles. Seven colour styles and ten text styles run the whole site. If you change the typeface, also type its family name into the Font control of each code component.

5. Send the form somewhere

On Contact, select the Enquiry form and choose where submissions go.

6. Replace the legal copy

CMS, Legal. The three pages ship with placeholder text.

7. Name the site

Site settings: title, description, language, icons and social image.

Colours

Paper

#FBFAF7 · Page ground

Ground

#EFEDE7 · Behind pictures

Ink

#14130F · Text and buttons

Muted

#77746B · Captions

Quiet

#A3A097 · Second tone of headings

Hairline

Ink at 14% · Rules

Accent

#E2502A · Frame, sold dot, hover

Other palettes

Chalk, cooler

Paper #F7F8F6 · Ground #E9EBE7 · Ink #121413 · Muted #6F7471 · Quiet #9DA29F · Accent #2B5BD7

Linen, warmer

Paper #F6F1E8 · Ground #EAE2D3 · Ink #1B1712 · Muted #7A7062 · Quiet #A89E8E · Accent #B8452A

Slate, neutral

Paper #F4F4F2 · Ground #E4E4E0 · Ink #111111 · Muted #6E6E6A · Quiet #9E9E99 · Accent #1F7A5C

How to use one

Open each colour style and paste the value. Hairline is Ink at 14% opacity. Nothing else needs changing.

Type

Display: paint is not flat

Page headings, 56 / 44 / 32 · Mona Sans

Statement: paint is not flat

Section statements, 44 / 36 / 28 · Mona Sans

Heading: paint is not flat

Section titles and quotes, 32 / 28 / 24 · Mona Sans

Title: paint is not flat

Row and card titles, 22 / 20 / 19 · Mona Sans

Lead: paint is not flat

Opening paragraphs, 22 / 20 / 18 · Mona Sans

Body: paint is not flat

Running text, 16 · Mona Sans

Label: paint is not flat

Labels, facts and links, 15 · Mona Sans

Small: paint is not flat

Captions and dates, 14 · Mona Sans

Nav: paint is not flat

Navigation and buttons, 15 · Mona Sans

Name: paint is not flat

The name in the navigation, 16 medium · Mona Sans

Components

Close Reading

Code. The hero and the scene on each work page: the whole painting with a travelling frame, and a large detail of what is inside it. Edit the headline, detail share and colours on the component; the content comes from the CMS list it sits in.

Pentimento

Code. Available works stacked in one frame; scrolling pulls the top one away in knife strokes. Controls: picture shape, number of pulls.

Scale Work, Scale Figure, Scale Ruler

Code. The wall on Home and the scale view on each work page. Sizes come from Height and Width in the CMS. On the wall the scale follows the window; elsewhere set Pixels per cm.

Lit Image

Code. A photograph that takes the light as you scroll or move the pointer. Controls: relief, shine, what the light follows. Falls back to the plain photograph.

Preloader

Code. In the Main layout template. The first page of a visit hangs a touch crooked, like a picture just put on its nail, and settles while a spirit level finds the middle. Under a second, once per visit, then it removes itself; it is off for visitors who ask for reduced motion. Controls: tilt, seconds, level width, colours, nail, once per visit.

Overrides

Reading.tsx. withScrollTrack goes on a tall section, withSmallViewport on the pinned frame inside it, withWallWalk on the wall strip. Leave them where they are.

Navigation

Canvas component with Desktop, Tablet, Phone and Phone open variants. Edit the name and links in the component.

Button, Submit Button

Canvas components. Button has a Label and a Link. Submit Button has Default, Pending, Success and Failed variants for the form.

FAQ Row

Canvas component with Closed and Open variants; Question and Answer come from the FAQs collection.

Collections

Works

The hero, the wall, available works, the Works page and each work page.

Exhibitions

The list on Home and the Exhibitions page.

Journal

The three notes on Home, the Journal page and each note.

Services

Working with the studio and its four pages.

Press

The quotes on Home and on Studio.

FAQs

The questions on Working with the studio.

Legal