SelfDesign 2018 Logo Assets and Brand Standards

Please follow strict guidleines for logo use as specified in A Guide to the SelfDesign Brand Standards 2018

To download a logo, right click over the logo and then choose "Save image as..."

Use ONLY for icons


Size: 16 x 16 - Use for Favicon
https://assets.selfdesign.org/favicon.ico

Size: 72 x 72 - Can be used for Favicon
https://assets.selfdesign.org/images/spiral/sd-spiral.png
as of March 2020

SDLF Brand Colours

Primary
HEX    :   #f09350
RGB    :   240, 147, 80
CMYK :   2, 50, 76, 0
Supporting
HEX    :   #808080
RGB    :   128, 128, 128
CMYK :   52, 43, 43, 8
SDLF Main Colour
HEX    :   #005d9b
RGB    :   0, 93, 155
CMYK :   96, 67, 12, 1

SDLC Colours

Primary
HEX    :   #507193
RGB    :   80, 113, 147
CMYK :   75, 51, 26, 4
Medium Blue (75%)
HEX    :   #7994ae
RGB    :   121, 148, 174
CMYK :   56, 35, 21, 0
Pale Blue (for banners)
HEX    :   #e1e7ed
RGB    :   225, 231, 237
CMYK :   10, 5, 3, 0

HLN Colours

Primary
HEX    :   #74948e
RGB    :   116, 148, 142
CMYK :   58, 31, 43, 3

SE Colours

Primary
HEX    :   #797b96
RGB    :   121, 123, 150
CMYK :   58, 50, 27, 3
Supporting (for text)
HEX    :   #626b9b
RGB    :   98, 107, 155
CMYK :   : 69, 60, 17, 1

RESOLUTION

Actual resolution varies depending on the use and application. Values below are only recommended guides and are not set rules. Dimensions represent recommended Max Width x Max Height. Any variation within the maximum limit for each side is allowed. For example, for medium, 420x760 is acceptable because it is within 800x800.

selfdesign.org website
1. All filenames must be lowercase, no spaces. Use a hyphen as a substitute for a space.
2. General rule, all images must have a 4x3 (4:3) aspect ratio unless otherwise specified.
3. Round-off all values. DO NOT USE uneven dimensions such as 522x 369 - resize the image as 520 x 370


FILE TYPES

  • ALWAYS use and save as JPG
  • Use PNG only if the image has a transparent background (eg. icons)


JPG COMPRESSION

General rule, around 60%-80% of the max value allowed in the settings.

  • Lower value = higher compression = lower image quality = smaller file size
  • Higher value = less compression = higher image quality = bigger file size

In Photoshop settings, Quality = 8 - 10 (recommended = 10)


DPI (dots per inch or pixels per inch)

  • Always set at 72dpi for general web use, PDFs, Google Docs, slides, etc
  • NEVER use 300dpi. This is only from print applications.


IMAGE/COLOUR MODEL

  • Always use RGB.
  • CMYK is only used from print applications. CMYK images will render differently on web browsers.


COLOR PROFILE

Save images in the sRGB color profile. If images don't look right on mobile devices, it's probably because they don't have an sRGB color profile.
More info: 12 common image formatting mistakes to avoid on your website
  • Use FontAwesome icons and codes only. NEVER use screenshots of icons to use as images.
  • Do not upload duplicate or additional SD logos. All necessary SD logos are provided and available in the Media Library.
  • Check if an image or photo already exists in the Media Library. Do not upload duplicate photos and images unless they have different resolutions and aspect ratios and where existing images won't be applicable.
  • If a photo needs to be updated, REPLACE the existing photo in the Media Library. Do not upload a new photo.
  • Do not use or upload blog post author signature cards. Creating and using a user profile info is the proper way.
  • Do not upload greyscale images. Instead use coloured images, then apply the code image-greyscale in the CSS Class field.
  • Assign images in the proper category they are generally being used for. Use the Media Library Filter to group images.
  • General rule, all images must have a 4x3 (4:3) aspect ratio unless otherwise specified.
  • Logos are treated differently and do not follow the 4:3 ratios. Logo size and dimension depends on the use but has to be consistent with existing logos and must be applicable for other future use.
  • Round-off all values. DO NOT USE uneven dimensions such as 522x 369 - resize the image as 520 x 370.
  • Images have to be uniform and standardized so they can be used consistently on other areas and other ways without having to create new sizes and versions of the same image. Please follow Image Specs Guidelines.
  • Filenames must be clear and descriptive.
  • All filenames must be lowercase, no spaces. Use a hyphen as a substitute for a space.
  • Banned words in filenames:
    capture
    download
    filename
    file
    image
    photo
    pic
    picture
    screencap
    screencapture
    screen capture
    screenshot
    screen shot
    unsplash
    img_   (from camera phones)
  • All video uploads are blocked. Videos must be compressed and re-optimzed for web use. Videos are stored in a different folder that requires IT involvement.


CSS Class Codes

Misc Formats

nomargin
display-none .... hide but not delete
image-grayscale .... make image grey scale

Font Styles

text-bold
text-semibold
text-center
text-justify
text-shadow

Text Colours

text-blue .... SDLF Blue
text-white
text-olive .... HLN Green
text-orange .... SD Orange
text-purple .... SE Purple
text-blue-grey

Font Sizes

eg. text-18 = 18px

text-14
text-16
text-18
text-20
text-24

Header Font Sizes

H1 = 48px
H2 = 36px
H3 = 30px
H4 = 24px
H5 = 20px
H6 = 18px

Text Blocks Widths

eg. text-block-300 = max width of block is 300px

text-block-180       text-block-200
text-block-240       text-block-300
text-block-350       text-block-400
text-block-450       text-block-500
text-block-550       text-block-600
text-block-640       text-block-700
text-block-800       text-block-860

Text Blocks Boxes

box-blue .... box SDLF blue background
box-purple .... box SE pruple background
block-center .... center whole block of text