Styleguide
The tokens, text styles and parts this template is built from.
Principles
Every text uses a text style and every colour a token.
One 12-column grid. Navigation, content and footer share its lines.
Space and type size separate content. No divider lines.
One accent, used for the current page and the phone menu.
Hovers change colour or swap the cover beside the index instantly. Nothing grows.
Colour
Background/Page
#0F0F0E. Page.
Text/Primary
#E6E6E1. Text.
Text/Secondary
#7A7A75. Labels, years, quiet text.
Accent/Platen
#F0643A. Current page, phone menu.
Surface/Soft
#1B1B19. Image placeholders.
Border/Subtle
#2B2B28. Swatch edges on this page.
Typography
Rider
Display. Inter 500 uppercase, 40 / 32 / 26 px, h1 on page titles
Campaigns, catalogues and books.
Intro. Inter 500 uppercase, 12 px, h1 on Home and Contact
Marrow Tailoring makes coats and suits to order.
Body. Inter 500 uppercase, 12 px, line height 1.25
Porto, Portugal
Body Muted. Inter 500 uppercase, 12 px, Text/Secondary
Photographs by the studio
Small. Inter 500 uppercase, 12 px, credits only
Links
Nav Link. Header, footer and contact links. Hover and current page in the accent.
Name Link. The name in the header and the Previous and Next titles.
Quiet Link. Secondary links in Text/Secondary.
Components
Header: one component with Desktop, Tablet, Phone and Phone Open variants. The phone menu is the accent panel with large links and a Close toggle.
Work Row: one row of the Home index, bound to the Projects fields. Active indents the title and shows discipline and year; PlatenIndex.tsx sets it on hover and moves the Preview List to the same cover.
Footer: part of the Main layout template, switched off on Home with the template’s Footer toggle.
Layout
Breakpoints 1200, 810 and 390. Margins 20 px, 16 px on phone. Gutter 16 px, 12 px on phone.
Home and Contact are one screen split into two halves. Reading pages open 128 px below the top and keep 96 to 120 px between sections.
Motion
Link hovers: 0.15 s, ease out 0.33, 1, 0.68, 1. Index rows and covers switch instantly.
On touch screens the index steps through the work every 2.6 s.
All covers load with the page, so a hovered row never shows an empty frame.
Content
Projects collection: Title, Slug, Number, Code, Client, Discipline, Place, Year, Summary, Body, Cover, Gallery.
Number sets the order of the index, the covers beside it and the Previous and Next links.
Covers are unique per project. Galleries can repeat images.
Remix project