Logos
Use the appropriate logo for the context.
Ensure logo and tagline are large enough to be legible.
Clearing space between logo and surrounding elements should be at least the width of the tri-colour icon.
Do not distort, change colours, rotate or add effects.
Avoid use on midtone backgrounds. If this is unavoidable, or you have any other queries, please consult Sentonic.
Usage: Dark Backgrounds
Usage: Light Backgrounds
Background Colours
SD Dark Grey 1
Hex: #0F0F0F
RGB: 15 / 15 / 15
SD Dark Grey 2
Hex: #191919
RGB: 25 / 25 / 25
SD Light Grey
Hex: #F2F2F2
RGB: 242 / 242 / 242
White
Hex: #FFFFFF
RGB: 255 / 255 / 255
Text Colours
Usage: Dark Backgrounds
White
Hex: #FFFFFF
RGB: 255 / 255 / 255
Usage: Headings, Links
Feature paragraph text
SD Text Grey 1
Hex: #999999
RGB: 153 / 153 / 153
Usage: Body text
SD Text Grey 2
Hex: #777777
RGB: 119 / 119 / 119
Usage: Less prominent H2 headings
Usage: Midtone Backgrounds
Black
Hex: #000000
RGB: 0 / 0 / 0
Usage: Headings, Links
Feature paragraph text, Body text
White
Hex: #FFFFFF
RGB: 255 / 255 / 255
Usage: Headings, Links
Feature paragraph text, Body text
Usage: Light Backgrounds
Black
Hex: #000000
RGB: 0 / 0 / 0
Usage: Headings, Links
Feature paragraph text
SD Text Grey 2
Hex: #777777
RGB: 119 / 119 / 119
Usage: Body text
SD Text Grey 1
Hex: #999999
RGB: 153 / 153 / 153
Usage: Less prominent H2 headings
Accent Colours
Usage: Link hover, Bullets, Small graphics
SD Blue
Hex: #426AB3
RGB: 66 / 106 / 179
Usage: Installations
SD Pink
Hex: #ED1164
RGB: 237 / 17 / 100
Usage: Events
SD Purple
Hex: #903F98
RGB: 144 / 63 / 152
Usage: General/alternative
Typography
Font Family
https://fonts.google.com/specimen/Manrope
The Manrope font family should be used, where possible, in the relevant styles as detailed below. If Manrope is not available use the closest sans-serif font.
Alignment
Text can either be left-aligned or centre-aligned as appropriate, depending on the amount of text and usage. Centre-alignment should generally be reserved for headings and short paragraphs of text. Mixing centre and left alignment in the same context should be avoided.
Heading 1
Font size: 45px
Weight: 400 / Regular
Letter spacing: x -0.02
Line height: x 1.2
Bottom margin: x 1
Heading 2
Font size: 30px
Weight: 500 / Medium
Case: Uppercase
Letter spacing: x -0.02
Line height: x 1.2
Bottom margin: x 1
Heading 3
Font size: 24px
Weight: 500 / Medium
Letter spacing: x -0.02
Line height: x 1.2
Bottom margin: x 0.333
Larger Paragraph — lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel eleifend magna, ut tincidunt ipsum. Vivamus tincidunt magna a lacus ullamcorper blandit. Cras consectetur urna mi, vitae vestibulum metus sollicitudin commodo. Sed dui neque, tempor eget leo sed, placerat imperdiet urna. Duis in lectus augue. Nulla et pulvinar lorem. Nulla eget ultricies erat.
Larger Paragraph — lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet massa nisi. Nullam vitae tempus sem. Nunc quam neque, dignissim ac urna a, porta mollis felis. Vestibulum mollis magna ultricies sem rhoncus, id fringilla risus venenatis. Fusce in venenatis enim. Etiam varius tempus nunc, ut tempor magna aliquet id. Morbi nec suscipit nulla. Nullam condimentum ligula quam, sit amet varius tellus dapibus dictum. Maecenas nec iaculis nisi.
Font size: 20px / 22px
Weight: 200 / Extra-Light
Line height: x 1.5
Bottom margin: x 1.5
Standard Paragraph — lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae molestie magna. Praesent feugiat vel ante tempor fringilla. Pellentesque enim nunc, sagittis vitae ligula sed, feugiat fringilla turpis. Proin laoreet quam neque, non lacinia orci vestibulum sed. Proin sollicitudin lectus arcu, vitae aliquet diam varius nec. Aenean dui mauris, lobortis eget odio non, gravida congue sem. Aenean in ligula imperdiet, euismod magna nec, sollicitudin nisi.
Font size: 18px
Line height: x 1.5
Bottom margin: x 1.5
Weight: 300 / Light
Link colour: White / Black depending on background colour
Link hover: Context dependent (see Colours section above)
Weight: 400 / Regular
- Bulleted List Style 1
- Bulleted List Style 1
- Bulleted List Style 1
Font size: 18px
Line height: x 1.5
Bottom margin: x 1.5
Weight: 300 / Light
Bullet colour, Installations: SD Blue
Bullet colour, Events: SD Pink
-
Bulleted List Style 2
List item #1 -
Bulleted List Style 2
List item #2 -
Bulleted List Style 2
List item #3
Font size: 20px
Line height: x 1.25
Space between: x 0.9
Bottom margin: x 1.5
Weight: 300 / Light
Bullet style: Font Awesome Solid Chevron Right
Bullet colour: SD Purple
