Graphic Language
Downloads & Links
Overview
Our visual system utilizes a variety of versatile graphic elements that support type and imagery. These act as a device to communicate our values and strengthen brand recognition.
Nodes & Trails
TKTK the brand is built around the idea of conducting and the shape of a square which moves around and draws a line
Building Nodes & Trails
A variety of pre-made graphics exist, however for more customisation you may want to start with a blank trail and add your own nodes. This way you have full control over position and size of the nodes.
The grid of yellow squares indicates the amount of clearspace around the node. The pixel typesize of the coordinates should be the same size as the node (i.e. 20px node = 20px type). The stroke width of the trail should always feel thin and precise (usually 1-2px) and not scale with the nodes. 
The filled square is the default, most common node, however there is also the outlined square and the crosshair. The stroke width of both should be the same as the trail. Note that the crosshair should be 1.5x width and height to maintain similar visual weight as the squares. 
The different nodes can be combined to add some variety to the graphic. Nodes should all be the same scale. Ensure the coordinates are updated so that they are unique.
Usage
Some of the various ways you can spice up your layouts
A faded trail can be used in static applications to create a sense of movement and time. Ensure any nodes are also appropriately faded. 
Coordinates can be omitted keep focus on the main content. 
On straight trails, there should be no gaps around the nodes and only the square nodes should be used. The trails should always go directly through the middle of the nodes. 
The nodes can also be used without trails as a recurring shape that helps create hierarchy. Ensure the node is sized appropriately to the size of the type it is accompanying. 
Lines can create containers. Note that the nodes should always sit in the middle of the line. 
A grid of nodes can be used as a texture. 
Lines can be used to create structure on the page. 
Lines can be layered behind display text, forming a sort of ‘stave’.
Misuse
Avoid the following treatments.
Do not use a thick stroke on paths. Paths should usually be 1-2px and feel thin and precise. 
Avoid aligning the edge of nodes to paths. Nodes should always sit on the middle of paths.
