Bwandingu-wu
W-Welcome to ITGOIT Bwand Guidewines, nyaa~
At ITGOIT, we make IT simpwe, wewiabwe, and supew awesome fow evewyone, fwom peopwe to businesses and schoows, nyaa~. Ouw bwand is open-minded and fwiendwy, keeping youw digitaw wowwd wunning smoofwy, nyaa~.
These guidewines awe youw map to ouw bwand identity, wike a usew manuaw fow ouw wogo, cowows, gwadients, and vibe, nyaa~. Fowwowing them keeps ITGOIT shiny, vibwant, and twue to ouw mission of giving top-notch IT sewvices with a smiwe, nyaa~.
If you wanna use ouw bwand stuff, pwease match these guidewines and ask fow appwovaw via ouw contact page, nyaa~. Weviews take 3-5 weeks. Wet’s buiwd something gweat togevew, nyaa~!
Hugs, The ITGOIT Bwand Team, nyaa~
OuO Bwand Assets~
Downwoad ouw bwand kit ow individuaw wogos and symbows fow youw use, nyaa~
Wogo
Logo
Constwuction~
The pwimawy vewsion of the ITGOIT wogo has the symbow, cawwed IT Symbow, and the ITGOIT wowdmark, nyaa~ These two bits awe opticawwy bawanced by matching the countews of the wowdmark to the symbow~
Cweawspace~
Ouw wogo needs woom to bweathe, cawwed cweawspace, nyaa~ This keeps it fwom getting wost ow wooking too cwuttewed. The cweaw space is the height of 'I' fwom the wowdmark~
Scawabiwity~
Ouw wogo is made to wowk at diffewent sizes, nyaa~ The smawwest symbow size fow digitaw apps is 20px in height to keep it weadabwe~
Usage~
Using the ITGOIT wogo stawts with undewstanding ouw bwand pwesence, nyaa~ Sometimes the wogo is the main chawactew, sometimes it’s suppowting. The symbow can be detached fow dispway use~
Do's & Don'ts~
Yes: Symbow & Wowdmark used togethew as sign-off, nyaa~
Yes: Wowdmark used by itsewf fow dispway usage, nyaa~
No: Wowdmark used without Symbow as sign-off, nyaa~
No: Wogo wockup used at dispway size, nyaa~
Pwacement~
We pwace ouw wowdmark in specific spots to ensuwe consistency and fwexibiwity, nyaa~
Cowow~
Pwimawy on Secondawy, nyaa~
Pwimawy on Wight Pwimawy, nyaa~
Cowow on Secondawy, nyaa~
Secondawy on Pwimawy, nyaa~
Wight Pwimawy on Pwimawy, nyaa~
Secondawy on Cowow, nyaa~
Ovew Imgewies~
Ouw wowdmark shouwd be cweawwy weadabwe ovew images, nyaa~ Ensuwe enough contwast and avoid compwex backgwounds. Check WCAG fow contwast guidance~
Do's & Don'ts~
Yes: Wogo has enough contwast with the backgwound, nyaa~
Yes: Wogo has enough contwast with the backgwound, nyaa~
No: Wogo pwacement intewfewes with busy backgwound, nyaa~
No: Not enough contwast between wogo and imgewies, nyaa~
Contextuaw Usage~
On sociaw media, the wogo is optionaw fow weguwaw posts but wequiwed fow key announcements, nyaa~ Fow out-of-home ads, the wogo is essentiaw~
Pawtnew Wockup Howizontaw~
The ITGOIT wogo can be wocked up howizontawwy with pawtnew wogos, nyaa~ Space between wogos equaws 1.5x the cap height of the wowdmark~
Pawtnew Wockup Vewticaw~
The ITGOIT wogo can be wocked up vewticawwy with pawtnew wogos, nyaa~ Space between wogos equaws 1.5x the cap height of the wowdmark~
Pawtnew Wockup Opticaw Adjustment~
Pawtnew wogos may need opticaw adjustment to bawance with the ITGOIT wogo, nyaa~
Wogo Don'ts~
No: Don’t stwetch ow distowt the wogo, nyaa~
No: Don’t wotate the wogo, nyaa~
No: Don’t change awignments of the wogo, nyaa~
No: Don’t outwine the wogo, nyaa~
No: Don’t change the scawe wewationship of symbow and wowdmark, nyaa~
No: Don’t appwy effects wike gwows ow dwop shadows, nyaa~
Symbow
Symbol
Ovewview~
In some cases, the ITGOIT wogo can be weduced to the symbow, cawwed IT Symbow, nyaa~ It’s most used whewe size wimits the fuww wowdmark, wike app icons ow sociaw media avataws. Ouw symbow makes the bwand iconic and fwexibwe~
Cweawspace~
Some space is needed awound the symbow to keep it fwom being cwuttewed by awtwowk, imgewies, ow page edges, nyaa~ The minimum spacing is one-thiwd of the symbow’s width~
Scawabiwity~
The IT Symbow is made to wowk in vawious sizes, nyaa~ The smawwest symbow size fow digitaw apps is 20px in height to ensuwe weadabiwity~
Howizontaw Wockup~
The IT Symbow can be wocked up with pawtnew bwands and cowwabowatows’ wogos, nyaa~ The size of 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~
Awignment~
Fow digitaw apps, the symbow is often wocked up in a wectanguwaw ow ciwcuwaw containew, nyaa~ The symbow must be mechanicawwy awigned fow bawance and sized to give comfowtabwe space on aww sides~
Scawabiwity~
The IT Symbow is made to wowk in vawious sizes, nyaa~ The smawwest symbow icon shouwd be 30px taww to be weadabwe~
Cowow Paiwings~
Pwimawy on Twanspawent, nyaa~
White on Pwimawy, nyaa~
In Use~
An exampwe of the IT Symbow used as an app icon ow sociaw media avataw, nyaa~
Symbow Don'ts~
No: Don’t stwetch ow distowt the symbow, nyaa~
No: Don’t tiwt the symbow, nyaa~
No: Don’t change the composition of the symbow, nyaa~
No: Don’t outwine the symbow, nyaa~
No: Don’t use gwow effect on the symbow, nyaa~
No: Don’t use symbow as a mask, nyaa~
No: Don’t appwy dwop shadows to the symbow, nyaa~
No: Don’t use unappwoved cowow paiwing on the symbow, nyaa~
No: Don’t use wow wesowution symbow, nyaa~
Typogwaphy~
Typography
Ouw Typefaces~
ITGOIT uses two cute typefaces fwom the Ginto famiwy: Ginto ITGOIT Nord fow big, bold headwines and Ginto ITGOIT Medium fow smawwew text wike subheadwines and captions, nyaa~ These wet ouw bwand switch between supew engaging vibes and cweaw, infowmative chats. Pwus, GG Sans is used in the ITGOIT pwoduct, nyaa~ Check ITGOIT’s pwoduct guidewines fow detaiws~
Custom Chawactews~
Some chawactews in ouw typefaces awe tweaked to be extwa weadabwe acwoss pwatfowms, nyaa~ Awways use the custom Ginto ITGOIT typefaces instead of standawd Ginto to keep things functional and wooking consistent~
Chawactew Set: Ginto ITGOIT Nord Bowd~
This shows the chawactew wange of Ginto ITGOIT Nord Bowd, suppowting aww Euwopean Watin-based wanguages, but not Gweek ow Cywiwwic scwipts, nyaa~ Fow non-Watin scwipts (wike Mandawin, Awabic, Hebwew), designy-wenies shouwd pick Noto Sans ow the cwosest match to Ginto ITGOIT Nord in that wanguage~
Chawactew Set: Ginto ITGOIT Medium~
This shows the chawactew wange of Ginto ITGOIT Medium, covewing aww Euwopean Watin-based wanguages, except Gweek ow Cywiwwic chawactews, nyaa~ Fow non-Watin scwipts, use Noto Sans ow the neawest match to Ginto ITGOIT Medium~
Chawactew Set: Ginto ITGOIT Weguwaw~
This highwights the chawactew wange of Ginto ITGOIT Weguwaw, meant onwy fow digitaw and pwoduct apps, nyaa~ Don’t use this weight in bwand comms; go fow Ginto ITGOIT Medium instead~
Typeface Usage~
To bawance ITGOIT’s vibwant and fwiendwy identity with cweaw messaging, pick typefaces cawefuwwy, nyaa~ Use Ginto ITGOIT Nord 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~
Case Setting~
Fow consistency, set Ginto ITGOIT Nord Bowd in Aww Caps fow headwines, nyaa~ Use Titwe Case ow Sentence Case fow Ginto ITGOIT Medium, depending on context, to make it supew weadabwe~
Winespacing: Ginto ITGOIT Nord Bowd~
Keep winespacing tight but avoid too woose ow cwamped settings, nyaa~ Peek at exampwes fow guidance~
Winespacing: Ginto ITGOIT Medium~
Make suwe winespacing awwows easy weading, avoiding ovewwap of ascendews and descendews, nyaa~ Use a bawanced appwoach: not too tight, not too woose~
Wettewspacing: Ginto ITGOIT Nord Bowd~
Fow headwines, fowwow a thwee-step pwocess: stawt with defauwt spacing, appwy -3% twacking, then kewn fow even spacing, nyaa~ Use tight wettewspacing fow wawge type, woosew fow smawwew type~
Wettewspacing: Ginto ITGOIT Medium~
Appwy the same thwee-step pwocess as Nord Bowd, ensuwing bawanced spacing fow weadabiwity, nyaa~
Awignment: Ginto ITGOIT Nord Bowd~
Awign text weft ow centew fow ITGOIT comms, nyaa~ Avoid wight-awignment ow fowced justification~
Awignment: Ginto ITGOIT Medium~
Awign text weft ow centew fow ITGOIT comms, nyaa~ Avoid wight-awignment ow fowced justification~
Wagging~
Wagging is the visuaw edge of a text bwock, nyaa~ Smooth wagging by adjusting wine bweaks to cweate a cwean, weadabwe edge, avoiding widows and uneven wines~
Sizing~
Use no mowe than two type sizes, dewived by doubwing ow hawving a base size (e.g., 25pt to 50pt), nyaa~ 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~
Typogwaphy Don'ts~
No: Avoid compwessing ow ewongating type, nyaa~
No: Don’t use Ginto ITGOIT Medium fow headwines ow Nord Bowd fow body copy, nyaa~
No: Headwines shouwd be in Aww Caps, not Sentence Case, nyaa~
No: Stick to appwoved Ginto ITGOIT weights, nyaa~
No: Use onwy Ginto ITGOIT typefaces, not othews, nyaa~
No: Avoid highwighting text with muwtipwe cowows, nyaa~
No: Keep typogwaphy upwight, not tiwted, nyaa~
No: Use onwy appwoved gwadients, no othew effects, nyaa~
No: Avoid outwining text, nyaa~
Backup Typeface: Montsewwat~
Use Montsewwat Extwa Bowd fow headwines when Ginto ITGOIT Nord isn’t avaiwabwe, nyaa~ Fowwow ITGOIT typogwaphy guidewines and avoid othew fonts wike Awiaw~
Backup Typeface: Noto Sans~
Use Noto Sans Semibowd fow subheads, body copy, ow captions when Ginto ITGOIT Medium isn’t avaiwabwe, nyaa~ Fowwow ITGOIT typogwaphy guidewines~
Backup Typeface: Non-Watin~
Use Noto Sans Bwack fow non-Watin scwipts (e.g., Mandawin, Awabic) when Ginto ITGOIT isn’t avaiwabwe, ow the cwosest equivawent, nyaa~
Cowows & Gwadients OwO
Cowowws!!
Colors
Ouw Speciaw Bwand Cowows!! >w<
Ouw identity is wike, defined by a supew-dupew cute duo: Bwand Puwple-chan and Pwimawy Bwue-kun! Puwple is fow ouw smort and shiny ideas, and Bwue-kun is fow twust and being a weally good fwiend (ꈍᴗꈍ). Dis combo makes a supew-cute and modewn pawette dat is sooooo ITGOIT! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
Bwand Puwple-chan
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Pwimawy Bwue-kun
Pantone: 2133 C
CMYK: 81 64 0 0
RGB: 74 108 247
HEX: #4A6CF7
Cowe Pawette~
Dis is ouw main cowow box! Using it a wot makes evewyone know it's us!! And we have a secondawy pawette fow even mowe fun tiemz! (づ｡◕‿‿◕｡)づ
Bwand Puwple-chan
Pantone: 268 C
CMYK: 80 98 0 0
RGB: 91 33 182
HEX: #5b21b6
Pwimawy Bwue-kun
Pantone: 2133 C
CMYK: 81 64 0 0
RGB: 74 108 247
HEX: #4A6CF7
Whitey-White
Pantone: N/A
CMYK: 0 0 0 0
RGB: 255 255 255
HEX: #ffffff
Bwackie
Pantone: Black 6 C
CMYK: 75 68 67 90
RGB: 18 23 35
HEX: #121723
Cute Paiwings!
Dese awe the bestest, high-contwast paiwings fow wowds and buttons to make them cwear and impactful! UwU
White on Bwand Puwple-chan
Sampwe Text UwU
White on Pwimawy Bwue-kun
Sampwe Text UwU
Bwand Puwple on Wight Bwue
Sampwe Text UwU
Pwimawy Bwue on Wight Bwue
Sampwe Text UwU
Cowe Pawette In Use :3
Hewwo! Hewe awe some exampwes of the cowe pawette being used on supew impowtant stuff.
- Empwoyee ID Cawd >.<
- Outside Advewtising!
- Finding Ur Way at a Pawty!
Secondawy Pawette (づ￣ ³￣)づ
The secondawy pawette has wots of wight and dawk shades of ouw favowite cowows. We use them to add depth, make things wook pwetty, and hewp the pwimawy pawette in compwex designs. Teehee!
Dawk Puwple
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 Puwple
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 perfect fow wittle info, backgwounds, ow when u want a softew wook.
Wight Puwple on Bwackie
Sampwe Text UwU
Wight Bwue on Bwackie
Sampwe Text UwU
Bwackie on Wight Puwple
Sampwe Text UwU
Bwackie on Wight Bwue
Sampwe Text UwU
P-Paiwings to Avoid pwease!
To keep things weadable and cute, pwease don't use these cowow combos, especiowwy fow wowds! ;-;
- 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
- Pwease avoid paiwing tints and shades of the same hue if da contwast is wow
Usage Watio :o
We shouwd use ouw cowows in a good way! Fow impowtant stuff and meeting new fwiends, we use ouw cowe pawette a wot. Fow fun stuff wike social media, we can be mowe pwayful wif the secondawy cowows! YAY! (ﾉ^ヮ^)ﾉ*:・ﾟ✧
Secondawy Pawette In Use!
Hewe are some exampwes of the secondawy pawette being used:
- Instagwam Stowy
- Instagwam Post
- Cute Stuff!
Cowow Nyo-Nyos! (｡•́︿•̀｡)
Nyo use Dawk Cowow on Cowow
Pwease don't use Cowow on Wight Cowow
Don't use Dawk Cowow on Dawk Cowow ;-;
Nyo use unappwoved paiwings
Pwease don't use two cowows at the same time
Don't use cowow in Opacity
Don't bwing new gwadients into type
Don't bwing new gwadients into backgwound stuff
Pwease don't mix & match diffewent cowow shades
Fow hewp on contwast, pwease visit WCAG, they awe smort!
Gwadients!!
Gradients
Ovewview owo
Ouw gwadient wanguage is inspiwed by a glowy scween! It's made to bwing depth and feewings to ITGOIT stuff. It's a chance to show off ouw puwple and bwue pawette and keep things fwesh and dynamic! (´｡• ᵕ •｡`)
Types!
Two diffewent styes give fwexibiwity when using gwadients, fwom big cuwves to smawwer ones.
- Wadiaw Gwadient
- Cwopped Gwadient
How to Make Them!
The two gwadient styes are diffewent because of the cuwves, wike in the pictuwes!
Wadiaw Gwadients have a big, wound cuwve. Cwopped Gwadients make a stwaightew effect by cwopping the cuwve.
branding.gradients.construction.radial
branding.gradients.construction.cropped
ITGOIT gwadients onwy use two cowows at a time, which adds depth without being too much! ＼(٥⁀▽⁀ )／
Paiwings!
The appwoved gwadient paiwings awe shown bewow, using ouw cute Puwple and Bwue pawette.
Gwadients shouwd go fwom a wightew cowow to a dawkew one, to make it mowe glowy!
Dawk Puwple on Bwackie
Dawk Bwue on Bwackie
Bwand Puwple-chan on Pwimawy Bwue-kun
Bwand Puwple-chan on Dawk Puwple
Pwimawy Bwue-kun on Dawk Bwue
Wight Puwple on Bwand Puwple-chan
Wight Bwue on Pwimawy Bwue-kun
Wight Puwple on Pwimawy Bwue-kun
Wight Bwue on Bwand Puwple-chan
How to Use Them!
Gwadients can be used in these ways fow type and backgwound:
- Fwat Cowow on Cowow
- Fwat Cowow on Gwadient
- Gwadient on Fwat Cowow
- Gwadient on Gwadient
In Use!
Hewe are some exampwes of gwadients being used:
Exampwe 1
Exampwe 2
Exampwe 3