Styleguide
The tokens, type, components and rules behind Studio Aven.
/
Principles
Two colours carry the site: warm black #140802 and paper #E6E6E6. The Archive adds one subtitle yellow.
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
#140802
Background/Inverse
#E6E6E6
Text/Primary
#E6E6E6
Text/Secondary
#E6E6E6 at 56%
Text/Inverse
#140802
Text/Inverse Secondary
#140802 at 50%
Text/Accent
#E8C24A
Text/Accent Secondary
#E8C24A at 56%
Surface/Row Hover
#E6E6E6 at 8%
Overlay/Scrim
#140802 at 40%
Overlay/Video
#140802 at 35%
Border/Field
#E6E6E6 at 24%
/
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.
Noise: film grain over the Home showreel. Overlay blend, 25 percent, 1.5 px grain, 12 fps.
/
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.
Remix project