Brand kit
The Plotwork brand
The logo, the animated logo, the colours and the type. Use them to write about Plotwork, and keep them as they are.
59 files: every logo, the animated logo, the favicon, the palette and a README with the rules.
Logo
Logo
The mark, and the mark with the wordmark beside it or under it. Each comes in four tones, as SVG and as PNG with a transparent background and its clear space built in.
Mark
Horizontal lockup
Stacked lockup
Favicon
The favicon the sites serve. It switches between ink and near-white with the light or dark setting.
Motion
Animated logo
The mark draws itself the way the product draws a diagram: the first box appears, a pen writes the connector, and the second box appears where the pen stops. Each loop starts and ends on the finished mark.
One loop is 4.8 seconds at 25 frames a second. The GIF is 512 pixels square and the WebM video 1024.
Colour
Colours
Read from the tokens the product is built with. Press a colour to copy its hex value.
Brand
The teal is an accent: the second box of the mark, focus rings and links. It is never the colour of a button.
Ink and paper
Near-black and near-white carry the lines of the mark and almost every pixel of the product.
Chart accents
A closed set for charts, tags and status. Never use one as a brand colour.
Download the palette
CSS custom properties, design tokens in the Design Tokens Community Group format, and Adobe swatches for design tools.
Type
Typography
Three families, all free under the SIL Open Font License. The kit links to the official source instead of carrying the font files.
IBM Plex Sans
Headings and running text on the site, the docs and the portal.
- 400 RegularDiagrams that AI agents write well.
- 500 MediumDiagrams that AI agents write well.
- 600 SemiBoldDiagrams that AI agents write well.
IBM Plex Mono
The wordmark (SemiBold, tracked 8 percent), labels, eyebrows and code.
- 400 RegularDiagrams that AI agents write well.
- 500 MediumDiagrams that AI agents write well.
- 600 SemiBoldDiagrams that AI agents write well.
Inter
The labels inside every diagram the engine draws.
- 400 RegularDiagrams that AI agents write well.
- 500 MediumDiagrams that AI agents write well.
- 600 SemiBoldDiagrams that AI agents write well.
Usage
Using the logo
A few rules keep the logo recognisable wherever it appears.
20 px
64 px- 112 px
Do
On a light background, in ink and teal
On a dark background, in near-white and light teal
- Use the files as they are, in the tone made for the background they sit on.
- Keep the clear space round the logo: half the height of one box of the mark on every side. Every file already carries it.
- Use the mark alone where space is tight, such as an avatar or a favicon.
- Write the name as Plotwork in running text. PLOTWORK in capitals is the wordmark, not a spelling.
Do not
Recolour it
Stretch or squash it
Add shadows, glows or outlines
Put it on a busy background
- Do not recolour the logo, or swap the teal for another colour.
- Do not stretch, squash, rotate or redraw it.
- Do not add shadows, glows, outlines or other effects.
- Do not put it on a busy picture or a background without enough contrast.
- Do not use it in a way that suggests Plotwork made, sponsors or endorses your product.
Trademarks
Trademarks and press
The Plotwork name and logo belong to Buun Group Pty Ltd. You may use the files on this page to refer to Plotwork, for example in an article, a talk or a list of integrations. Do not use them in a way that suggests Plotwork made, sponsors or endorses your product.