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 zoom an image inside its frame; table rows switch instantly. Nothing grows.
Colour
Background/Page
#0D0D0C. Page.
Text/Primary
#EDEDE9. Text and the wordmark.
Text/Secondary
#8A8A85. Labels, years, quiet text.
Accent/Crossandra
#F0643A. Current page, phone menu.
Surface/Soft
#1A1A18. Row hover, image placeholders.
Border/Subtle
#2B2B28. Swatch edges on this page.
Typography
AK
Wordmark. Geist 500, 232 / 150 / 104 px, line height 0.8
Red Desert
Display. Geist 500, 64 / 48 / 36 px, h1 on page titles
Identities, books and type for cultural clients.
Intro. Geist 400, 15 px, h1 on Home, Work and Index
Marrow Tailoring makes coats and suits to order.
Body. Geist 400, 15 px, line height 1.3
Lisbon, Portugal
Body Muted. Geist 400, 15 px, Text/Secondary
Head: Angelica by DarkNik, CC BY 4.0
Small. Geist 400, 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.
Head3D: the 3D head on Home. Controls for the model, its maps, Style (Natural, Plaster, Halftone), bugs, colours, Fade Bottom, Follow Cursor, Zoom and Offset Y.
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.
Pages open 128 px below the top and keep 96 to 120 px between sections.
Motion
Link and row hovers: 0.15 s, ease out 0.33, 1, 0.68, 1.
Cover zoom on Work: 1.04 in 0.6 s.
The head turns toward the cursor and holds still for visitors who prefer reduced motion.
Content
Projects collection: Title, Slug, Number, Code, Client, Discipline, Place, Year, Summary, Body, Cover, Gallery.
Number sets the order on Work and Index and the Previous and Next links. Code is the label shown in the Index.
Covers are unique per project. Galleries can repeat images.
Remix project