(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{101:function(e,a,t){"use strict";t.r(a),t.d(a,"frontMatter",(function(){return s})),t.d(a,"metadata",(function(){return d})),t.d(a,"rightToc",(function(){return u})),t.d(a,"default",(function(){return j}));var n=t(2),l=t(6),b=(t(0),t(131)),o=t(133),c=t.n(o),r=t(136),i=t(132),s={title:"Brand",description:"NI-APH brand colors, fonts, and assets"},d={unversionedId:"brand",id:"brand",isDocsHomePage:!1,title:"Brand",description:"NI-APH brand colors, fonts, and assets",source:"@site/docs\\brand.md",slug:"/brand",permalink:"/docs/brand",version:"current"},u=[{value:"Visual language",id:"visual-language",children:[]},{value:"Logo",id:"logo",children:[{value:"Symbol",id:"symbol",children:[]},{value:"Logo Variations",id:"logo-variations",children:[]}]},{value:"Colors",id:"colors",children:[{value:"Primary colors",id:"primary-colors",children:[]},{value:"Secondary colors",id:"secondary-colors",children:[]},{value:"Light and dark shades",id:"light-and-dark-shades",children:[]},{value:"Contrasting colors",id:"contrasting-colors",children:[]},{value:"Shades of Grey",id:"shades-of-grey",children:[]}]},{value:"Typography",id:"typography",children:[{value:"Serif font",id:"serif-font",children:[]},{value:"Monospace Font",id:"monospace-font",children:[]},{value:"IBM VGA Font",id:"ibm-vga-font",children:[]}]},{value:"Diagrams",id:"diagrams",children:[]},{value:"Code Snippets",id:"code-snippets",children:[]},{value:"Slides",id:"slides",children:[]}],h={rightToc:u};function j(e){var a=e.components,t=Object(l.a)(e,["components"]);return Object(b.b)("wrapper",Object(n.a)({},h,t,{components:a,mdxType:"MDXLayout"}),Object(b.b)("h2",{id:"visual-language"},"Visual language"),Object(b.b)("p",null,"The visual language of NI-APH courses has made a long way since 2017 when it took place for the first time. "),Object(b.b)("div",{className:c.a.oldaph},Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/aph_2017.png")}),Object(b.b)("span",null,"APH 2017")),Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/aph_2018.png")}),Object(b.b)("span",null,"APH 2018")),Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/aph_2019.png")}),Object(b.b)("span",null,"APH 2019"))),Object(b.b)("div",{className:c.a.figure},Object(b.b)("img",{src:Object(i.a)("img/docs/brand/aph_2020.png")}),Object(b.b)("span",null,"APH 2020")),Object(b.b)("p",null,"In 2017, the design consisted of a simple logo made of ",Object(b.b)("strong",{parentName:"p"},"APH")," letters and a striped effect over all images.\n2018 brought several changes to the design - slides were readjusted from 4:3 to 16:9 ratio, colors were selected with more care and the striped effect was smoothened.\nIn 2019, all slides were rewritten from PowerPoint into HTML which introduced new opportunities - interactive content, CSS animations and themes. The logo could benefit from a new look,\nyet it still contained letters from the Czech title \"Architektura Po\u010d\xedta\u010dov\xfdch Her\", which wasn't very convenient for a symbol. Moreover, slides were wrapped in fancy colored frames and\ntitles were animated with a slight touch of chromatic aberration. Along with tech-like shiny backgrounds, the concept itself looked cool, but it couldn't do much justice the topic as a whole. Furthermore, these eye-candies found themselves distracting when one needed to study the content."),Object(b.b)("p",null,"Ultimately, in 2020, a full-fledged brand template was introduced - color palette, a logo that has a good ring to the course itself, and unique visuals, including a grid-like pattern for the slides, suggesting\ngraph paper for architectural sketches. All fancy animations from 2019 have receded in a blaze of simplicity and minimalism."),Object(b.b)("h2",{id:"logo"},"Logo"),Object(b.b)("p",null,"The APH logo is a graphic representation of the subject and the primary graphic element of its identity. The symbol is represented by a stylized microchip with joypad buttons on its surface - directional buttons on the left,\nABXY buttons on the right, rotated by 90 degrees counter-clockwise, and tiny start and select buttons in the middle. The yellow Y button is cut out from the left, at angle of 90 degrees, which turns the button into a silhouette\nof Pac-Man, heading into two tiny buttons in the middle, indicating pac-dots."),Object(b.b)("p",null,"The logo represents Architecture of Computer Games, where Pac-Man points out that the content is not solely technical."),Object(b.b)("div",{className:c.a.figure},Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_measured.svg")}),Object(b.b)("span",null,"APH logo design")),Object(b.b)("div",{className:c.a.figure},Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_colored.svg")}),Object(b.b)("span",null,"APH colored logo")),Object(b.b)("h3",{id:"symbol"},"Symbol"),Object(b.b)("p",null,"The symbol is represented by ABXY buttons that appear on the right side of the logo. It is a detachable part of the logo and can be used in specific cases, such as favicons."),Object(b.b)("div",{className:c.a.figure},Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_detached.svg")}),Object(b.b)("span",null,"APH symbol")),Object(b.b)("h3",{id:"logo-variations"},"Logo Variations"),Object(b.b)("p",null,"Buttons can have the same color as the joypad (yet Pac-Man must be brighter than the rest), and the cover can be removed.\nIn case of a solid dark background, logo can be used without the cover. If the background has other distracting elements that could interfere with the readability of the logo, the default version should be used instead."),Object(b.b)("div",{className:c.a.oldaph},Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_colored.svg")}),Object(b.b)("span",null,"Default")),Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_blackwhite.svg")}),Object(b.b)("span",null,"Black and White")),Object(b.b)("div",null,Object(b.b)("img",{src:Object(i.a)("img/docs/brand/logo_nocover.svg")}),Object(b.b)("span",null,"Without cover"))),Object(b.b)("h2",{id:"colors"},"Colors"),Object(b.b)("p",null,"APH palette is bright and consists of several colors that helps the course to be unique, modern and cheerful."),Object(b.b)("h3",{id:"primary-colors"},"Primary colors"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"primary colors are ",Object(b.b)("strong",{parentName:"li"},"lemon yellow"),", ",Object(b.b)("strong",{parentName:"li"},"emerald green"),", ",Object(b.b)("strong",{parentName:"li"},"royal blue"),", and ",Object(b.b)("strong",{parentName:"li"},"tomato red")),Object(b.b)("li",{parentName:"ul"},"these colors are to be used mainly for highlighting"),Object(b.b)("li",{parentName:"ul"},"lemon yellow represents Pac-Man, the first game that introduced a character"),Object(b.b)("li",{parentName:"ul"},"emerald green represents grass of open worlds worthy exploration from Zelda and Pok\xe9mon s\xe9ries"),Object(b.b)("li",{parentName:"ul"},"royal blue is a color of sky from the very first Super Mario game"),Object(b.b)("li",{parentName:"ul"},"tomato red suggests lava from NES games, chambers of hell from Doom and desert plains from the first game of Dune")),Object(b.b)("div",{className:c.a.colors},Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-lemon"],c.a["color-rhino-80"])},"#E9E56F"),Object(b.b)("span",null,"Lemon")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-emerald"]},"#47D58A"),Object(b.b)("span",null,"Emerald")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-royal"]},"#6F8CE9"),Object(b.b)("span",null,"Royal")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-tomato"]},"#CF2F25"),Object(b.b)("span",null,"Tomato"))),Object(b.b)("h3",{id:"secondary-colors"},"Secondary colors"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"secondary colors extend the pallete by modest manhattan color, distinctive and brightful aqua color, and pleasant matte azure")),Object(b.b)("div",{className:Object(r.a)(c.a.colors,c.a.smaller)},Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-manhattan"],c.a["color-rhino-80"])},"#F6C9A0"),Object(b.b)("span",null,"Manhattan")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-aqua"]},"#6F8CE9"),Object(b.b)("span",null,"Aqua")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-azure"]},"#CF2F25"),Object(b.b)("span",null,"Azure"))),Object(b.b)("h3",{id:"light-and-dark-shades"},"Light and dark shades"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"every primary and secondary color has got their own light and dark variant")),Object(b.b)("div",{className:Object(r.a)(c.a.colors,c.a.smaller)},Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-tomato-light"],c.a["color-rhino-90"])},"#FF867F"),Object(b.b)("span",null,"Tomato Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-tomato"]},"#CF2F25"),Object(b.b)("span",null,"Tomato")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-tomato-dark"]},"#7D0600"),Object(b.b)("span",null,"Tomato Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-manhattan-light"],c.a["color-rhino-90"])},"#FFF2E6"),Object(b.b)("span",null,"Manhattan Light")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-manhattan"],c.a["color-rhino-60"])},"#F6C9A0"),Object(b.b)("span",null,"Manhattan")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-manhattan-dark"]},"#A56B36"),Object(b.b)("span",null,"Manhattan Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-goldenrod-light"],c.a["color-rhino-90"])},"#FFD179"),Object(b.b)("span",null,"Goldenrod Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-goldenrod"]},"#FBB227"),Object(b.b)("span",null,"Goldenrod")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-goldenrod-dark"]},"#A96F00"),Object(b.b)("span",null,"Goldenrod Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-lemon-light"],c.a["color-rhino-90"])},"#FFFDC8"),Object(b.b)("span",null,"Lemon Light")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-lemon"],c.a["color-rhino-60"])},"#E9E56F"),Object(b.b)("span",null,"Lemon")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-lemon-dark"]},"#A19D22"),Object(b.b)("span",null,"Lemon Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-emerald-light"],c.a["color-rhino-90"])},"#A0F1C6"),Object(b.b)("span",null,"Emerald Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-emerald"]},"#47D58A"),Object(b.b)("span",null,"Emerald")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-emerald-dark"]},"#009244"),Object(b.b)("span",null,"Emerald Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-aqua-light"],c.a["color-rhino-90"])},"#86ECEC"),Object(b.b)("span",null,"Aqua Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-aqua"]},"#30D2D5"),Object(b.b)("span",null,"Aqua")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-aqua-dark"]},"#00A0A0"),Object(b.b)("span",null,"Aqua Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-azure-light"],c.a["color-rhino-90"])},"#7893EA"),Object(b.b)("span",null,"Azure Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-azure"]},"#2C57DF"),Object(b.b)("span",null,"Azure")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-azure-dark"]},"#0A2C9D"),Object(b.b)("span",null,"Azure Dark")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-royal-light"],c.a["color-rhino-90"])},"#C9D4FB"),Object(b.b)("span",null,"Royal Light")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-royal"]},"#6F8CE9"),Object(b.b)("span",null,"Royal")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-royal-dark"]},"#4D6FDC"),Object(b.b)("span",null,"Royal Dark"))),Object(b.b)("h3",{id:"contrasting-colors"},"Contrasting colors"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"midnight should only be used for backgrounds"),Object(b.b)("li",{parentName:"ul"},"white color is a text color for labels. Default text color is Rhino 20")),Object(b.b)("div",{className:Object(r.a)(c.a.colors)},Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-midnight-dark"]},"#03060C"),Object(b.b)("span",null,"Midnight dark")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-midnight"]},"#121824"),Object(b.b)("span",null,"Midnight")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-midnight-light"]},"#3A414E"),Object(b.b)("span",null,"Midnight light")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-white"],c.a["color-rhino-100"])},"#FFFFFF"),Object(b.b)("span",null,"White"))),Object(b.b)("h3",{id:"shades-of-grey"},"Shades of Grey"),Object(b.b)("ul",null,Object(b.b)("li",{parentName:"ul"},"shades of Rhino color are used to differentiate between layouts and shapes")),Object(b.b)("div",{className:c.a.colors},Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-rhino-100"]},"#1D232D"),Object(b.b)("span",null,"Rhino-100")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-rhino-90"]},"#2F3744"),Object(b.b)("span",null,"Rhino-90")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-rhino-80"]},"#535E70"),Object(b.b)("span",null,"Rhino-80")),Object(b.b)("div",null,Object(b.b)("div",{className:c.a["bgr-rhino-60"]},"#7B8694"),Object(b.b)("span",null,"Rhino-60")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-rhino-40"],c.a["color-rhino-80"])},"#A6AEB8"),Object(b.b)("span",null,"Rhino-40")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-rhino-20"],c.a["color-rhino-80"])},"#D2D6DC"),Object(b.b)("span",null,"Rhino-20")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-rhino-10"],c.a["color-rhino-60"])},"#E8EAEC"),Object(b.b)("span",null,"Rhino-10")),Object(b.b)("div",null,Object(b.b)("div",{className:Object(r.a)(c.a["bgr-rhino-5"],c.a["color-rhino-60"])},"#F3F4F5"),Object(b.b)("span",null,"Rhino-5"))),Object(b.b)("h2",{id:"typography"},"Typography"),Object(b.b)("p",null,"Typography is crucial for the content. It must be simple, sleek and easy to read, as the content is intended mainly for education."),Object(b.b)("h3",{id:"serif-font"},"Serif font"),Object(b.b)("p",null,"Primary font is ",Object(b.b)("strong",{parentName:"p"},"Source Sans Pro"),". This font is used for written content, as well as some diagrams. Its light version slightly takes after OCR-B font, developed in 1968 for technical documentation."),Object(b.b)("img",{src:Object(i.a)("img/docs/brand/font_sourcesans.svg")}),Object(b.b)("h3",{id:"monospace-font"},"Monospace Font"),Object(b.b)("p",null,"Monospace font is ",Object(b.b)("strong",{parentName:"p"},"Inconsolata")," and should only be used in code snippets and inside diagrams, in cases where serif font seems to be inappropriate."),Object(b.b)("img",{src:Object(i.a)("img/docs/brand/font_inconsolata.svg")}),Object(b.b)("h3",{id:"ibm-vga-font"},"IBM VGA Font"),Object(b.b)("p",null,"PxPlus IBM VGA8 is an old bitmap font for IBM PC. Despite its very good readability, it's only intended for special cases, such as Commander Keen's tooltips and ancient code snippets where\nit can differentiate the content from other examples."),Object(b.b)("img",{src:Object(i.a)("img/docs/brand/font_ibm.svg")}),Object(b.b)("h2",{id:"diagrams"},"Diagrams"),Object(b.b)("p",null,"Diagrams combine UML components and sci-fi HUD elements. Preferred color is ",Object(b.b)("strong",{parentName:"p"},"emerald"),". Other colors should only be used to highlight respective parts."),Object(b.b)("img",{src:Object(i.a)("img/docs/brand/diagrams.svg")}),Object(b.b)("h2",{id:"code-snippets"},"Code Snippets"),Object(b.b)("p",null,"Source code is parsed by ",Object(b.b)("strong",{parentName:"p"},"prismJS"),". Primary colors are ",Object(b.b)("strong",{parentName:"p"},"emerald"),", ",Object(b.b)("strong",{parentName:"p"},"royal")," and ",Object(b.b)("strong",{parentName:"p"},"tomato light"),"."),Object(b.b)("pre",null,Object(b.b)("code",Object(n.a)({parentName:"pre"},{className:"language-javascript"}),"function createIterator(array) {\n    let currIdx = 0\n    return {\n        next() {\n            return currIdx < array.lenth ? {\n                value: array[currIdx++], done: false,\n            } : { done: true }\n        },\n    }\n}\n")),Object(b.b)("h2",{id:"slides"},"Slides"),Object(b.b)("p",null,"All slides are wrapped in a round frame of a grid-like pattern, suggesting architectonical graph paper.\nThe frame is semi-transparent and the background may display any picture that is relevant to the content."),Object(b.b)("img",{src:Object(i.a)("img/docs/brand/slides.jpg")}))}j.isMDXComponent=!0}}]);