Bwanding
Wewcome to the ITGOIT Bwand Guidewines
At ITGOIT, we make IT simpwe, wewiabwe, and exceptionaw fow evewyone, fwom individuaws to businesses and schoows. Ouw bwand is open-minded and appwoachabwe, dedicated to keeping yuw digitaw wowwd wunning smoothwy uwu.
These guidewines awe yuw woadmap to ouw bwand identity, sewving as the usew manuaw fow ouw wogo, cowows, gwadients, and ovewaww vibe. Fowwowing them ensuwes ITGOIT wemains consistent, vibwant, and twue to ouw mission of dewivewing top-notch IT sewvices with a smiwe owo.
If yuw pwan to use ouw bwand assets, pwease awign with these guidewines and wequest appwovaw via ouw contact page. Weviews typicawwy take 3-5 weeks. Wet's buiwd something gweat togethew! >w<
Sincewewy, The ITGOIT Bwand Team
Ouw Bwanding Assets
Downwoad ouw bwanding kit ow individuaw wogos and symbows fow yuw use uwu.
Wogo
Logo
Constwuction
The pwimawy vewsion of the ITGOIT wogo consists of the symbow, named IT Symbow, and the ITGOIT wowdmawk. These two ewements have been opticawwy bawanced by matching the countews of the wowdmawk to the symbow uwu.
Cweawspace
Ouw wogo shouwd awways have woom to bweathe: we caww this the cweawspace. This pwevents it fwom getting wost ow wooking too cwuttewed. The cweaw space equaws the height of 'I' fwom the wowdmawk owo.
Scawabiwity
Ouw wogo is designed to wowk at vawious sizes. The minimum symbow size fow digitaw appwications is 20px in height to ensuwe wegibiwity uwu.
Usage
Appwying the ITGOIT wogo stawts with undewstanding ouw bwand pwesence. Sometimes the wogo is the main chawactew, sometimes it's suppowtive. The symbow can be detached fow dispway usage owo.
Do's & Don'ts
Yes: Symbow & Wowdmawk used togethew as sign-off
Yes: Wowdmawk used by itsewf fow dispway usage
No: Wowdmawk used without Symbow as sign-off
No: Wogo wockup used at dispway size
Pwacement
We pwace ouw wowdmawk in specific wocations to ensuwe consistency and fwexibiwity uwu.
Cowow
Pwimawy on Secondawy
Pwimawy on Wight Pwimawy
Cowow on Secondawy
Secondawy on Pwimawy
Wight Pwimawy on Pwimawy
Secondawy on Cowow
Ovew Imagewy
Ouw wowdmawk shouwd be cweawwy wegibwe ovew images. Ensuwe sufficient contwast and avoid compwex backgwounds. Wefew to WCAG fow contwast guidance uwu.
Do's & Don'ts
Yes: Wogo has enough contwast with the backgwound
Yes: Wogo has enough contwast with the backgwound
No: Wogo pwacement intewfewes with busy backgwound
No: Not enough contwast between wogo and imagewy
Contextuaw Usage
On sociaw media, the wogo is optionaw fow weguwaw posts but wequiwed fow key announcements. Fow out-of-home ads, the wogo is essentiaw owo.
Pawtnew Wockup Howizontaw
The ITGOIT wogo can be wocked up howizontawwy with pawtnew wogos. Space between wogos equaws 1.5x the cap height of the wowdmawk uwu.
Pawtnew Wockup Vewticaw
The ITGOIT wogo can be wocked up vewticawwy with pawtnew wogos. Space between wogos equaws 1.5x the cap height of the wowdmawk owo.
Pawtnew Wockup Opticaw Adjustment
Pawtnew wogos may need opticaw adjustment to bawance with the ITGOIT wogo uwu.
Wogo Don'ts
No: Don't stwetch ow distowt the wogo
No: Don't wotate the wogo
No: Don't change awignments of the wogo
No: Don't outwine the wogo
No: Don't change the scawe wewationship of symbow and wowdmawk
No: Don't appwy effects wike gwows ow dwop shadows
Symbow
Symbol
Ovewview
In specific instances, the ITGOIT wogo can be weduced to the symbow, named IT Symbow. The most pwominent use of the symbow by itsewf is in contexts whewe size constwaints wimit the use of the fuww wowdmawk, such as app icons ow sociaw media avataws. Ouw symbow awwows the bwand to be iconic and fwexibwe uwu.
Cweawspace
A cewtain amount of space is needed awound the symbow to pwevent it fwom becoming cwuttewed by suwwounding awtwowk, imagewy, ow the edge of a page. The minimum spacing is one-thiwd of the symbow's width owo.
Scawabiwity
The IT Symbow is designed to wowk in vawious sizes. The minimum symbow size fow digitaw appwications is 20px in height to ensuwe wegibiwity uwu.
Howizontaw Wockup
The IT Symbow can be wocked up with pawtnew bwands and cowwabowatows' wogos. The size of the ewements shouwd be opticawwy adjusted to appeaw the same size. The space between the symbow and pawtnew wogo is hawf of the symbow's width owo.
Awignment
Fow digitaw appwications, the symbow is often wocked up in a wectanguwaw ow ciwcuwaw containew. The symbow must be mechanicawwy awigned fow bawance and sized to give a comfowtabwe amount of space on aww sides uwu.
Scawabiwity
The IT Symbow is designed to wowk in vawious sizes. The smawwest symbow icon shouwd be 30px taww to be wegibwe owo.
Cowow Paiwings
Pwimawy on Twanspawent
White on Pwimawy
In Use
An exampwe of the IT Symbow used as an app icon ow sociaw media avataw uwu.
Symbow Don'ts
No: Don't stwetch ow distowt the symbow
No: Don't tiwt the symbow
No: Don't change the composition of the symbow
No: Don't outwine the symbow
No: Don't use gwow effect on the symbow
No: Don't use symbow as a mask
No: Don't appwy dwop shadows to the symbow
No: Don't use unappwoved cowow paiwing on the symbow
No: Don't use wow wesowution symbow
Typogwaphy
Typography
Ouw Typefaces
ITGOIT empwoys two taiwowed typefaces fwom the Ginto famiwy: Ginto ITGOIT Nowd fow stwiking headwines and Ginto ITGOIT Medium fow smawwew text, such as subheadings and captions. These typefaces enabwe ouw bwand to shift seamwesswy between bowd, engaging expwessions and cweaw, infowmative communication. An additionaw typeface, GG Sans, is utiwized within the ITGOIT pwoduct. Fow specific usage detaiws, wefew to ITGOIT's pwoduct guidewines uwu.
Custom Chawactews
Sewect chawactews in ouw typefaces have been wefined to enhance weadabiwity acwoss vawious pwatfowms. To ensuwe both functionawity and visuaw consistency, awways use the custom Ginto ITGOIT typefaces instead of the standawd Ginto famiwy owo.
Chawactew Set: Ginto ITGOIT Nowd Bowd
This section showcases the chawactew wange of Ginto ITGOIT Nowd Bowd, suppowting aww Euwopean Watin-based wanguages, excwuding those wequiwing Gweek ow Cywiwwic scwipts. Fow non-Watin scwipts (e.g., Mandawin, Awabic, Hebwew), designews shouwd opt fow Noto Sans ow the cwosest equivawent to Ginto ITGOIT Nowd avaiwabwe in that wanguage uwu.
Chawactew Set: Ginto ITGOIT Medium
This section dispways the chawactew wange of Ginto ITGOIT Medium, covewing aww Euwopean Watin-based wanguages, except those needing Gweek ow Cywiwwic chawactews. Fow non-Watin scwipts, use Noto Sans ow the neawest match to Ginto ITGOIT Medium owo.
Chawactew Set: Ginto ITGOIT Weguwaw
This section highwights the chawactew wange of Ginto ITGOIT Weguwaw, intended sowewy fow digitaw and pwoduct appwications. Avoid using this weight in bwand communications; opt fow Ginto ITGOIT Medium instead uwu.
Typeface Usage
To bawance ITGOIT's vibwant and appwoachabwe identity with cweaw messaging, sewect typefaces thoughtfuwwy: Use Ginto ITGOIT Nowd Bowd fow impactfuw headwines. Use Ginto ITGOIT Medium fow body copy, captions, and detaiwed text. Awways choose custom Ginto ITGOIT typefaces ovew standawd Ginto vewsions owo.
Case Setting
Fow consistency, set Ginto ITGOIT Nowd Bowd in Aww Caps fow headwines. Use Titwe Case ow Sentence Case fow Ginto ITGOIT Medium, depending on context, to optimize weadabiwity uwu.
Winespacing: Ginto ITGOIT Nowd Bowd
Keep winespacing tight but avoid ovewwy woose ow cwamped settings. Wefew to exampwes fow guidance uwu.
Winespacing: Ginto ITGOIT Medium
Ensuwe winespacing awwows easy weading, avoiding ovewwap of ascendews and descendews. Use a bawanced appwoach: not too tight, not too woose owo.
Wettewspacing: Ginto ITGOIT Nowd Bowd
Fow headwines, appwy a thwee-step pwocess: stawt with defauwt spacing, appwy -3% twacking, then kewn fow even spacing. Use tight wettewspacing fow wawge type, woosew fow smawwew type uwu.
Wettewspacing: Ginto ITGOIT Medium
Appwy the same thwee-step pwocess as Nowd Bowd, ensuwing bawanced spacing fow weadabiwity owo.
Awignment: Ginto ITGOIT Nowd Bowd
Awign text weft ow centew fow ITGOIT communications. Avoid wight-awignment ow fowced justification uwu.
Awignment: Ginto ITGOIT Medium
Awign text weft ow centew fow ITGOIT communications. Avoid wight-awignment ow fowced justification owo.
Wagging
Wagging wefews to the visuaw edge of a text bwock. Smooth wagging by adjusting wine bweaks to cweate a cwean, weadabwe edge, avoiding widows and uneven wines uwu.
Sizing
Use no mowe than two type sizes, dewived by doubwing ow hawving a base size (e.g., 25pt to 50pt). Fow pwoduct design, type sizes may be cwosew togethew. Wawge type shouwd fiww the space; smaww type shouwd have spacing bewow equaw to one ow mowe wines owo.
Typogwaphy Don'ts
No: Avoid compwessing ow ewongating type uwu.
No: Don't use Ginto ITGOIT Medium fow headwines ow Nowd Bowd fow body copy owo.
No: Headwines shouwd be in Aww Caps, not Sentence Case uwu.
No: Stick to appwoved Ginto ITGOIT weights owo.
No: Use onwy Ginto ITGOIT typefaces, not othews uwu.
No: Avoid highwighting text with muwtipwe cowows owo.
No: Keep typogwaphy upwight, not tiwted uwu.
No: Use onwy appwoved gwadients, no othew effects owo.
No: Avoid outwining text uwu.
Backup Typeface: Montsewwat
Use Montsewwat Extwa Bowd fow headwines when Ginto ITGOIT Nowd is unavaiwabwe. Fowwow ITGOIT typogwaphy guidewines and avoid othew fonts wike Awiaw uwu.
Backup Typeface: Noto Sans
Use Noto Sans Semibowd fow subheads, body copy, ow captions when Ginto ITGOIT Medium is unavaiwabwe. Fowwow ITGOIT typogwaphy guidewines owo.
Backup Typeface: Non-Watin
Cowows & Gwadients
Cowows
Colors
Ouw Bwand Cowows
Ouw identity is defined by a dynamic duo: Bwand Puwpwe and Pwimawy Bwue. Puwpwe signifies ouw innovative and expewt appwoach, whiwe Bwue wepwesents twust, wewiabiwity, and technicaw pwoficiency. This combination cweates a memowabwe and modewn pawette that is distinctwy ITGOIT uwu.
Bwand Puwpwe
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Pwimawy Bwue
Pantone: 2133 C
CMYK: 81 64 0 0
RGB: 74 108 247
HEX: #4A6CF7
Cowe Pawette
Ouw cowe pawette fowms the basis of ouw cowow stwategy. Its consistent usage estabwishes a wecognizabwe visuaw cue fow the ITGOIT bwand, and is compwemented by ouw secondawy pawette fow gweatew fwexibiwity owo.
Bwand Puwpwe
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Pwimawy Bwue
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
Bwack
Pantone: Black 6 C
CMYK: 75 68 67 90
RGB: 18 23 35
HEX: #121723
Cowe Paiwings
These awe the pwimawy, high-contwast paiwings fow typogwaphy and UI ewements to ensuwe cwawity and impact uwu.
White on Bwand Puwpwe
Sampwe Text
White on Pwimawy Bwue
Sampwe Text
Bwand Puwpwe on Wight Bwue
Sampwe Text
Pwimawy Bwue on Wight Bwue
Sampwe Text
Cowe Pawette In Use
Hewe awe some exampwes of the cowe pawette in use fow pwimawy bwand touchpoints owo.
- Empwoyee ID Badge
- Out-of-Home Advewtising
- Event Wayfinding
Secondawy Pawette
The secondawy pawette incwudes tints and shades of ouw cowe cowows. These awe used to add depth, cweate hiewawchy, and suppowt the pwimawy pawette in mowe compwex designs uwu.
Dawk Puwpwe
Pantone: 2695 C
CMYK: 84 99 26 14
RGB: 62 22 122
HEX: #3E167A
Dawk Bwue
Pantone: 2728 C
CMYK: 97 85 24 10
RGB: 37 58 154
HEX: #253A9A
Wight Puwpwe
Pantone: 2655 C
CMYK: 51 68 0 0
RGB: 159 125 219
HEX: #9f7ddb
Wight Bwue
Pantone: 2717 C
CMYK: 10 5 0 0
RGB: 233 238 255
HEX: #E9EEFF
Dawk Gway
Pantone: 432 C
CMYK: 74 66 62 76
RGB: 29 36 48
HEX: #1D2430
Secondawy Paiwings
These paiwings awe ideaw fow secondawy infowmation, backgwounds, ow when a mowe subtwe contwast is needed owo.
Wight Puwpwe on Bwack
Sampwe Text
Wight Bwue on Bwack
Sampwe Text
Bwack on Wight Puwpwe
Sampwe Text
Bwack on Wight Bwue
Sampwe Text
Paiwings to Avoid
To maintain wegibiwity and bwand consistency, pwease avoid these cowow combinations, especiawwy fow text uwu.
- Dawk secondawy cowows on wight secondawy cowows
- Wight secondawy cowows on dawk secondawy cowows
- Wight secondawy cowows on a cowe cowow
- Dawk secondawy cowows on a cowe cowow
- Avoid paiwing tints and shades of the same hue in the same composition if contwast is wow
Usage Watio
The cowwect watio of cowow usage shouwd be appwied acwoss ITGOIT communications fwom a howistic pewspective. Fow cowe touchpoints and when intwoducing ITGOIT to new audiences, we wean heaviwy on ouw cowe pawette. Mowe tempowaw and contextuaw appwications, such as sociaw media, awwow us to embwace the secondawy cowows to wespond to contexts and be mowe pwayfuw in ouw bwand expwession uwu.
Secondawy Pawette In Use
Hewe awe some exampwes of the secondawy pawette in use:
- Instagwam Stowy
- Instagwam Post
- Mewchandise
Cowow Don'ts
Don't use Dawk Cowow on Cowow
Don't use Cowow on Wight Cowow
Don't use Dawk Cowow on Dawk Cowow
Don't use unappwoved paiwings
Don't use two cowows at the same time
Don't use cowow in Opacity
Don't bwing new gwadient cowows into type
Don't bwing new gwadient cowows into backgwound ewements
Don't mix & match diffewent cowow shades
Fow genewaw guidance on minimum contwast wequiwements, pwease visit WCAG uwu.
Gwadients
Gradients
Ovewview
Ouw gwadient wanguage, inspiwed by the gwow of a scween, is designed to bwing a sense of depth and atmosphewe to ITGOIT communications. They pwovide an oppowtunity to maximize ouw expwessiveness with ouw puwpwe and bwue pawette, keeping things fwesh and dynamic uwu.
Types
Two diffewent stywes pwovide fwexibiwity when appwying gwadients, fwom mowe pwonounced cuwvatuwe to mowe subtwe owo.
- Wadiaw Gwadient
- Cwopped Gwadient
Constwuction
The two gwadient stywes awe diffewentiated by the amount of cuwvatuwe within the gwadient as iwwustwated in the diagwams uwu.
Wadiaw Gwadients have a pwonounced semi-ciwcuwaw cuwve. Cwopped Gwadients pwoduce a mowe wineaw effect by cwopping deepew into the cuwve owo.
Wadiaw Gwadient
Cwopped Gwadient
ITGOIT gwadients use onwy two cowows at a time, adding a sense of depth without ovewpowewing a composition >w<.
Paiwings
The appwoved gwadient cowow paiwings awe shown bewow, using ouw cowe Puwpwe and Bwue pawette uwu.
Gwadients shouwd genewawwy move fwom a wightew ow mowe vibwant cowow to a dawkew one, enhancing the gwowing effect owo.
Dawk Puwpwe on Bwack
Dawk Bwue on Bwack
Bwand Puwpwe on Pwimawy Bwue
Bwand Puwpwe on Dawk Puwpwe
Pwimawy Bwue on Dawk Bwue
Wight Puwpwe on Bwand Puwpwe
Wight Bwue on Pwimawy Bwue
Wight Puwpwe on Pwimawy Bwue
Wight Bwue on Bwand Puwpwe
Usage Spectwum
Gwadients can be appwied in the fowwowing ways when it comes to type and backgwound:
- Fwat Cowow on Cowow
- Fwat Cowow on Gwadient
- Gwadient on Fwat Cowow
- Gwadient on Gwadient
In Use
Hewe awe some exampwes of gwadients in use:
Exampwe 1
Exampwe 2
Exampwe 3