(Template)
Read this first
Template guide
(Start here)
Six steps from demo to your own site.
01
The name appears in four places: the nav logo, the hero wordmark and the footer wordmark (both Type Zoom, Word) and the preloader (Brand). Change each once; the large ones resize to fit.
02
Assets, then Colors. Eleven colour styles drive every page in light and dark. Start with Paper, Ink and Accent. Three ready-made palettes are listed further down this page.
03
Assets, then Text. Display and headings use Inter Display, body and labels use Inter, emphasis words use Instrument Serif italic. The motion components also have a Font field in their properties.
04
CMS, then Projects. One project fills a card, a case study page and a window in the hero strip. Tick Featured on one project and its cover fills the homepage and footer wordmarks; add a Reel and they play it.
05
Services, Journal, Team, Testimonials, FAQs and Legal each feed their own pages. Replace the demo items with yours; the layouts follow.
06
Replace the demo photos, connect the contact form to your email in its form settings, update the social links in the footer, rewrite the legal pages, and delete this page.
(Colour)
Eleven colour styles, each with a light and a dark value.
Paper
#ECEAE4 light · #0F0F0E dark
Page background
Paper Deep
#E2DFD7 light · #1A1A18 dark
Image placeholders, quiet panels
Ink
#121211 light · #ECEAE4 dark
Text and solid buttons
Ink Soft
#6B6963 light · #8F8D87 dark
Secondary text
Line
#CFCCC3 light · #2B2B29 dark
Hairlines and input borders
Inverse
#121211 light · #ECEAE4 dark
Dark sections and footer
On Inverse
#ECEAE4 light · #121211 dark
Text on dark sections
On Inverse Soft
#8F8D87 light · #6B6963 dark
Secondary text on dark
Inverse Line
#2B2B29 light · #CFCCC3 dark
Hairlines on dark
Accent
#2536F5 light · #7480FF dark
Availability dot only
On Media
#F6F4EE light · #F6F4EE dark
Text over photographs
(Palettes)
Three other ways to dress it.
Copy a column of values into the colour styles of the same name. Inverse, On Inverse and Inverse Line mirror Ink, Paper and Line, so set those to match.
Light
Clay
Dark
Clay
Paper
#EFE6DB
#1C1410
Paper Deep
#E5D9CB
#271C16
Ink
#2B1E17
#EFE6DB
Ink Soft
#7C685B
#A8978A
Line
#D9CABA
#3A2C24
Accent
#C2410C
#F97316
Light
Slate
Dark
Slate
Paper
#E8EBEE
#0E1215
Paper Deep
#DCE1E5
#171C20
Ink
#13181C
#E8EBEE
Ink Soft
#667079
#8C96A0
Line
#CCD3D9
#272E34
Accent
#0E7490
#22D3EE
Light
Moss
Dark
Moss
Paper
#ECEDE4
#101812
Paper Deep
#E0E2D5
#18221B
Ink
#17251C
#ECEDE4
Ink Soft
#66736A
#8E9A91
Line
#D2D5C6
#26332A
Accent
#B45309
#F59E0B
(Type)
Ten text styles. Change one and every page follows.
Paper & Ink
Selected work
A studio for brands that would rather be remembered.
One table, six people, twelve projects a year.
Strategy, design and build sit together.
Used for intros and the lead paragraph of a section.
The default paragraph style, set in Inter at sixteen pixels.
Buttons, facts and short interface text.
(Labels) · 01 · Week 1 · small captions
Long-form text in the Journal and Legal pages.
(Components)
What each part does, and where to change it.
Code
The word that becomes a window. Word, Image, optional Video, Plays on (Page top, Own position, Pinned, In view), Zoom into (A letter or Centre), caption and fonts. Used in the hero, the Studio scene, every case study and the footer.
Code
One window of the hero image strip. It sits in a Projects list on the home page and reads Cover, Title, Services and the link from the CMS.
Code
The Studio statement that brightens word by word as you scroll. Edit Text in its properties; wrap a word in *asterisks* to set it in the serif. Set a smaller Size on the Tablet and Phone breakpoints.
Code
The counter shown once per visit. Brand, Caption, Duration. To remove it, delete the Preloader layer on the home page.
Code
The city clock in the nav and footer (set City and Time zone) and the numbers that count up in the Studio section.
Canvas
Desktop, Tablet, Phone and Phone Open variants. Edit links once in the component.
Canvas
Primary, Outline and On Dark variants. The Submit Button has Pending and Success states for the contact form.
Canvas
Bound to the Projects and Team collections wherever they appear.
Canvas
Accordions with Closed and Open variants, bound to Services and FAQs.
Canvas
Quote cards for the slider, the three pricing plans, and the call to action that ends most pages.
Canvas
The round View and Read cursor shown over project cards and journal posts.
(CMS)
Seven collections feed every page.
Work grid, case study pages, hero strip, hero wordmark
Title, Services, Year, Cover, Featured, Reel (optional video), Summary, case study text, Gallery, three Results
Services accordion, service pages
Title, Description, Deliverables, Image, Intro, Timeline, From, Ideal for
Journal index and post pages
Title, Category, Date, Read time, Author, Cover, Excerpt, Body
People grid on the Studio page
Name, Role, Photo
Client slider on the home page
Name, Quote, Role, Avatar
FAQ lists on Home and Contact
Question, Answer
Privacy and Terms pages
Title, Updated, Intro, Body