Collecting assets

Favicon

First, the little icon that pops up in the tab that demonstrates the branding of the website.

In web development this is called the favicon and placed in the <head> tag as a link. I want the official favicon - so since there's no official repository of Microsoft's website branding resources, I'll just snag it from their website. To do so, I just navigate to one of Microsoft's official websites and go into the source code (or inspect element) and find the .ico file under the head section.

So now I'll just save the icon at this link for use as a favicon for my website. This seems to be appropriate now as it is consistent across Microsoft websites and there doesn't seem to be an official MSA logo that is recognisable outside of AU/NZ. Perhaps I could have a partner logo created on their official partner website but at the moment for the first iteration of this it doesn't seem likely.

Microsoft's Logo

Now for Microsoft's Logo. This is quite simple to obtain since it is publicly available on their website so that collaborators are able to use it in their advertising. You can see an example of it being used in the page <header> here:

Again, I can navigate to their corporate website, dig into the source code and snag it off there or alternatively get the full-resolution file on their website here.

Microsoft Font

For Microsoft's font, again I'll dive into their code, this time looking at their styling (CSS) to see what font-family they use. Again, this is pretty simple and consistent - Microsoft like to purely use Seogoe UI as their font of choice across all their products. The only difference would be the different sizes for hierarchy of text. This can be seen here with h1 as an example:

So for reference, I've found all the sizes they like to use and tabulated the data here.

Level

Size

Weight

Margin

Line Height

Color

h1 (Heading 1)

46px / 2em

600

.67em 0

56px

#000

h2 (Heading 2)

46px

600

N/A

56px

#000

h3 (Heading 3)

20px

600

37px top

24px

#000

Body

15px

N/A

#000

Anchors/Buttons

15px

600

N/A

1.3

#0067b8

Nav links

13px

N/A

1px top

N/A

#262626

h4 (Footer head)

15px

600

N/A

#616161

Footer links

11px

N/A

16px

#616161

Branding Colours

For the website colour palette, we can stick to the default colours (white, black). However, if we want any splashes of colour, it would be useful to have the colour codes on deck. Here we can find the HEX codes for Microsoft's logo and also the MSA branding colours here.

Colour

HEX Code

Microsoft ORANGE

#F25022

Microsoft GREEN

#7FBA00

Microsoft BLUE

#00A4EF

Microsoft YELLOW

#FFB900

Microsoft GREY

#737373