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 carefully crafted with methodical 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 book ↓

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:

Icon · Squares

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

Icon · Strategy

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

Icon · Heart

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

Logos

Anatomy of spur: logo
spur: Logo

Full logo

The spur: logo is 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 points 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

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, sister-organisation of spur:.

By default, and for clarity, all 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.

Icon · spur: logo

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

Icon · Dottür

Ensure the Logo and Dottür are large enough to read by someone whose eyesight isn't great.

Icon · spur logo as outline

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

Typography

Aa

Montserrat medium
Montserrat 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

Lato regular
Lato 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

Aa

Playfair italic
Playfair is only used sparingly in decorative contexts such as for dimensions or reference text.

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

Lorem ipsum

Lorem ipsum

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

Primary palette

The majority of spur: assets should utilise the primary palette. Neutral tones should feature most commonly with flourishes of citrus, sky, and pool to draw attention. Oh, and the pretentious colour names? They're places around the world that have meaning to the spur: team.

Singapore night
Hex · #1c2126
RGB · 28, 33, 38
Pantone · 532 C

(Various opacities allowed)

Hong Kong fog
Hex · #f4f1e9
RGB · 244, 241, 233
Pantone · 11-0607 TPG

Copenhagen cloud
Hex · #f6f5f3
RGB · 246, 245, 243
Pantone · 663 C

Tórshavn snow
Hex · #ffffff
RGB · 255, 255, 255
Pantone · 000 C

Tokyo citrus
Hex · #ff512c
RGB · 255, 81, 44
Pantone · 17-1363 TSX

Brisbane sky
Hex · #4668e0
RGB · 70, 104, 224
Pantone · 2130 C

Reykjavík pool
Hex · #7fd3bf
RGB · 127, 211, 191
Pantone · 13-5414 TPG

Extended palette

The extended palette should be used sparingly and considerately. This palette is mostly for illustrations, as well as for thematic and categorical necessity within documentation.Each colour has a primary swatch, as well three alternatives: dark, light, and pale. Light swatches should be preferenced on dark backgrounds.

Tokyo citrus

#cc4123

#ff512c

#ff856b

#ffb9ab

Brisbane sky

#3853b3

#4668e0

#7e95e9

#b5c3f3

Reykjavík pool

#66a999

#7fd3bf

#a5e0d2

#bfe9df

Paris stone

#a9993a

#d3bf48

#dccc6d

#e9dfa4

Hamburg forest

#546c1e

#698726

#96ab67

#c3cfa8

Shenzhen dusk

#ad4e71

#d8618d

#e490af

#efc0d1

Sydney surf

#4a92b5

#d8618d

#8ecceb

#bee2f3

Melbourne rain

#3a4a4d

#616e71

#9da5a6

#d8dbdb

spur: Artistic arrangement of spur logos in various colours

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 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 pride march

Image: Tanushree Rao

Photo of man on boat

Image: Mark Lobo

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 · CalendarIllustration · 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 texture extensively.

Icon · Illustration rule 5

2:1 ratio should always be used. Similarly, images should never overlap.

Icon · Illustration rule 6

Illustrations may be hand-drawn on tablets.

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 an aim of meeting at least an “AA” level.

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 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.