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!
Paint and Waves
Paint the Seas
Colors
Blurple
Blurple be the anchor o’ our color hoard and one o’ the most famed bits o’ our brand, arr! It’s a bold an’ lively hue that mirrors the spirited, playful, an’ digital-first soul o’ our brand. We must wield Blurple steady an’ true in our parley, matey.
Blurple
Pantone: 2726
CMYK: 74 61 0 0
RGB: 88 101 242
HEX: #5865f2
Core Palette
Our core palette be the foundation o’ our color scheme an’ should be the first sight at key brand ports, arr! Usin’ it true sets a known visual mark fer the ITGOIT brand, backed by our secondary palette, matey.
Blurple
Pantone: 2726
CMYK: 74 61 0 0
RGB: 88 101 242
HEX: #5865f2
Light Blurple
Pantone: 2706C
CMYK: 10 9 0 0
RGB: 224 227 255
HEX: #e0e3ff
Black
Pantone: PMS Black 6 C
CMYK: 0 0 0 100
RGB: 0 0 0
HEX: #000000
Core Pairin’s
We got four core pairin’s we use with typography, arr!
Blurple on Black, arr!
Sample Scribble, arr!
Blurple on Light Blurple, arr!
Sample Scribble, arr!
Light Blurple on Blurple, arr!
Sample Scribble, arr!
Black on Blurple, arr!
Sample Scribble, arr!
Core Palette In Use
Here be some examples o’ the core palette in action, arr!
- Crew ID Badge, arr!
- Out-o’-Home Banners, arr!
- Event Pathfindin’, arr!
Secondary Palette
The secondary palette widens our brand’s voice, lettin’ ITGOIT adapt to various seas while keepin’ a spirit o’ joy an’ vibrancy, arr! These colors can spice up parley or complement certain images or messages, matey.
Dark Blurple
Pantone: 2746C
CMYK: 99 96 40 45
RGB: 25 23 92
HEX: #19175c
Dark Green
Pantone: 3435C
CMYK: 87 55 74 71
RGB: 0 41 32
HEX: #002920
Dark Pink
Pantone: 7659C
CMYK: 62 79 55 64
RGB: 56 31 44
HEX: #381f2c
Black
Pantone: PMS Black 6 C
CMYK: 0 0 0 100
RGB: 0 0 0
HEX: #000000
Blurple
Pantone: 2726
CMYK: 74 61 0 0
RGB: 88 101 242
HEX: #5865f2
Green
Pantone: 7479C
CMYK: 53 0 0 0
RGB: 53 237 126
HEX: #35ed7e
Pink
Pantone: 232C
CMYK: 4 71 0 0
RGB: 255 76 210
HEX: #ff4cd2
Dark
Pantone: 432C
CMYK: 72 66 65 75
RGB: 31 31 31
HEX: #1f1f1f
Light Blurple
Pantone: 2706C
CMYK: 10 9 0 0
RGB: 224 227 255
HEX: #e0e3ff
Light Green
Pantone: 331C
CMYK: 17 0 12 0
RGB: 200 255 239
HEX: #c8ffef
Light Pink
Pantone: 250C
CMYK: 13 28 20 0
RGB: 245 201 255
HEX: #f5c9ff
Pure White (Digital Only)
CMYK: 0 0 0 0
RGB: 255 255 255
HEX: #ffffff
Secondary Pairin’s
We got four secondary pairin’s fer typography, arr! Don’t use pairin’s outside this approved crew, matey.
Green on Black, arr!
Sample Scribble, arr!
Pink on Black, arr!
Sample Scribble, arr!
Black on Green, arr!
Sample Scribble, arr!
Black on Pink, arr!
Sample Scribble, arr!
Pairin’s to Avoid
Examples o’ pairin’s to steer clear o’ when usin’ our secondary colors, arr!
- Dark Color on Light Color, arr!
- Light Color on Dark Color, arr!
- Light Color on Color, arr!
- Dark Color on Color, arr!
- Don’t pair tints an’ shades o’ Green or Pink in the same riggin’, arr!
Usage Ratio
The right ratio o’ color use must be applied ‘cross ITGOIT parley from a grand view, arr! Fer core ports an’ when showin’ ITGOIT to new mates, we lean hard on our core palette (with a touch o’ secondary if fittin’). More fleeting an’ contextual uses, like social media, let us wield color to match the tide an’ be more playful in our brand voice, matey.
Secondary Palette In Use
Here be examples o’ the secondary palette in action, arr!
- Instagram Tale, arr!
- Instagram Post, arr!
- Merch, arr!
Color Don’ts
Don’t use Dark Color on Color, arr!
Don’t use Color on Light Color, arr!
Don’t use Dark Color on Dark Color, arr!
Don’t use unapproved pairin’s, arr!
Don’t use two colors at once, arr!
Don’t use color in opacity, arr!
Don’t bring new gradient colors into type, arr!
Don’t bring new gradient colors into background bits, arr!
Don’t mix & match different color shades, arr!
Fer general guidance on minimum contrast needs, visit WCAG, arr!
Gradient Tongue
Gradients
Overview
Our gradient tongue, sparked by the glow o’ a screen, be crafted to bring depth an’ mood to ITGOIT parley, arr! They offer a chance to hoist our colors bold, keepin’ things fresh an’ lively, while sailin’ alongside our illustrations an’ photographic ways, matey.
Types
Two differin’ styles give leeway when applyin’ gradients, from bold curves to more subtle, arr!
- Radial Gradient, arr!
- Cropped Gradient, arr!
Construction
The two gradient styles be set apart by the curve within the gradient, as shown in the charts, arr!
Radial Gradients boast a bold half-moon curve, arr! Cropped Gradients make a straighter effect by cuttin’ deeper into the curve, matey.
Radial Gradient
Cropped Gradient
ITGOIT gradients use just two colors at a time, addin’ depth without swampin’ the composition, arr!
Pairin’s
The approved gradient color pairin’s be shown below, arr!
All gradients be tones o’ the same color, movin’ from darkest at the top to lightest at the bottom, arr! This keeps a 'glowin’' effect stead o’ a top-down light, matey.
Dark Blurple on Black, arr!
Dark Green on Black, arr!
Dark Pink on Black, arr!
Blurple on Dark Blurple, arr!
Green on Dark Green, arr!
Pink on Dark Pink, arr!
Light Blurple on Blurple, arr!
Light Green on Green, arr!
Light Pink on Pink, arr!
Usage Spectrum
Gradients can be rigged these ways fer type an’ backgrounds, arr!
- Flat Color on Color, arr!
- Flat Color on Gradient, arr!
- Gradient on Flat Color, arr!
- Gradient on Gradient, arr!
In Use
Here be some examples o’ gradients in action, arr!
Example 1, arr!
Example 2, arr!
Example 3, arr!