Styleguide
Colours
Background/Primary
#FFFFFF
Background/Inverse
#000000
Text/Primary
#000000
Text/Inverse
#FFFFFF
Text/Muted
Black at 40%
Text/Separator
Black at 20%
Surface/Placeholder
#F2F2F2
Type
Display · Anton 400, 104 / 72 / 40, uppercase
Kestrel
Statement · Anton 400, 52 / 40 / 28, uppercase
Brand and digital studio
Statement Link · Anton 400, 52 / 40 / 28, underlined
Start a project
Body · Host Grotesk 500, 15 / 22.5
Velocity is a brand and digital studio in Rotterdam.
Menu · Anton 400, 76, on Background/Inverse
Info
Links
Rest, hover, current
Links rest at 45% opacity, turn solid on hover in 0.15 s and stay solid for the page you are on. No blur, no underline.
Separators
The slashes in Index / Work / Archive use Text/Separator and never change.
Arrows
Previous and Next use the Phosphor Arrow Left and Arrow Right icons from Framer’s icon sets, never arrow characters.
Components
Layout
Grid
12 columns with 12 px margins and gutters at every breakpoint.
Breakpoints
Desktop 1200, Tablet 810, Phone 390.
Top gap
Pages start 48 / 40 / 32 px below the top bar, set once in the Main layout template.
Frame
The Header and Bottom Bar stay fixed on white plates; the Badge Space switch keeps the bottom right corner clear.
Motion
Index hover
The project name you point at blurs 8 / 7 / 6 px in 0.35 s while the others stay sharp, and its cover shows in the corner. On phones the name nearest the middle of the screen does the same.
Preloader
A black screen with a flipping stack of project covers on the first visit and on every page change.
Smooth scroll
Lenis, switched on or off with the Smooth Scroll setting of the Main layout template.
Reduced motion
Visitors who ask for reduced motion skip the preloader and every transition.
Content
Projects
Title, client, year, discipline, summary, story, cover, preview and layout images. Order sets the index and Previous / Next.
Archive
Image, caption, size S / M / L, order and the project it belongs to.
Team
Name, role, portrait and link.
Recognition
Award and entries.
Services
Name and order.
Remix project