Style guide
Make Placket yours
in an afternoon.
Everything on this site comes from colour styles, text styles and the CMS. Change those and every page follows. This page is hidden from search engines; delete it when you launch.
Set up
Five steps,
in this order.
Rename the project and choose the site address in Site settings › General. Set Language to English there too.
Change the eight colour styles under Assets › Colors (Page, Surface, Ink, Body, Muted, Line, Accent, On ink). Every page, component and code component reads them.
Text styles use Inter Display for headings and Inter for text. Change the font on the styles under Assets › Text, then type the same family into the Font and Display font controls of the code components listed below.
Open CMS › Products. Each piece needs a square Product photo (shot flat, folded or on a hanger) and a portrait Worn photo. Featured puts it on the hero table, New puts it in New in, Outfit row puts it in Mix and match, Colour places it in the colour run.
Choose where the Contact and Bag forms send in each form’s settings. To check out with Shopify instead, select the Navigation in the layout template Site, fill in Shopify address, then add each size’s variant ID under Shopify variants in CMS › Products.
Colour styles
Eight colours,
one accent.
Page
#F5F4F1
Surface
#E9E7E2
Ink
#121211
Body
#3C3C39
Muted
#8C8B86
Line
#DCDBD6
Accent
#6E1F2A
On ink
#FFFFFF
Alternate palettes
Three more,
ready to paste.
Page #F3F4F2 · Surface #E6E8E6 · Ink #10162A · Body #363B4A · Muted #868B96 · Line #D8DBDE · Accent #2E46A0
Page #F2F2EE · Surface #E5E7E0 · Ink #151913 · Body #373C35 · Muted #868A82 · Line #D9DCD3 · Accent #4C6A4E
Page #F6F1EC · Surface #EBE3DB · Ink #1C1512 · Body #3F3632 · Muted #8F847D · Line #E0D6CD · Accent #A3502E
Text styles
Inter Display
and Inter.
Display
Inter Display 500, 72 / 56 / 40
See it folded.
Closing
Inter Display 500, 72 / 56 / 40
Everything ships folded.
Inter Display 500, 52 / 42 / 32
The whole rail, light to dark.
Statement
Inter Display 500, 36 / 30 / 24
Cut to go together, sold one at a time.
Title
Inter Display 500, 26 / 24 / 21
Why everything ships folded
Lead
Inter 400, 18 / 17 / 16
A long rib turtleneck in merino and alpaca, knitted to sit loose at the hip.
Body
Inter 400, 16
Cut and sewn in our studio in downtown Los Angeles, in runs of forty.
Small
Inter 400, 14
Free shipping over $150 in the US.
Label
Inter 500, 13
New this month
Price
Inter 400, 15, tabular figures
$168
Figure
Inter Display 500, 64 / 52 / 40
40
Components
What each piece does,
and where to edit it.
The hero table and the top of every product page: a product shot that opens into its worn photo, with sizes and Add to bag. Fed by a collection list of Products (one instance per item). Edit: CMS › Products.
On the hero section and its sticky Pin. Sets how far the page scrolls while the pieces open. No settings.
Home and every look page: the camera walks down a full-length look. Photo and titles come from CMS › Looks; the pieces come from each look’s Pieces list through Feed components.
Home: tops, bottoms and shoes under one window. Fed by Feed components in a hidden Products list (Group: mix). Choose each product’s Outfit row in the CMS.
Home: every product sorted into colour order on scroll. Fed by Feed components (Group: colour). Colour order is a control; match it to the Colour options in Products.
Home closing: product shots deal out from a stack into a row. Fed by Feed components (Group: stack).
Hands one CMS item to the sections above. Lives in hidden collection lists named Feed list (hidden); keep its Group the same as the section’s.
Bag sits in the Navigation component; Bag Summary sits inside the order form on the Bag page and adds the pieces to the submission.
Studio numbers. Type the number, the text after it and the label on the instance.
Canvas components under Assets › Components. Product Card fades to the worn photo on hover; FAQ Row opens on click; Navigation has Desktop, Phone and Phone open variants.
Collections
Six collections,
and what they feed.
Hero table, New in, Mix and match, Colour run, Closing stack, Shop, product pages, reviews’ product links.
Home look walk (Featured), Looks index and look pages. Each look has a Pieces list: name, price, position (Head, Top, Middle, Bottom or Feet) and sizes.
The ticker of letters on Home.
Home journal row, Journal index and post pages.
Home questions (first six by Order) and the Contact page (all).
Privacy policy, Terms of sale, Shipping and returns. Placeholder copy: replace before selling.