Studio for Public Play

Design system

Everything here comes from one print: a green ground, and shapes left as bare paper. The site is built the way the print is — a flat field, a few cut pieces, and a lot of room around them.

Foundation

What every page stands on: the three surfaces of the print, one typeface at a few sizes, a small label, and the six shapes.

01 / 06

Colour

Three surfaces, all taken from the print. Nothing on the site uses a colour that is not on the sheet.

Green ground

--print-mint · #CFE8CD

The printed field. Hero, the Events chapter.

Paper

--print-paper · #F8F7F2

The bare sheet. Every shape, the Shop chapter.

Ink

--black · #0C0C0B

All text. The Studio chapter, the footer.

White

--surface · #FFFFFF

Reading pages

Off-white

--surface-sunken · #F6F6F4

Quiet bands on reading pages

Emboss line

--print-line · #DEDCD3

Stripes on the scallop

Rule

--rule · #E3E3DF

Hairlines

Ink, at three strengths

Text is never coloured. Quieter text is the same ink, lighter. Contrast is measured on white; all three pass for body text.

Ink--ink · #0C0C0B · 19.5:1Titles, body, active tab
Muted--ink-muted · #55554F · 7.5:1Summaries, resting tabs, the grey half of the statement
Faint--ink-faint · #6B6B66 · 5.3:1Addresses, notes on sample content

02 / 06

Type

Instrument Sans, at a few sizes and three weights: 400 for the giant words and the statement, 500 for titles in lists, 600 for the hero and page titles. Big type does the work an image would do elsewhere.

Hero · 56–176px · 0.9
Public Play
Giant · 14% of the screen · 0.85
Come
Statement · 28–72px · 1.04
Studio for Public Play.
Page title · 34–72px · 1.0
Events
Event title · 22–32px · 1.15
An event title sits here
Body · 16px · 1.55
Two or three sentences: what happens, who it is for, what it costs.

03 / 06

Label

The small voice: mono, uppercase, 11px. It names things — tabs, indices, captions on a sheet — and is never used for reading.

Events
Tab: 01 / 03
Index: Opening soon.
Caption

04 / 06

Surfaces

A sheet is flat colour. A shape is paper with the faintest lift, like an emboss. The scallop alone carries ruled lines.

05 / 06

Layout

One gutter, shared by everything: 16px on a phone, 32px from tablet up. Sheets run edge to edge and are a full screen tall. Reading text stops at 62 characters.

Twelve columns. An event row splits them 2 · 7 · 3: day, what, way in.

06 / 06

Shapes

The six pieces of the print, traced by eye. They are the site's only illustration, and on the home page and in the footer they are loose.

flower
dart
scallop
arrow
egg
pebble

Components

The pieces the pages are made from, shown live.

01 / 11

Site bar

The name at the left edge, three tabs at the right, at every screen size. At the top of a page it is not a bar at all, only the type set straight on the sheet. Once the page is scrolled it slides up and away; called back by the pointer at the top edge of the screen, it returns as the frosted bar shown here, so it reads over whatever is passing beneath. Under the pointer an item answers as an event row does: a chip of ink wipes up behind it, the label steps right, and a small piece pops in beside it, each tab with the piece of its own chapter. The tab you are on keeps its piece showing; a fourth item, the cart with its count, appears once something is in it.

Studio for Public PlayEventsShopAbout

02 / 11

Pill

The one button. An outline that fills with ink on hover; on the ink sheet it flips on its own. Filled from the start, it marks the one thing a page wants pressed: Add to cart, Check out.

Events Add to cart

About

03 / 11

Text link

Always underlined, so a link never depends on colour. The underline darkens on hover.

Enquiries are welcome at an email address.

04 / 11

Shape

Any one of the six, at any size. It takes its colour from the sheet it is on: paper on green, green on paper and on ink. Given a photograph it becomes a window: the photo is cut to the outline and drifts inside it as the sheet scrolls.

05 / 11

Loose pieces

All six together, as things to pick up: grab one, move it, toss it, and it glides to a stop where it lands. A piece can carry a photograph cut to its outline; on the home page those are cover images of works, chosen in Sanity. Try it here.

06 / 11

Tile

The picture slot for an event or a product. With a photo it shows the photo; without one it shows a shape on one of the three sheets, so nothing is ever a grey box.

07 / 11

Page sheet

How Events, Shop and About open: a short band in one surface (green, paper, ink), the page title large at the bottom-left, one shape, a label at the right. The title rises and the shape is set down as the page arrives.

Events4 upcoming

08 / 11

Chapter

A full-screen sheet on the home page: two words pushed to opposite edges, one shape between them, a label bottom-left and the way in bottom-right. The shape can be a window onto a photo of a work, chosen in Sanity, which changes to a second photo once the sheet has arrived. A chapter holds its place while the next sheet slides up over it.

ComePlay

What is on, and what has been.Events

09 / 11

Event row

The day set large on the left, what and where in the middle, the way in on the right. Rows are divided by hairlines, never boxed. Under a mouse a row answers: green wipes up behind it from edge to edge, the title steps right and a piece pops out beside it. Try it.

24Nov · Tue
Drawing Herd pop-up
11:00 AM – 1:00 PM · Neighbourhood park · Seattle
Sample listing. A drop-in outdoor drawing class for all ages. Materials provided.
Sign up

10 / 11

Cart

A sheet of paper that slides in from the right when something is added, and from Cart in the site bar. Each line has a quantity (minus, number, plus in one outline) and can be removed; the filled pill at the bottom goes to the checkout, where the whole cart is paid for at once. The cart is kept in the visitor's own browser.

Check out

Motion

Things move the way pieces are laid on a sheet: one at a time, into place, and then they stay.

01 / 06

Principles

Three rules.

01Swept in, set down softlyPieces sweep into place one after another from well outside, small and turned, quick at first and then a long settle with no bounce.
02Scroll is the handOn the home page nothing moves on a timer. Words and shapes move because you scrolled.
03Then it restsOnce something has arrived it is still, until someone picks it up. Nothing loops except the scroll cue.

02 / 06

Timing

One curve, quick out and slow to settle, at a handful of lengths.

--dur-fast150msHover: pill fill, tab colour, underline
--dur250msReserved for small state changes
500msThe site bar leaving and returning
700msA new page sliding up over the old one
1100ms+90ms eachFooter pieces falling into their row
1100ms+90ms eachThe hero title rising, a line at a time
2000ms+140ms eachHero pieces sweeping in, one after another
--easecubic-bezier(0.22, 1, 0.36, 1)Everything above but the pieces
--ease-softcubic-bezier(0.16, 1, 0.3, 1)The pieces settling: a longer tail

03 / 06

Scroll

The home page is one long scroll of sheets. Every movement on it is tied to how far the page has been scrolled.

DriftA chapter's two words slide in from the edges and are settled by the time the sheet fills the screen.
RiseThe chapter's shape travels up through the sheet, turning a little, for as long as the sheet is in view.
LiftThe hero holds the screen while its pieces lift away, the title follows them, and the statement comes in: each word rises into place, and the phrases that matter most get a strip of ink laid under them, their words turning to paper on it.
CarryThe hero's flower does not lift away with the others. It waits beside the statement, then flies down onto the next sheet, in behind its words, and becomes that chapter's shape.
CoverA sheet holds its place while the next slides up over it, so the colour changes as a wipe, not a cut.
WindowA photograph inside a chapter's shape drifts down while the shape rises, and gives way to a second photograph: in the flower while it flies down, in the other chapters a beat after the sheet arrives.
DealEvent rows come in one at a time as they reach the screen, the date a beat ahead of the rest.
ClimbThe Studio's name in the footer climbs into place as the footer enters.

See them on the home page.

04 / 06

Snap

The home page moves one sheet at a time. The hero scrolls freely for a little over one screen, while it changes, and rests with the statement in place; every sheet after it is exactly one screen, and the scroll comes to rest with a sheet filling it. Other pages scroll freely.

05 / 06

Between pages

Going from tab to tab, the new page slides up over the old one like a fresh sheet laid on the pile, and the old one sinks back a little. The site bar holds still. It is the same cover the home page's sheets make.

06 / 06

Reduced motion

If a visitor has asked their device for less motion, nothing travels: shapes and words are simply in place. In the hero the pieces and the title fade out and the statement fades in, and pages change without sliding. Pieces can still be moved by hand.

Interaction

How the site answers a mouse, a keyboard and a finger.

01 / 03

Hover

Hover moves things toward full ink: a resting tab darkens, an underline darkens, a pill fills. A loose piece lifts under the pointer, and the whole set leans a little toward the mouse. An item in the site bar takes a chip of ink and a piece, an event row takes a wash of green and a piece, and a shop card's picture swells a little and shows where it leads. Reaching the top edge of the screen brings the site bar back.

02 / 03

Focus

Every link and button shows a blue ring when reached by keyboard. Blue is the one colour not from the print, on purpose: it has to read as the browser speaking, not the design.

Events

03 / 03

Touch

Anything tappable is at least 44px tall, even when it looks smaller. A finger that starts out sideways on a piece moves it; one that starts up or down scrolls the page, so a piece never traps the scroll. With no hover to bring it back, the site bar returns when the page is scrolled up.