Styleguide
The colours, type and components used across Halvor.
Principles
One family: Instrument Sans Bold, set in capitals.
Four sizes: Display, Lead, Body and Small.
Twelve columns with 8 px margins and gutters.
Photographs fill their frames; only the gallery sphere uses light plates.
Links invert on hover at once. Nothing scales on hover.
Colour
Background/Page
#FFFFFF
Surface/Plate
#F4F4F4
Surface/Inverse
#171717
Text/Primary
#171717
Text/Muted
#9A9A9A
Text/Inverse
#FFFFFF
Border/Field
#171717
Typography
Rygg
Display · 160, 112, 48 px · line 0.86 · page titles, h1
I photograph objects, animals and people.
Lead · 24, 24, 20 px · statements and next links
A dalmatian and a labrador on a plain backdrop.
Body · 14 px · navigation, rows and paragraphs
Category, client and year labels.
Body Muted · 14 px · labels and secondary values
Drag to look around and click a frame to open it.
Small · 12 px · the gallery intro line
Components
Menu
Header · Desktop, Tablet, Phone and Phone Open; the link of the current page turns black
Text Button · Default, Sending, Sent and Error
Layout
Desktop 1200 px and up, tablet 810 px, phone 390 px.
Twelve columns, 8 px margins and 8 px gutters on every breakpoint.
Labels sit on columns 1 to 6, content on columns 7 to 12.
Page titles start 120 px from the top.
Motion
Sphere Gallery: drag to turn, click to open, one second ease in and out.
Page titles rise letter by letter; content follows in order.
Photographs settle inside their frames as they arrive.
Preloader: counts up once per visit, then fades.
Content
Works collection: Title, Slug, Number, Category, Client, Year, Place, Summary, Description, Cover, Gallery.
Number sets the order on Works, in the sphere and for Next project.
Every cover is used once. Every image has alt text.
Remix project