Styleguide
The tokens, type, components and rules behind Studio Aven.
/
Principles
Two colours carry the site: off-white #FAFAFA and lifted black #0A0A0A. The Archive adds one neutral grey.
Two typefaces: Instrument Serif for names and titles, Host Grotesk for everything else.
Every page sits on one 12-column grid with 12 px margins and gutters, edge to edge.
Groups are separated by space, not by lines. Form fields are the only exception.
Motion stays calm: fades, slow drift and parallax. Nothing scales on hover.
/
Colour
Background/Page
#FAFAFA
Background/Inverse
#0A0A0A
Text/Primary
#0A0A0A
Text/Secondary
#030303
Text/Inverse
#FAFAFA
Text/Inverse Secondary
#F0F0F0
Text/Accent
#AAAAAA
Text/Accent Secondary
#696969
Surface/Row Hover
#E9E9E9 at 10%
Overlay/Scrim
#030303 at 30%
Overlay/Video
#030303 at 30%
Border/Field
#E9E9E9 at 10%
/
Typography
Paper Lanterns
Display, Instrument Serif 400, 68 / 56 / 44 px, line height 1.0, h1
Two sisters return to their mother’s flat in Margate with a van booked for Monday.
Lead, Host Grotesk 500, 24 / 20 / 18 px, line height 1.25
Written and directed by
Label, Host Grotesk 700, 12 px, uppercase
Westway Film Fund, Bristol, UK
Body, Host Grotesk 500, 12 px, line height 1.45
/
Links
/
Components
Button: Default, Hover, Pending, Success and Error. The Contact form switches the states.
Filter Tab: Default and Active, with a hover state. The Archive filter sets the active tab.
Archive Row: Desktop, Tablet and Phone, each with a hover fill. Its cover follows the cursor through the CursorPreview code component.
Paper Lanterns
See project
Home Title: hovering cross-fades the work title to See project and swaps the Home background to its cover.
/
Layout
12 columns with 12 px margins and 12 px gutters on every breakpoint.
Desktop from 1200 px, Tablet 810 to 1199 px, Phone below 810 px.
Vertical rhythm: 12, 24, 48, 96 and 144 px. Sections step down to 120 on tablet and 96 on phone.
Content starts on column 5, in line with the About link in the navigation.
/
Motion
Hover fills and filter tabs change in 0.15 s with an ease-out curve.
On Home, a hovered work’s cover fades in from 1.05 scale over 0.7 s. The titles drift slowly in a loop.
Work images move up to 88 px through the viewport with the withParallax override.
The Archive preview follows the cursor directly and only fades in and out.
Reduced motion settings are respected.
/
Content
Works: Title, Number, Year, Category, Client, Role, Format, Location, Featured, Home Order, Cover, Gallery, Film URL, Summary, Synopsis, Production, Credits.
Categories: Name, Order. They drive the Archive filter.
Recognition: Title, Year, Type (Award, Feature or Training) and Work. The About page and each work page read it.