ValuesLogosTypographyPaletteIconographyGlyphsPhotographyIllustrationsLayoutAccessibilityPhysical Assets

Brand book

In our mission to create a world that is fair, sustainable, and well our brand is a powerful tool.

Colour, layout, texture, and form should all create an emotional connection with spur: long before content. This is why our brand book has been crafted with careful attention to detail. It is also built on human design principles with deep consideration given to accessibility.

Yet, at the end of the day, this brand book is a guide and should serve as reference tool rather than a list of strict rules. Above all, all assets should be appropriate to their context.

Explore the brand

Values

spur: is built on a guiding a set of values. Although all values are represented within the brand book, the values of Architectural Thinking are most prominent:

It stands
Is it not only complete, but built to last?

It works
Is it functional, practical, and serves a clear purpose?

It is beautiful
Is it joy to the senses and to experience?

Logos

spur: Logo

Full logo

The spur: logo is intentionally (and deceptively) minimal. It is solid and monotone to evoke a sense of stability, and employs lowercase lettering to be understated and imply a casualness.

Despite this, there is also a quiet energy from the tapered point of the "p". There is also a sense of motion in the "Dottür".

When written as text, spur: should always be in lowercase, and include a standard colon.

Download logo >
spur: Dottür

Dottür

The "Dottür" is the child of the full spur: logo, and the most iconic element of the brand.

Based on the colon it implies anticipation, connection, explanation, and continuity.

Dottür is a "nonsense" word that plays on the words "dot" and "dóttir" (daughter in Icelandic).

spur:org logo

The even better half

spur:org is the NGO, big sister-organisation of spur:.

Typically, activities, projects, and marketing should refer to just spur:. However, where a clear distinction between the two legal entities is required, spur:org may be used.

Apart from the logo, spur:org largely follows all other brand guidelines.

Download logo >
Icon · spur: logo

The logo should always be presented in spur: palette colours where possible.

Icon · Dottür

Ensure the Logo and Dottür are large enough to be clearly seen.

Icon · spur logo as outline

In short, don't change the logo in any way shape or form. This includes shadows, stroke, mutations, etc.

Typography

Aa

DM Serif Display
DM Serif Display is used for headers, titles, and other contexts in which the font needs to stand out.

0 1 2 3 4 5 6 7 8 9

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Download font >

Aa

Libre Franklin
Libre Franklin is used for paragraph and long-form text. It is also used for subheadings.

0 1 2 3 4 5 6 7 8 9

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Download font >

Heading 1

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Id aliquet risus feugiat in ante metus dictum at. Porta nibh venenatis cras sed felis eget velit aliquet sagittis. Orci a scelerisque purus semper.

Lorem ipsum dolor sit amet

Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Orci a scelerisque purus semper eget. Et tortor consequat id porta nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Id donec ultrices tincidunt arcu non sodales. Sapien nec sagittis aliquam malesuada bibendum. Amet nulla facilisi morbi tempus. Vitae justo eget magna fermentum iaculis.

Palette

Neutral palette

Salt

#ffffff

Wheat

#fdf8e6

#e0ddce

#a3a299

#767773

#494c4c

Charcoal

#1c2126

Pepper

#000000

Extended palette

Each colour within the extended palette has four versions: pale, hero, shadow, and dark.

Spearmint

#accbc1

#5a9e9b

#3f6e6c

#2e4849

Tumeric

#f7ddab

#dfb163

#8a6d3d

#534732

Eggplant

#e5d1da

#cdaacd

#786480

#4a4353

Truffle

#e0d4c6

#c2b1a5

#7a7068

#4b4947

Stilton

#b2c8d6

#5b8cba

#476e91

#2c3f52

Olive

#d9d4b4

#9c9a70

#737253

#484a3d

Plum

#c5c9e8

#7783d1

#606aa8

#3e4667

Rhubarb

#e6c3c9

#bd809e

#8f6177

#54404d

Paprika

#ffc1a6

#d66a49

#b2583d

#673d32

Basil

#b2c9ab

#679970

#3d5b43

#2d3e35

Iconography

Anatomy of a spur icon

Icons summarise information and concepts. They are a visual shortcut to help the viewer immediately understand context and surrounding content. They are consistent in style, as well as being simple, playful, and engaging.

Icons within this Brand Book are not exhaustive, rather should serve as inspiration for the creation of bespoke icons as needed.

Range of spur: icons

Iconography usage

Icon · Icon rule 1

Acute angles should be sharp. Obtuse angles should be soft. Right angles can be either sharp or soft.

Icon · Icon rule 2

Icon shapes should only consist of a stroke. Fills are strictly not allowed.

Icon · Icon rule 3

Dottürs should be an appropriate colour. Dottürs may be angled, but never resized (except in animation).

Icon · Icon rule 4

All icons must contain a Dottür. Icons may be transparent or “fake” opaque to either reveal or conceal the Dottür.

Icon · Icon rule 5

The use of just one Dottür per icon is highly preferred. A second Dottür may be utilised only if the icon requires it to establish context.

Icon · Icon rule 6

Dottürs should represent either a literal element or a non-visible property of the image.

Glyphs

Anatomy of a spur: glyph

Whereas icons visually simplify or summarise entire ideas and concepts, glyphs provide clear, key information or prompt immediate action, like to click here or scroll there.

Glyphs within this Brand Book are not exhaustive, rather should serve as inspiration for the creation of bespoke glyphs as needed.

Range of spur glyphs

Glyph usage

Icon · Glyph rule 1

Acute angles should be sharp. Obtuse angles should be soft. Right angles can be either sharp or soft.

Icon · Glyph rule 3

Glyphs should contain only a stroke with no fill.

Icon · Glyph rule 3

Glyphs must not contain Dottürs.

Photography

spur: branding is intentionally minimal.Therefore, immersive and evocative photography is utilised to bring warmth, emotion, and depth to our visual universe.

Photo of spur staff

Image: Grace Yu

Photo of man on boat

Image: Mark Lobo

Photo of pride march

Image: Grace Yu

Photography usage

Photo of Japan alley

Image: Alex Knight

Photography should be lush, immserive, evocative, bespoke, and relevant to its context.

Photo of man with beard

Image: Jakob Owens

Photography should have a bias to faces where possible and appropriate.

Photo of desert landscape

Image: Diego Jimenez

Photography should have a bias to full colour, although greyscale may be used where appropriate.

Icon · Photo rule 1

Photography should be lush, immserive, evocative, bespoke, and relevant to its context.

Icon · Photo rule 2

Photography should have a bias to faces where possible and appropriate.

Icon · Photo rule 3

Photography should have a bias to full colour, although greyscale may be used where appropriate.

Illustrations

Illustrations are used to evoke a sense of emotion or tone. They exist in a space between icons and photographs where icons aren’t complex enough to adequately convey a feeling or message, and photography is too literal.

Illustrations may also be stylistically diverse—hand drawn and casual in informal contexts, or geometric and mathematical in formal contexts.

Illustration · CollageIllustration · Mental health speech bubbleIllustration · Mental health speech bubbleIllustration · Mental health speech bubbleIllustration · Mental health speech bubble

Illustration usage

Icon · Illustration rule 1

Illustrations may draw from the full spur: palette.

Icon · Illustration rule 2

Illustrations may use various tones, shades, and opacities of colours.

Icon · Illustration rule 3

Illustrations may use gradients.

Icon · Illustration rule 4

Illustrations may use grain textural elements.

Icon · Illustration rule 5

Ratios should observe layout principles

Icon · Illustration rule 6

Illustrations may be geometric or hand-drawn—depending on context.

Layout

spur: layout

The layout of any document, website, or publication provides the viewer a sense of space, location, tempo, and cadence.

Layout is a subtle, yet extremely powerful tool to direct attention and prioritise information.

A spur: layout should be as iconic to the viewer as the logo, Dottür, or any other part of the spur: brand.

Unconventional layouts also suggest that they’re formatted for digital consumption — which discourages printing.

Layout usage

Icon · Layout rule 1

Layouts should have a bias to landscape orientation where possible and appropriate.

Icon · Layout rule 2

Layouts should use a ratio of 2:1, or other "unexpected" or exaggerated proportions.

Icon · Layout rule 3

Layouts should have a bias to simple asymmetry.

Icon · Layout rule 4

Layouts should heavily utilise the rule of thirds, sixths, and ninths.

Icon · Layout rule 5

Important content should have a bias towards either the upper left or lower right—not centred.

Icon · Layout rule 6

Layouts should be minimal and employ generous amounts of white space.

Accessibility

Text of various sizes

It is spur:’s aim to make content accessible to those with a wide range of needs including those visual, auditory, physical, speech, cognitive, language, learning, and neurological challenges.

Although each of these may not always be comprehensively met within our assets, accessibility must be a fundamental consideration in all design.

spur: utilises the Web Content Accessibility Guidelines (WCAG) 2.1 as our framework for accessibility—with a minimum “AA” level met at all times.

Accessibility usage

Icon · Accessibility rule 1

All video and audio content must include captions or transcripts.

Icon · Accessibility rule 2

All digital assets should include relevant meta information (e.g. alt tags, etc.)

Icon · Accessibility rule 3

All assets should confirm to WCAG 2.1 AA standards

Icon · Accessibility rule 4

Flashing imagery should be kept to a minimum.

Icon · Accessibility rule 5

Scrolling should bias single dimension.

Icon · Accessibility rule 6

All design should be consistent and clear

Physical assets

Illustration of trees

As an organisation trying to create a world that is fair, sustainable, and well it is imperative that our own practices reflect these values. The creation of physical assets and materials are therefore bound by exacting standards in order to minimise waste, are ethically produced and protect the environment.

Physical assets include, though are not limited to, documentation, business cards, signage, branded paraphernalia, etc.

Physical asset usage

Icon · Physical asset rule 1

Physical assets should only be created if imperative or reusable.

Icon · Physical asset rule 2

Plastics and other non-recyclable materials should always be avoided.

Icon · Physical asset rule 3

Assets should be sourced locally, made with local materials, and sourced from ethical businesses.