A Swatch is a brand kit. It holds the colours, fonts and logos of one brand, and a short description of how that brand writes. Open a project's Swatch tab to make and change them.
What goes in a Swatch
- Up to eight colours, each with a role: primary, secondary, accent, neutral, background or text. Every Swatch has a primary, a text and a background colour.
- A display font, a body font and, if you use one, a mono font.
- One or more logos, taken from your Yarn.
- A voice: a sentence or two such as "Short, warm and confident", with lists of what to do and what not to do.
Start from a website
Press From a website and paste the brand's address, like example.com. knitted reads the page and its stylesheets as text (nothing on the page runs) and proposes:
- the colours its buttons, links, headings and page wear, with the one in its logo as the primary;
- the fonts it sets, matched to the bundled fonts and to font files in this project's Yarn;
- its name and its logo.
Each colour says where it was found. Change anything before you press Create swatch. The new Swatch is not used until you press Use for this project, so nothing changes in your Patterns until you decide.
A font that is not bundled and not in your Yarn is named, and another stands in for it. Upload the font file to Yarn and choose it in the Swatch to use the real one.
Some sites turn away anything that is not a browser. When one does, upload its logo to Yarn and use Pick from Yarn to take colours from it.
Your model can do the same with propose_swatch. What it proposes is saved as a new Swatch for you to look over: only you make it the project's.
Why it matters
Every Pattern in a project uses the project's Swatch. Change the red once and every Pattern follows. Your model reads the voice when it drafts copy, so its words sound like you.