studiofour.design: every page
Pick a page. Switch Desktop and Mobile above; try a font or a colour and the pages change with it. The motion is "the mix": calm interface, headlines that rise line by line, and the work gets the drama. Hover or tap the work.
Type pairings
Twelve neutral, friendly sans fonts, each paired with a mono for labels. The FOUR wordmark stays as drawn. Tap "Use this" and every page and the brand book switch to it.
Colour samples
Four directions built from your references: blurred sky and meadow, orange and violet blooms, frosted glass, a dot grid and contour lines. These replace navy, forest and paper. The accent stays under 10% of any screen. Tap "Preview on pages" to see it on the site.
How Studio Four moves
Calm interface, editorial headlines, cinematic work. One movement per interaction, nothing bounces, and the "reduce motion" setting turns all of it into simple fades.
| Moment | What happens | Timing | Where |
|---|---|---|---|
| Page arrives | Items fade in and rise 8px, one after another | 480ms stagger 35ms ease (.16,1,.3,1) | Every page |
| Hero headline | Lines rise from behind a mask, once per page | 700ms line stagger 80ms | Page headlines |
| Section titles | Rise into view as you scroll to them | 700ms | H2s |
| Hover a card | Lifts 2px; the still turns into a slow loop | 240ms lift · 600ms crossfade | Work cards |
| Work list | Name slides 8px; the project image follows your cursor | 240ms | Work, list view |
| Reel | Grows from 86% to full width as you scroll; corners flatten | Scroll-linked | Home |
| Open a project | The card's image expands to fill the screen | 700ms ease (.65,0,.35,1) | Work cards |
| Press a button | Scales to 97% | 160ms | All buttons |
| Menu | One highlight glides between items | 240ms | Pill nav |
No bounce. Animate only position, scale, opacity and a little blur. No looping decoration except work loops, which play only on hover or tap. Headline reveals happen once, never on every scroll. Everything has a reduced-motion version.
Assets to send
Every photo and clip the two sites are waiting for. Tick an item when you've sent it. Your ticks save, and Claude can see them.
Brand book
Twelve spreads. The type, colour and texture spreads update when you change the pickers above.