Saul Ferrant
Styleguide
The colours, type and parts Detent is built from.
Principles
One family, Inter, in four sizes.
Every colour comes from a token. Yellow marks where you are.
Space separates things. There are no divider lines.
Photographs fill their frames with square corners.
Hovers answer at once.
Colour
Background/Page
#FFFFFF
Surface/Soft
#F2F2F2
Text/Primary
#121212
Text/Secondary
#8C8C8C
Accent/Indicator
#F2B705
Typography
Red Desert
Display · Inter 500 · 56, 44, 32 px · h1
I photograph and direct campaigns and short films.
Lead · Inter 400 · 24, 22, 19 px
Most projects start with one picture in mind and grow into a series or a film.
Reading · Inter 400 · 18 px · paragraphs on project pages
Saul Ferrant
Body Strong · Inter 500 · 14 px
Campaign, 2026
Body · Inter 400 · 14 px
Halden Tailoring
Body Muted · Inter 400 · 14 px
Links
The current page shows its nav link on a yellow mark.
Components
Photo Wheel
Home. Reads the Wheel Item layers in the hidden CMS list on the page: the first image is the cover, a video inside plays in the stage, Wheel Title and Wheel Meta become the caption. Colours, margin, media width, thumb size, counter and the tick sound are controls.
Cursor Preview
Index rows. One shared card follows the mouse and swaps the cover of the row you are on. Off on touch screens.
Layout
12 columns with a 16 px gutter. Margins are 24 px, 16 px on phones. Breakpoints at 1200, 810 and 390. The header is fixed and fills the width.
Content
Projects: Title, Slug, Kind, Year, Client, Place, Summary, Cover, Video, Gallery and Body. The order of the collection is the order of the wheel and the index. Give every project its own cover.
Remix project