Brandin' Booty
Ahoy! Welcome to ITGOIT’s Brand Code, arr!
At ITGOIT, we make IT simple, trusty, and grand fer all, from landlubbers to merchants and schools. Our brand be open and welcomin’, keepin’ yer digital seas sailin’ smooth, arr!
This code be yer chart to our brand’s heart, like a manual fer our logo, colors, gradients, and spirit. Stickin’ to it keeps ITGOIT steady, lively, and true to our quest o’ deliverin’ fine IT services with a grin, arr!
If ye aim to use our brand treasures, make sure they follow this code and request approval through our contact page. Reviews take 3-5 weeks. Let’s forge somethin’ grand together, arr!
Fair winds, The ITGOIT Brand Crew
Our Brand Booty
Fetch our brand kit or lone logos an’ symbols fer yer use, matey!
Logo
Logo
Buildin’
The prime cut o’ the ITGOIT logo be the symbol, dubbed IT Symbol, an’ the ITGOIT wordmark. These two bits be balanced by eye, matchin’ the gaps o’ the wordmark to the symbol, arr!
Clearspace
Our logo needs room to breathe, what we call clearspace, matey. This keeps it from gettin’ lost or lookin’ too cluttered. The clearspace be the height o’ the ‘I’ in the wordmark, arr!
Scalin’
Our logo be crafted to work at all sizes, arr! The smallest symbol size fer digital contraptions be 20px in height to keep it legible, matey.
Usin’
Usin’ the ITGOIT logo starts with knowin’ our brand’s presence, arr! Sometimes the logo be the captain, sometimes it’s a deckhand. The symbol can be unhooked fer display use, matey.
Do’s & Don’ts
Yes: Symbol an’ Wordmark used together as sign-off, arr!
Yes: Wordmark used alone fer display use, arr!
No: Wordmark used without Symbol as sign-off, arr!
No: Logo lockup used at display size, arr!
Placin’
We place our wordmark in certain spots to ensure consistency an’ flexibility, arr!
Color
Prime on Second Mate, arr!
Prime on Light Prime, arr!
Color on Second Mate, arr!
Second Mate on Prime, arr!
Light Prime on Prime, arr!
Second Mate on Color, arr!
O’er Imagery
Our wordmark must be clear as day o’er images, arr! Ensure enough contrast an’ steer clear o’ busy backgrounds. Check WCAG fer contrast guidance, matey.
Do’s & Don’ts
Yes: Logo has enough contrast with the background, arr!
Yes: Logo has enough contrast with the background, arr!
No: Logo placin’ messes with busy background, arr!
No: Not enough contrast ‘tween logo an’ imagery, arr!
Contextual Usin’
On social media, the logo be optional fer regular posts but required fer grand announcements, arr! Fer out-o’-home ads, the logo be essential, matey.
Partner Lockup Horizontal
The ITGOIT logo can be locked up horizontal with partner logos, arr! Space ‘tween logos equals 1.5x the cap height o’ the wordmark, matey.
Partner Lockup Vertical
The ITGOIT logo can be locked up vertical with partner logos, arr! Space ‘tween logos equals 1.5x the cap height o’ the wordmark, matey.
Partner Lockup Optical Adjustment
Partner logos may need optical tweakin’ to balance with the ITGOIT logo, arr!
Logo Don’ts
No: Don’t stretch or warp the logo, arr!
No: Don’t spin the logo, arr!
No: Don’t mess with the logo’s alignments, arr!
No: Don’t outline the logo, arr!
No: Don’t change the scale ‘tween symbol an’ wordmark, arr!
No: Don’t slap effects like glows or shadows on the logo, arr!
Symbol
Symbol
Overview
In certain cases, the ITGOIT logo can be trimmed to the symbol, called IT Symbol, arr! It’s most used where size limits the full wordmark, like app icons or social media avatars. Our symbol makes the brand iconic an’ flexible, matey.
Clearspace
Some space be needed ‘round the symbol to keep it from bein’ cluttered by artwork, images, or page edges, arr! The minimum space be one-third o’ the symbol’s width, matey.
Scalin’
The IT Symbol be designed to work in various sizes, arr! The smallest symbol size fer digital uses be 20px in height to ensure legibility, matey.
Horizontal Lockup
The IT Symbol can be locked up with partner brands an’ collaborators’ logos, arr! The size o’ elements should be optically adjusted to look the same size. The space ‘tween the symbol an’ partner logo be half o’ the symbol’s width, matey.
Alignin’
Fer digital contraptions, the symbol be often locked up in a rectangular or circular container, arr! The symbol must be mechanically aligned fer balance an’ sized to give comfy space on all sides, matey.
Scalin’
The IT Symbol be designed to work in various sizes, arr! The smallest symbol icon should be 30px tall to be legible, matey.
Color Pairings
Prime on Transparent, arr!
White on Prime, arr!
In Use
An example o’ the IT Symbol used as an app icon or social media avatar, arr!
Symbol Don’ts
No: Don’t stretch or warp the symbol, arr!
No: Don’t tilt the symbol, arr!
No: Don’t change the symbol’s makeup, arr!
No: Don’t outline the symbol, arr!
No: Don’t use glow effect on the symbol, arr!
No: Don’t use symbol as a mask, arr!
No: Don’t apply drop shadows to the symbol, arr!
No: Don’t use unapproved color pairin’ on the symbol, arr!
No: Don’t use low resolution symbol, arr!
Typography
Typography
Our Typefaces
ITGOIT sails with two crafted typefaces from the Ginto crew: Ginto ITGOIT Nord fer bold, strikin’ headlines an’ Ginto ITGOIT Medium fer smaller scribbles, like subheads an’ captions, arr! These let our brand shift ‘tween fierce, grippin’ words an’ clear, informative parley. Also, GG Sans be used in the ITGOIT product, matey. Check ITGOIT’s product charts fer specific rules, arr!
Custom Letters
Certain letters in our typefaces be polished to shine bright on all platforms, arr! Always use the custom Ginto ITGOIT typefaces, not the plain Ginto ones, to keep things shipshape an’ visually steady, matey.
Letter Set: Ginto ITGOIT Nord Bold
This chart shows the letter range o’ Ginto ITGOIT Nord Bold, coverin’ all European Latin-based tongues, ‘cept those needin’ Greek or Cyrillic scripts, arr! Fer non-Latin scripts (like Mandarin, Arabic, Hebrew), scribblers should pick Noto Sans or the closest kin to Ginto ITGOIT Nord in that tongue, matey.
Letter Set: Ginto ITGOIT Medium
This chart shows the letter range o’ Ginto ITGOIT Medium, coverin’ all European Latin-based tongues, ‘cept those needin’ Greek or Cyrillic letters, arr! Fer non-Latin scripts, use Noto Sans or the nearest kin to Ginto ITGOIT Medium, matey.
Letter Set: Ginto ITGOIT Regular
This chart highlights the letter range o’ Ginto ITGOIT Regular, meant only fer digital an’ product uses, arr! Don’t use this weight in brand parley; choose Ginto ITGOIT Medium instead, matey.
Typeface Usin’
To balance ITGOIT’s lively an’ approachable spirit with clear messages, choose typefaces with care, arr! Use Ginto ITGOIT Nord Bold fer headlines that pack a punch. Use Ginto ITGOIT Medium fer body text, captions, an’ detailed scribbles. Always pick custom Ginto ITGOIT typefaces over standard Ginto versions, matey.
Case Settin’
Fer consistency, set Ginto ITGOIT Nord Bold in All Caps fer headlines, arr! Use Title Case or Sentence Case fer Ginto ITGOIT Medium, dependin’ on the context, to make it easy to read, matey.
Linespacin’: Ginto ITGOIT Nord Bold
Keep linespacin’ tight but don’t make it too loose or cramped, arr! Check examples fer guidance, matey.
Linespacin’: Ginto ITGOIT Medium
Ensure linespacin’ allows easy readin’, avoidin’ overlap o’ ascenders an’ descenders, arr! Use a balanced approach: not too tight, not too loose, matey.
Letterspacin’: Ginto ITGOIT Nord Bold
Fer headlines, follow a three-step course: start with default spacin’, apply -3% trackin’, then kern fer even spacin’, arr! Use tight letterspacin’ fer large type, looser fer smaller type, matey.
Letterspacin’: Ginto ITGOIT Medium
Apply the same three-step course as Nord Bold, ensurin’ balanced spacin’ fer readability, arr!
Alignin’: Ginto ITGOIT Nord Bold
Align text left or center fer ITGOIT parley, arr! Avoid right-alignment or forced justification, matey.
Alignin’: Ginto ITGOIT Medium
Align text left or center fer ITGOIT parley, arr! Avoid right-alignment or forced justification, matey.
Raggin’
Raggin’ be the visual edge o’ a text block, arr! Smooth raggin’ by adjustin’ line breaks to make a clean, readable edge, avoidin’ widows an’ uneven lines, matey.
Sizin’
Use no more than two type sizes, derived by doublin’ or halvin’ a base size (e.g., 25pt to 50pt), arr! Fer product design, type sizes may be closer together. Large type should fill the space; small type should have spacin’ below equal to one or more lines, matey.
Typography Don’ts
No: Don’t squash or stretch type, arr!
No: Don’t use Ginto ITGOIT Medium fer headlines or Nord Bold fer body copy, arr!
No: Headlines should be in All Caps, not Sentence Case, arr!
No: Stick to approved Ginto ITGOIT weights, arr!
No: Use only Ginto ITGOIT typefaces, not others, arr!
No: Don’t highlight text with multiple colors, arr!
No: Keep typography upright, not tilted, arr!
No: Use only approved gradients, no other effects, arr!
No: Don’t outline text, arr!
Backup Typeface: Montserrat
Use Montserrat Extra Bold fer headlines when Ginto ITGOIT Nord ain’t available, arr! Follow ITGOIT typography charts an’ avoid other fonts like Arial, matey.
Backup Typeface: Noto Sans
Use Noto Sans Semibold fer subheads, body copy, or captions when Ginto ITGOIT Medium ain’t available, arr! Follow ITGOIT typography charts, matey.
Backup Typeface: Non-Latin
Use Noto Sans Black fer non-Latin scripts (e.g., Mandarin, Arabic) when Ginto ITGOIT ain’t available, or the closest kin, arr!
Colours & Gradients, arrr!
Colours o' the Crew
Colors
Our Banner's Hues
Ahoy! Our identity be defined by a fearsome duo: Brand Purple an' Primary Blue. The Purple signifies our cunning an' expert ways, while the Blue shows we be trustworthy sea dogs with technical skill. This combination makes for a memorable an' modern palette that be distinctly ITGOIT, savvy?
Brand Purple
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Primary Blue
Pantone: 2133 C
CMYK: 81 64 0 0
RGB: 74 108 247
HEX: #4A6CF7
The Core Colours
This 'ere core palette be the foundation of our colour strategy. Usin' it consistently lets every landlubber know the ITGOIT flag be flyin', an' it be supported by our secondary colours for more flexibility on the high seas.
Brand Purple
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Primary Blue
Pantone: 2133 C
CMYK: 81 64 0 0
RGB: 74 108 247
HEX: #4A6CF7
White
Pantone: N/A
CMYK: 0 0 0 0
RGB: 255 255 255
HEX: #ffffff
Black as the Abyss
Pantone: Black 6 C
CMYK: 75 68 67 90
RGB: 18 23 35
HEX: #121723
Core Pairin's
These be the primary, high-contrast pairings for yer script an' buttons, to ensure clarity an' a mighty impact!
White on Brand Purple
A Sample o' Script
White on Primary Blue
A Sample o' Script
Brand Purple on Light Blue
A Sample o' Script
Primary Blue on Light Blue
A Sample o' Script
Core Colours in Action
Here be some examples o' the core colours bein' used for our primary brand encounters.
- Crewman's ID
- Advertisin' on the Docks
- Navigatin' the Feast
The Secondary Colours
The secondary palette includes the tints an' shades of our core colours. They be used to add depth, establish a pecking order, an' support the main colours in more complex designs, me hearty.
Dark Purple
Pantone: 2695 C
CMYK: 84 99 26 14
RGB: 62 22 122
HEX: #3E167A
Dark Blue
Pantone: 2728 C
CMYK: 97 85 24 10
RGB: 37 58 154
HEX: #253A9A
Light Purple
Pantone: 2655 C
CMYK: 51 68 0 0
RGB: 159 125 219
HEX: #9f7ddb
Light Blue
Pantone: 2717 C
CMYK: 10 5 0 0
RGB: 233 238 255
HEX: #E9EEFF
Dark Grey
Pantone: 432 C
CMYK: 74 66 62 76
RGB: 29 36 48
HEX: #1D2430
Secondary Pairin's
These pairin's be ideal for less important information, backgrounds, or when a more subtle contrast be needed.
Light Purple on Black
A Sample o' Script
Light Blue on Black
A Sample o' Script
Black on Light Purple
A Sample o' Script
Black on Light Blue
A Sample o' Script
Pairin's to Avoid, Lest Ye Walk the Plank
To maintain legibility an' brand consistency, ye best avoid these colour combinations, 'specially for text.
- Dark secondary colours on light secondary colours
- Light secondary colours on dark secondary colours
- Light secondary colours on a core colour
- Dark secondary colours on a core colour
- Avoid pairin' tints and shades o' the same hue if the contrast be low
Usage Ratio
The proper ratio o' colour usage must be applied across all ITGOIT communications from a captain's perspective. For core ports o' call an' when introducin' ITGOIT to new recruits, we rely heavily on our core colours. More fleeting applications, like on the social seas, allow us to embrace the secondary colours to be more playful in our expression.
Secondary Colours in Action
Here be some examples o' the secondary colours in use:
- Instagram Story
- Instagram Post
- Swag & Booty
Colour Don'ts, Ya Scallywag!
Don't be usin' a dark colour on another colour
Don't be usin' a colour on a light colour
Don't be usin' a dark colour on a dark colour
Don't be usin' unapproved pairin's
Don't be usin' two colours at the same time
Don't be usin' colour with opacity
Don't be bringin' new gradient colours into yer script
Don't be bringin' new gradient colours into background elements
Don't be mixin' & matchin' different colour shades
For general guidance on minimum contrast, weigh anchor at WCAG.
Gradients
Gradients
Overview
Our gradient lingo, inspired by the glow of a treasure chest, is designed to bring a sense of depth an' atmosphere to ITGOIT messages. They provide a chance to maximize our expression with our purple an' blue palette, keepin' things fresh an' dynamic.
Types
Two different styles give ye flexibility when applyin' gradients, from a more pronounced curve to a more subtle one.
- Radial Gradient
- Cropped Gradient
Construction
The two gradient styles be different by the amount o' curve within 'em, as shown in the charts.
Radial Gradients have a pronounced semi-circular curve. Cropped Gradients produce a more linear effect by croppin' deeper into the curve.
Radial Gradient
Cropped Gradient
ITGOIT gradients only use two colours at a time, addin' a sense of depth without overpowerin' the composition.
Pairin's
The approved gradient colour pairin's be shown below, usin' our core Purple and Blue palette.
Gradients should generally move from a lighter or more vibrant colour to a darker one, to enhance the glowin' effect of the treasure.
Dark Purple on Black
Dark Blue on Black
Brand Purple on Primary Blue
Brand Purple on Dark Purple
Primary Blue on Dark Blue
Light Purple on Brand Purple
Light Blue on Primary Blue
Light Purple on Primary Blue
Light Blue on Brand Purple
Usage Spectrum
Gradients can be applied in the followin' ways when it comes to script an' background:
- Flat Colour on Colour
- Flat Colour on Gradient
- Gradient on Flat Colour
- Gradient on Gradient
In Use
Here be some examples of gradients in use:
Example 1
Example 2
Example 3