Styleguide
The system behind this template: principles, colour, type, components, spacing and motion. Use it as a reference while you customize, then delete this page when you are done.
Maël Blanc
Principles
Colour
Surface/Primary
Soft panels
Light #EFEFEF / Dark #0F0F0E
Surface/Secondary
Page background and inputs
Light #FFFFFF / Dark #1A1917
Surface/Inverse
Dark fills
Light #111111 / Dark #F0EDE6
Surface/Inverse Hover
Dark button hover
Light #333333 / Dark #FAF8F4
Text/Primary
Headings and main text
Light #111111 / Dark #F0EDE6
Text/Secondary
Paragraphs and meta
Light #8A8A8A / Dark #8F8A82
Text/Inverse
Text on dark fills
Light #FFFFFF / Dark #0F0F0E
Accent/Primary
Used sparingly
Light #111111 / Dark #E8603F
Border/Default
Rules and inputs
Light #D4D4D4 / Dark #F0EDE6 at 14%
Border/Strong
Focus borders
Light #111111 / Dark #F0EDE6
Static/White
Text on photos
#FFFFFF in both modes
Static/Black
Text on light buttons
#111111 in both modes
The site follows the visitor’s light or dark setting. Static colours keep text readable on photos in both modes.
Typography
Display
120 / 72 / 48, weight 600, tracking -6%
Brands you can hold
Heading 2
64 / 42 / 34, weight 600, tracking -4.5%
Brands you can hold
Heading 3
40 / 22 / 20, weight 600, tracking -3.5%
Brands you can hold
Body Large
26 / 19 / 18, weight 500, tracking -2%
Body
17 / 15 / 15, weight 400, tracking -1%
Small
14, weight 500, tracking -1%
Label
11, weight 500, tracking 2%, uppercase
Inter is the only typeface. Change it in the text styles and every page follows.
Button. Dark and Outline on light backgrounds, Light and Outline Light on photos or dark panels. Hover changes the fill only.
Submit Button. Used only inside forms.
Link. Every standalone text link uses it. The text rolls on hover.
Section label
Section Header. Opens every section: a plain label and a count or link.
Service Row. Compact rows from the Services CMS. On desktop the row inverts on hover and previews cycle with a blur.
Project Card. Wide, Large and Small. Hover darkens the image, shows a label and zooms out; the image has its own parallax.
Award Row. Year, award, project and category.
Breakpoints: desktop from 1200px, tablet 810 to 1199px, phone up to 809px.
Side margins: 32px on desktop and tablet, 20px on phone.
Section padding: 120px, 96px and 80px.
48px between a section header and its content, 32px between blocks.
Work grid: full width, 7 and 5, full width, 5 and 7.
Spacer, 1fr
Content, 1fr, starts at 50%
Split sections put their content in the right half, aligned to the page midpoint.
Springs without bounce, 0.3 to 0.45 seconds.
Blur is the signature: previews, counters and the hero name resolve from blur.
Parallax lives only inside image frames.
Nothing scales on hover or tap. Reduced motion is respected.
40+
Counters count up with a blur when they scroll into view.
Content model
Projects
Title, Summary, Client, Year, Services, Industry, Cover Image, Gallery with Alt text, Featured, Case Study
Home shows the first 4 featured projects. Work shows all of them.
Services
Title, Description, Preview 1 to 4
The same list appears on Home and About.
Remix project