{"id":54,"date":"2022-07-08T17:16:12","date_gmt":"2022-07-08T15:16:12","guid":{"rendered":"https:\/\/digital.hfh.ch\/styleguide\/?post_type=chapter&#038;p=54"},"modified":"2026-03-26T14:32:13","modified_gmt":"2026-03-26T13:32:13","slug":"grundlagen","status":"publish","type":"chapter","link":"https:\/\/digital.hfh.ch\/styleguide\/chapter\/grundlagen\/","title":{"raw":"Grundlagen","rendered":"Grundlagen"},"content":{"raw":"Minimale gestalterische Grundlagen, die so weit wie m\u00f6glich eingehalten werden sollen:\r\n<h2>Schrift<\/h2>\r\n<strong>Desktop<\/strong>\r\n<iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=fonts--desktop&amp;viewMode=story\" width=\"100%\"><\/iframe>\r\n\r\n<strong>Mobile<\/strong>\r\n<iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=fonts--mobile&amp;viewMode=story\" width=\"100%\"><\/iframe>\r\n<div class=\"textbox textbox--exercises\">\r\n<div class=\"textbox__content\">\r\n\r\nSollte es aufgrund technischer Restriktionen nicht mo\u0308glich sein, die oben erwa\u0308hnten Schriften in Ihrem Projekt einzubinden, verwenden Sie stattdessen eine serifenlose Alternative:\r\n\r\n<strong>Helvetica, Arial, Sans-Serif <\/strong>\r\n\r\n<\/div>\r\n<\/div>\r\n&nbsp;\r\n<h2><a id=\"farben\"><\/a>Web-Farben<\/h2>\r\n<iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=colors--colors&amp;viewMode=story\" width=\"100%\"><\/iframe>\r\n\r\nNicht alle HfH-Farben weisen einen ausreichend hohen Kontrast auf, um vor schwarzem und weissem Hintergrund als Schriftfarbe genutzt zu werden. Das Buch <a href=\"https:\/\/digital.hfh.ch\/eaccessibility\">E-Accessibility an der HfH<\/a> liefert hierzu genauere Informationen, inklusive aller <a href=\"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/kontraste-der-hfh-farben\/\">Kontraste der HfH-Farben<\/a> vor weissem respektive schwarzem Hintergrund.\r\n<h3>Helle Farben f\u00fcr Boxen<\/h3>\r\n<ul>\r\n \t<li>f\u00fcr Green \u279c hellgr\u00fcn: #eef5e0<\/li>\r\n \t<li>f\u00fcr Turquoise \u279c hellt\u00fcrkis: #ecf9f7<\/li>\r\n \t<li>f\u00fcr Blue \u279c hellblau: #dbeffd mit dunklerem ! Dunkelblau: #3a6f92 statt #427ca4<\/li>\r\n \t<li>f\u00fcr Thunderbird Red \u279c hellrot: #f8e8e9 (Fantasy Pastel)<\/li>\r\n \t<li>?? f\u00fcr Orange\/Braun \u279c hellorange\/braun: #FFF0DB<\/li>\r\n \t<li>NEU\/DRAFT: #ff8800 f\u00fcr Maskottchen\r\n<img class=\"alignnone wp-image-205\" src=\"https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x.png\" alt=\"\" width=\"188\" height=\"273\" \/><\/li>\r\n<\/ul>\r\n<h2>Logo<\/h2>\r\nFolgende Logo-Varianten werden verwendet:\r\n<h3>Logo Header<\/h3>\r\n<iframe src=\"https:\/\/695fade63a66e8793cc84820-giauilnpcr.chromatic.com\/iframe.html?args=&globals=&id=hfh-components-logo--header&viewMode=story\" width=\"100%\" height=\"90px\"><\/iframe>\r\n<h3>Logo Footer<\/h3>\r\n<iframe src=\"https:\/\/695fade63a66e8793cc84820-giauilnpcr.chromatic.com\/iframe.html?args=&globals=&id=hfh-components-logo--footer&viewMode=story\" width=\"100%\" height=\"90px\"><\/iframe>","rendered":"<p>Minimale gestalterische Grundlagen, die so weit wie m\u00f6glich eingehalten werden sollen:<\/p>\n<h2>Schrift<\/h2>\n<p><strong>Desktop<\/strong><br \/>\n<iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=fonts--desktop&amp;viewMode=story\" width=\"100%\"><\/iframe><\/p>\n<p><strong>Mobile<\/strong><br \/>\n<iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=fonts--mobile&amp;viewMode=story\" width=\"100%\"><\/iframe><\/p>\n<div class=\"textbox textbox--exercises\">\n<div class=\"textbox__content\">\n<p>Sollte es aufgrund technischer Restriktionen nicht mo\u0308glich sein, die oben erwa\u0308hnten Schriften in Ihrem Projekt einzubinden, verwenden Sie stattdessen eine serifenlose Alternative:<\/p>\n<p><strong>Helvetica, Arial, Sans-Serif <\/strong><\/p>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2><a id=\"farben\"><\/a>Web-Farben<\/h2>\n<p><iframe src=\"https:\/\/hfh-styleguide.netlify.app\/iframe.html?args=&amp;id=colors--colors&amp;viewMode=story\" width=\"100%\"><\/iframe><\/p>\n<p>Nicht alle HfH-Farben weisen einen ausreichend hohen Kontrast auf, um vor schwarzem und weissem Hintergrund als Schriftfarbe genutzt zu werden. Das Buch <a href=\"https:\/\/digital.hfh.ch\/eaccessibility\">E-Accessibility an der HfH<\/a> liefert hierzu genauere Informationen, inklusive aller <a href=\"https:\/\/digital.hfh.ch\/eaccessibility\/chapter\/kontraste-der-hfh-farben\/\">Kontraste der HfH-Farben<\/a> vor weissem respektive schwarzem Hintergrund.<\/p>\n<h3>Helle Farben f\u00fcr Boxen<\/h3>\n<ul>\n<li>f\u00fcr Green \u279c hellgr\u00fcn: #eef5e0<\/li>\n<li>f\u00fcr Turquoise \u279c hellt\u00fcrkis: #ecf9f7<\/li>\n<li>f\u00fcr Blue \u279c hellblau: #dbeffd mit dunklerem ! Dunkelblau: #3a6f92 statt #427ca4<\/li>\n<li>f\u00fcr Thunderbird Red \u279c hellrot: #f8e8e9 (Fantasy Pastel)<\/li>\n<li>?? f\u00fcr Orange\/Braun \u279c hellorange\/braun: #FFF0DB<\/li>\n<li>NEU\/DRAFT: #ff8800 f\u00fcr Maskottchen<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-205\" src=\"https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x.png\" alt=\"\" width=\"188\" height=\"273\" srcset=\"https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x.png 594w, https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x-206x300.png 206w, https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x-65x95.png 65w, https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x-225x327.png 225w, https:\/\/digital.hfh.ch\/styleguide\/wp-content\/uploads\/sites\/54\/2022\/07\/CleanShot-2023-11-28-at-14.11.05@2x-350x509.png 350w\" sizes=\"auto, (max-width: 188px) 100vw, 188px\" \/><\/li>\n<\/ul>\n<h2>Logo<\/h2>\n<p>Folgende Logo-Varianten werden verwendet:<\/p>\n<h3>Logo Header<\/h3>\n<p><iframe loading=\"lazy\" src=\"https:\/\/695fade63a66e8793cc84820-giauilnpcr.chromatic.com\/iframe.html?args=&#38;globals=&#38;id=hfh-components-logo--header&#38;viewMode=story\" width=\"100%\" height=\"90px\"><\/iframe><\/p>\n<h3>Logo Footer<\/h3>\n<p><iframe loading=\"lazy\" src=\"https:\/\/695fade63a66e8793cc84820-giauilnpcr.chromatic.com\/iframe.html?args=&#38;globals=&#38;id=hfh-components-logo--footer&#38;viewMode=story\" width=\"100%\" height=\"90px\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Minimale gestalterische Grundlagen, die so weit wie m\u00f6glich eingehalten werden sollen: Schrift Desktop Mobile Sollte es aufgrund technischer Restriktionen nicht mo\u0308glich sein, die oben erwa\u0308hnten Schriften in Ihrem Projekt einzubinden, verwenden Sie stattdessen eine serifenlose Alternative: Helvetica, Arial, Sans-Serif &nbsp; Web-Farben Nicht alle HfH-Farben weisen einen ausreichend hohen Kontrast auf, um vor schwarzem und weissem [&hellip;]<\/p>\n","protected":false},"author":1,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"categories":[],"chapter-type":[],"contributor":[],"license":[],"class_list":["post-54","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapters\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":25,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapters\/54\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapters\/54\/revisions\/313"}],"part":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapters\/54\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/pressbooks\/v2\/chapter-type?post=54"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/contributor?post=54"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/digital.hfh.ch\/styleguide\/wp-json\/wp\/v2\/license?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}