Léa Montel
Styleguide
The tokens, text styles, links, components and rules behind the Léa Montel template.
Principles
Every text uses a text style and every colour a token.
One 12-column grid with 16 px margins and gutters at every size.
Square media, sentence case, no dividers and no small uppercase labels.
Links fade to 56 % in 0.15 s on hover. Nothing scales.
Green and pink appear only on Info, the 404 page and the text selection.
Colour
Background/Primary
#FFFFFF · Pages
Background/Info
#00492B · Info, 404, selection
Text/Primary
#000000 · Text, active links
Text/Secondary
Black at 56 % · Link hover on white
Text/On Info
#EBAEED · Text on green
Text/On Info Hover
Pink at 86 % · Link hover on green
Surface/Placeholder
#F2F2F2 · Empty media
Typography
I photograph animals, objects and light.
Statement · Switzer 400 · 40/48, 32/40, 26/32 · Info statement (H1 twin)
Steel on blue
Heading · Switzer 400 · 24/30, 22/28, 20/26 · Work titles, 404 (H1 twin)
Everyday steel tools, shot like jewellery.
Body · Switzer 400 · 14/20 at every size · everything else (H1 twin for Home)
Links
Components
Corner Bar, Default variant: name and Info link, in the layout template.
Corner Bar, Info variant: used on Info and the 404 page, Close goes home.
Work Slide: the Home slider item, linked to its work page.
Index Thumb: the Index grid item, 3:2.
WorkScroll3D: the Home slider code component. Connect the Work Collection List to its Content slot; tune Distortion, Refraction, Dispersion, Sheen, Drift Speed, Bend and Drum Angle in its properties.
Layout
Breakpoints: Desktop 1200, Tablet 810, Phone 390.
Margins and gutters 16 px. Section spacing 160, 120 and 90 px.
Work details: summary in columns 1 to 4, year and place 5 to 7, client and role 9 to 12.
Work images: small 5 columns left, medium 8 right, large 10 centred.
Motion
Home slider: WebGL bend on desktop, CSS 3D drum on phone and iPad, a plain list for reduced motion.
Glass effect follows scroll speed: rainbow dispersion, lens and sheen rise early, the warp only at a fast flick, all back to exactly 0 at rest.
Drift: works move up by themselves; your input takes over and the drift returns after about a second.
Caption crossfade 300 ms, Index thumbnails fade in 600 ms with a 50 ms stagger.
Page load: content rises 90 px and fades in over 1.2 s, once.
Smooth Scroll: a template toggle, off by default.
Content
Work collection: Title, Slug, Order, Summary, Body, Year, Location, Client, Role, Cover, Image 2, Image 3, Image 4, Featured.
Order sets the Home sequence and Previous and Next. Featured works appear on Home.
Every image keeps its alt text from the CMS.
Remix project