Styleguide
The system behind the Léon Varet template.
Everything on this page is live: the colours are the project’s colour styles, the samples use the real text styles and the components are real instances. Change a style once and every page follows.
Principles
One text size for the interface. Hierarchy comes from colour, position and the grid, never from scale.
Black, white and one grey. Lime appears only behind the mobile menu.
Every element sits on one 12 column grid with 8 px margins and gutters.
Photographs lead. The interface stays quiet and never covers an image.
Hover answers in a fifth of a second; reveals take their time.
Colour
Background/Primary
#FFFFFF
Background/Inverse
#000000
Background/Placeholder
#F2F2F2
Background/Accent
#D6F24A
Text/Primary
#000000
Text/Secondary
#B3B3B3
Text/Inverse
#FFFFFF
Text/Inverse Secondary
White 50%
Text/On Accent
#000000
Text/On Accent Secondary
Black 45%
Typography
Photographs of animals, objects and people, made in Marseille.
Body. Inter 450, 14 px, line height 1.25, tag p. Every interface text.
Second Skin
Body Heading. Same as Body with tag h1. One per page: the page or project title.
LV
Mark. Inter 600, 22 px, tracking -0.04 em. The monogram in the header.
About
Menu. Inter 500, 76 px, tracking -0.045 em, line height 0.9. Mobile menu links.
Léon Varet
Wordmark. Inter 500, 266, 178 and 84 px per breakpoint, tracking -0.045 em. On the live site it stretches to fill the window edge to edge.
Links
Nav. Black, grey on hover and on the current page.
Inline. Black, grey on hover.
Inverse. White on black, half white on hover. Footer.
Components
Work Media, Small Portrait. One of five sizes chosen by the Layout field in Works; the Large sizes span two columns on Home.
Work Media, Small Square. On hover the second frame of the series fades in.
Header. One line on desktop and tablet. On phone it becomes Menu and Close, with the links set large on a full screen of lime.
Layout
Breakpoints: desktop from 1200 px, tablet from 810 px, phone below.
12 columns, 8 px margins and 8 px gutters. The header, footer, work page and imprint all start on these lines.
Home packs the work into 5 columns on desktop, 3 on tablet and 1 on phone.
The footer is a curtain: it stays fixed and the page lifts off it as you reach the end.
1
2
3
4
5
6
7
8
9
10
11
12
Motion
Intro: on every page load the name rises letter by letter while photographs flip every 200 ms, then the page fades up. Preloader component in the layout template.
Hover: the second frame of a series fades in over 0.2 s.
Pages: content fades up 20 px over 0.5 s.
About: the portrait drifts slower than the page.
Smooth scroll: Lenis, switched on or off with the Smooth Scroll toggle of the Main layout template.
Content
Works: Title, Cover, Hover, Layout, Tags, Year, Client, Location, Description, Gallery (image and alt text) and Order. Home and the Next link follow the CMS order.
Tags: Name and Order. Shown in grey under every card and on each work page.
Every cover is used once. Galleries may repeat photographs.
Remix project