{"id":4535,"date":"2023-12-23T09:36:34","date_gmt":"2023-12-23T08:36:34","guid":{"rendered":"https:\/\/rock-the-prototype.com\/uncategorized\/styleguide\/"},"modified":"2023-12-23T09:45:11","modified_gmt":"2023-12-23T08:45:11","slug":"styleguide","status":"publish","type":"encyclopedia","link":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/","title":{"rendered":"Styleguide"},"content":{"rendered":"<p><\/p><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhaltsverzeichnis<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ffffff;color:#ffffff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ffffff;color:#ffffff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#What_is_a_style_guide\" >What is a style guide?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#The_importance_of_style_guides_in_the_design_world\" >The importance of style guides in the design world<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Why_should_you_use_a_style_guide\" >Why should you use a style guide?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#History_of_the_style_guides\" >History of the style guides<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Style_guides_corporate_design_and_corporate_image\" >Style guides &amp; corporate design and corporate image<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Style_guides_define_the_image_of_an_organization\" >Style guides define the image of an organization<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Best_practice_for_style_guides\" >Best practice for style guides<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Central_access_for_all_developers\" >Central access for all developers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Visual_display_for_optimum_control\" >Visual display for optimum control<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#The_style_guide_defines_common_UI_conventions\" >The style guide defines common UI conventions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Position_information_for_defined_design_elements\" >Position information for defined design elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Specifications_for_the_button_design\" >Specifications for the button design<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Components_of_an_effective_style_guide\" >Components of an effective style guide<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Essential_elements_What_belongs_in_a_style_guide\" >Essential elements: What belongs in a style guide?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Colors_fonts_and_more_the_building_blocks_of_a_visual_guide\" >Colors, fonts and more: the building blocks of a visual guide<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#How_to_create_your_style_guide_%E2%80%93_step-by-step_instructions\" >How to create your style guide &#8211; step-by-step instructions<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Step_by_step_developing_your_own_style_guide\" >Step by step: developing your own style guide<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#Best_practices_for_creating_a_coherent_and_actionable_style_guide\" >Best practices for creating a coherent and actionable style guide<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_a_style_guide\"><\/span>What is a style guide?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A <strong>style guide<\/strong> is a <strong data-renderer-mark=\"true\">description of defined design principles<\/strong>.<\/p>\n<p><strong>Style guides<\/strong>, often referred to as a design system, brand manual or style manual, is a comprehensive set of rules that provides detailed guidelines for the design and consistency of a brand or product.<\/p>\n<p>It is a document or collection of documents that specifically define how elements such as logos, fonts, colors, imagery, tone of voice and even code should be implemented. The purpose of a style guide is to create a coherent and consistent brand or user experience, regardless of who is working on the product or project.<\/p>\n\n<p data-renderer-start-pos=\"1332\"><strong>Style guides<\/strong> can be defined for different design objectives. In any case, the style guide contains special specifications in the following <strong>style categories<\/strong>, for example:<\/p>\n<ul class=\"ak-ul\" data-indent-level=\"1\">\n<li>\n<p data-renderer-start-pos=\"1376\"><strong>Typography<\/strong> &ndash; specifications for fonts, font styles and sizes<\/p>\n<\/li>\n<li>\n<p data-renderer-start-pos=\"1446\"><strong>Colors<\/strong> &ndash; color palettes used<\/p>\n<\/li>\n<li>\n<p data-renderer-start-pos=\"1478\"><strong>Design grid<\/strong>, for example, a defined grid system<\/p>\n<\/li>\n<li>\n<p data-renderer-start-pos=\"1516\"><strong>Visual language<\/strong><\/p>\n<\/li>\n<li>\n<p data-renderer-start-pos=\"1516\"><strong>Icons<\/strong><\/p>\n<\/li>\n<\/ul>\n<div class=\"flex-1 overflow-hidden\">\n<div class=\"react-scroll-to-bottom--css-crqqx-79elbk h-full\">\n<div class=\"react-scroll-to-bottom--css-crqqx-1n7m0yu\">\n<div class=\"flex flex-col pb-9 text-sm\">\n<div class=\"w-full text-token-text-primary\" data-testid=\"conversation-turn-19\">\n<div class=\"px-4 py-2 justify-center text-base md:gap-6 m-auto\">\n<div class=\"flex flex-1 text-base mx-auto gap-3 md:px-5 lg:px-1 xl:px-5 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] group final-completion\">\n<div class=\"relative flex w-full flex-col lg:w-[calc(100%-115px)] agent-turn\">\n<div class=\"flex-col gap-1 md:gap-3\">\n<div class=\"flex flex-grow flex-col max-w-full\">\n<div class=\"min-h-[20px] text-message flex flex-col items-start gap-3 whitespace-pre-wrap break-words [.text-message+&amp;]:mt-5 overflow-x-auto\" data-message-author-role=\"assistant\" data-message-id=\"966c259b-16b8-493e-a34e-e71ec923b120\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<h2><span class=\"ez-toc-section\" id=\"The_importance_of_style_guides_in_the_design_world\"><\/span>The importance of style guides in the design world<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Style guides<\/strong> play a crucial role in the design and development landscape. Here are some reasons why they are so important:<\/p>\n<ol>\n<li><strong>Consistency<\/strong>: The most obvious advantage of a style guide is the consistency it brings. By giving clear instructions on how the brand and products should be presented, it helps to ensure a consistent identity and user experience. This is crucial for brand perception and user satisfaction.<\/li>\n<li><strong>Efficiency<\/strong>: Style guides rationalize the design and development process. Teams can work faster because they don&rsquo;t have to start from scratch with every project. They provide a clear template, which saves time and reduces misunderstandings.<\/li>\n<li><strong>Scalability<\/strong>: With a style guide, organizations can scale more easily. New team members or external agencies can use the documentation to quickly understand how to work in line with the brand. This facilitates the expansion of teams and projects.<\/li>\n<li><strong>Coherence across different media<\/strong>: A well-developed style guide takes into account all media and platforms on which the brand appears. From print materials to websites and mobile apps, it ensures that the brand appears coherent everywhere.<\/li>\n<li><strong>Maintaining the brand<\/strong>: A style guide helps to preserve the integrity of the brand over time. While people come and go, the style guide ensures that the brand continues to be presented as it was originally intended.<\/li>\n<li><strong>Decision support<\/strong>: When designing new components or revising existing elements, the style guide serves as a valuable resource for designers and developers to make informed decisions that are in line with the overall brand strategy.<\/li>\n<\/ol>\n<p>So style guides are far more than just a collection of rules; they are an essential tool for creating a strong, consistent brand and user experience. In today&rsquo;s fast-paced, design-driven world, developing and maintaining an effective style guide is essential to the success of any organization that values design, user experience and brand identity.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"mt-1 flex justify-start gap-3 empty:hidden\">\n<div class=\"text-gray-400 flex self-end lg:self-center justify-center lg:justify-start mt-0 gap-1 visible\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"w-full pt-2 md:pt-0 dark:border-white\/20 md:border-transparent md:dark:border-transparent md:w-[calc(100%-.5rem)]\">\n<form class=\"stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl\">\n<div class=\"relative flex h-full flex-1 items-stretch md:flex-col\">\n<div class=\"flex w-full items-center\"><\/div>\n<\/div>\n<\/form>\n<\/div>\n<\/div><div class=\"fusion-text fusion-text-2\"><h2 id=\"Warum-Styleguides?\" data-renderer-start-pos=\"719\"><span class=\"ez-toc-section\" id=\"Why_should_you_use_a_style_guide\"><\/span>Why should you use a style guide?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-renderer-start-pos=\"1332\">A style guide guarantees <strong>uniformity<\/strong> and a common thread <strong>in the design<\/strong>. Technically, style guides are based on libraries that make defined design specifications centrally controllable. Thus, the use of a style guide is also accompanied by a technical architectural specification, namely to use such design libraries with corresponding inheritance rules.<\/p>\n<h3 data-renderer-start-pos=\"1332\"><span class=\"ez-toc-section\" id=\"History_of_the_style_guides\"><\/span>History of the style guides<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-renderer-start-pos=\"1332\">Styleguides have been around longer than the web; they were and are used to define the look of printed materials such as brochures, catalogs, stationery, logos and packaging.<\/p>\n<h3 data-renderer-start-pos=\"1332\"><span class=\"ez-toc-section\" id=\"Style_guides_corporate_design_and_corporate_image\"><\/span>Style guides &amp; <strong>corporate design and corporate image<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-renderer-start-pos=\"1332\">The style guide is therefore closely linked to the <strong>corporate design (CD)<\/strong> or an even broader <strong data-renderer-mark=\"true\">corporate image<\/strong> <strong>(CI) <\/strong>. The corporate image not only specifies visual aspects, but also includes ethical aspects and defines the big picture, i.e. how an organization should present itself to the outside world and what image the organization wants to convey to the public.<\/p>\n<h2 data-renderer-start-pos=\"1332\"><span class=\"ez-toc-section\" id=\"Style_guides_define_the_image_of_an_organization\"><\/span>Style guides define the image of an organization<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p data-renderer-start-pos=\"1538\">In general terms, this guideline defines what the <strong data-renderer-mark=\"true\">image of the company<\/strong> or product looks like. This achieves a consistent design and ensures recognition. This is at the heart of marketing efforts and also benefits users, as this consistency makes it easier for them to find their way around.<\/p>\n<h2 data-renderer-start-pos=\"1538\"><span class=\"ez-toc-section\" id=\"Best_practice_for_style_guides\"><\/span>Best practice for style guides<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For a successful design implementation, it is advisable to also implement a design guide as a website with a Git repository behind it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Central_access_for_all_developers\"><\/span>Central access for all developers<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This ensures centralized access for all developers and even newcomers and third parties can easily access the design definitions.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Visual_display_for_optimum_control\"><\/span>Visual display for optimum control<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>At the same time, such an implementation also realizes the visual presentation and offers everyone involved a constant comparison between the design definition and the implementation. A voting function for new design features enables democratic procedures to continuously improve the design.<\/p>\n<h3 data-renderer-start-pos=\"1538\"><span class=\"ez-toc-section\" id=\"The_style_guide_defines_common_UI_conventions\"><\/span><strong data-renderer-mark=\"true\">The style guide defines common UI conventions<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-renderer-start-pos=\"1875\">It is always important to adhere to the <strong data-renderer-mark=\"true\">standard UI conventions<\/strong> for buttons, checkboxes, etc.<\/p>\n<h3 data-renderer-start-pos=\"1875\"><span class=\"ez-toc-section\" id=\"Position_information_for_defined_design_elements\"><\/span>Position information for defined design elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-renderer-start-pos=\"1875\">This also includes position information for defined elements. For example, the logo on websites in the desktop version should always appear at the top left next to the navigation menu.<\/p>\n<h3 data-renderer-start-pos=\"1875\"><span class=\"ez-toc-section\" id=\"Specifications_for_the_button_design\"><\/span>Specifications for the button design<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-renderer-start-pos=\"1875\">Button design should also be defined so that buttons are clearly recognizable as such and have a uniform design. A design specification also applies to links, for example a link display is always in the <a href=\"https:\/\/de.wikipedia.org\/wiki\/Webfarbe\">web color<\/a> #5F9EA0 with the CSS3 color name CadetBlue.<\/p>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Podcast Software Development - Idea generation and creativity in software development\" href=\"#\"><iframe class=\"lazyload\" style=\"border-radius: 12px;\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27100%27%20height%3D%27352%27%20viewBox%3D%270%200%20100%20352%27%3E%3Crect%20width%3D%27100%27%20height%3D%27352%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/open.spotify.com\/embed\/episode\/54PtfzZlt3gTfrxDcx4wrC?utm_source=generator\" width=\"100%\" height=\"352\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-3\"><h2><span class=\"ez-toc-section\" id=\"Components_of_an_effective_style_guide\"><\/span>Components of an effective style guide<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The components of an effective style guide work together to create a consistent and engaging brand and user experience.<\/p>\n<p>By working out these elements in detail and communicating them clearly, you and your team can work consistently across different projects and platforms.<\/p>\n<p>This not only strengthens the brand identity, but also improves the efficiency and quality of design and development work.<\/p>\n<p>A well-thought-out style guide is therefore an indispensable tool for any company that takes its visual and communicative consistency seriously.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Essential_elements_What_belongs_in_a_style_guide\"><\/span>Essential elements: What belongs in a style guide?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>An effective style guide covers a variety of components that together provide a comprehensive picture of how a brand or product should be presented. Here are the essential elements that should be included in any well-developed style guide:<\/p>\n<ol>\n<li><strong>Brand identity<\/strong>: A clear definition of the brand, its values, personality and mission statement. This can include the history of the brand, its core message and its target group.<\/li>\n<li><strong>Logo application<\/strong>: guidelines for logo use, including size, placement, what to do and what to avoid, and variations for different contexts and backgrounds.<\/li>\n<li><strong>Color palette<\/strong>: A specified palette containing the brand&rsquo;s primary and secondary colors, with exact color codes for different media (e.g. CMYK for print, RGB and hex codes for digital media).<\/li>\n<li><strong>Typography<\/strong>: Guidelines for fonts, including font families, weight, size and application. This should include instructions on the hierarchy and layout of texts.<\/li>\n<li><strong>Visual language<\/strong>: Instructions on the use of images and graphics, including style, tone and suggested sources. This can include photo styles, illustration guidelines and the use of icons.<\/li>\n<li><strong>Tone and voice<\/strong>: A description of the writing style and tone that should be used in all communications. This often includes guidelines on language, humor, formality and address.<\/li>\n<li><strong>Layout and grid systems<\/strong>: Instructions for laying out pages and content, including grids, spacing, alignments, and other structural elements.<\/li>\n<li><strong>User interface elements<\/strong>: Specifications for design elements such as buttons, forms, tabs and other interactive elements. This should include states such as <a href=\"https:\/\/rock-the-prototype.com\/en\/learn-programming\/idle\/\" target=\"_blank\" title=\"In information technology (IT), idle refers to the state of being idle. The computer scientist speaks of an idle process when this process is idle, i.e. inactive and therefore unused.\" class=\"encyclopedia\">idle<\/a>, hover, click and disabled.<\/li>\n<li><strong>Application examples<\/strong>: Specific examples of how the elements of the style guide should be applied in different media and projects, including examples of do&rsquo;s and don&rsquo;ts.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Colors_fonts_and_more_the_building_blocks_of_a_visual_guide\"><\/span>Colors, fonts and more: the building blocks of a visual guide<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Colors<\/strong>:\n<ul>\n<li><strong>Primary colors<\/strong>: The main colors that represent the brand and are used in all key elements.<\/li>\n<li><strong>Secondary colors<\/strong>: Complementary colors to support the primary colors and expand the palette for various purposes.<\/li>\n<li><strong>Color system<\/strong>: Instructions for using the colors in different contexts and combinations.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Fonts<\/strong>:\n<ul>\n<li><strong>Primary fonts<\/strong>: The main typography used for headlines and important text.<\/li>\n<li><strong>Secondary fonts<\/strong>: Additional fonts for body text and other information.<\/li>\n<li><strong>Application<\/strong>: Rules for size, weighting, spacing, hierarchy and coloring.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Visual language<\/strong>:\n<ul>\n<li><strong>Style guidelines<\/strong>: Whether the pictures should be realistic, illustrated or abstract.<\/li>\n<li><strong>Composition<\/strong>: Guide to image composition and alignment.<\/li>\n<li><strong>Quality<\/strong>: Standards for image resolution, quality and style.<\/li>\n<\/ul>\n<\/li>\n<li><strong>User interface elements<\/strong>:\n<ul>\n<li><strong>Buttons<\/strong>: style, color, shape and typography for different button states.<\/li>\n<li><strong>Form elements<\/strong>: Appearance for text fields, selection menus, buttons and other form elements.<\/li>\n<li><strong>Icons<\/strong>: Style and usage guidelines for icons within the application or website.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3><\/h3>\n<\/div><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Podcast Episode 1 - Idea generation and creativity in software development - Rock the Prototype - Software Development\" href=\"#\"><iframe style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/episode-1-idea-generation-and-creativity-in-software\/id1684835330?i=1000611051749\" height=\"175\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation\"><\/iframe><\/a>\n<div class=\"fusion-text fusion-text-4\"><div id=\"attachment_4532\" style=\"width: 1802px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-4532\" class=\"size-full wp-image-4531\" src=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln.jpg\" alt=\"Develop style guides for print - web and all digital formats\" width=\"1792\" height=\"1024\" srcset=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-200x114.jpg 200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-300x171.jpg 300w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-400x229.jpg 400w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-600x343.jpg 600w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-768x439.jpg 768w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-800x457.jpg 800w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-1024x585.jpg 1024w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-1200x686.jpg 1200w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln-1536x878.jpg 1536w, https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguides-fuer-Print-Web-und-alle-Digitalen-Formate-entwickeln.jpg 1792w\" sizes=\"(max-width: 1792px) 100vw, 1792px\"><p id=\"caption-attachment-4532\" class=\"wp-caption-text\">Develop style guides for print &ndash; web and all digital formats<\/p><\/div>\n<h2>How to create your style guide &ndash; step-by-step instructions<\/h2>\n<p>So that you can put our recommendations for your style guide directly into practice, we provide you with the perfect <strong>step-by-step guide to developing your style guide<\/strong>:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_by_step_developing_your_own_style_guide\"><\/span>Step by step: developing your own style guide<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Understand the brand identity<\/strong>: Before you start, you need to develop a deep understanding of the brand &ndash; what it represents, its values, goals and target audience. This will be the basis for all the decisions you make.<\/li>\n<li><strong>Defining goals and scope<\/strong>: Determine what you want to achieve with the style guide and which media or products it should cover. Should he concentrate on digital, print media or both?<\/li>\n<li><strong>Gather inspiration and best practices<\/strong>: Look at other style guides, especially those that are generally considered successful and effective. Make a note of what you like and what could be relevant for your brand.<\/li>\n<li><strong>Development of the basic elements<\/strong>:\n<ul>\n<li><strong>Logo<\/strong>: Define how and where the logo should be used, including spacing, size and what should be avoided.<\/li>\n<li><strong>Color palette<\/strong>: Select primary and secondary colors and make sure you specify the exact color codes.<\/li>\n<li><strong>Typography<\/strong>: Choose fonts and define how they should be used (e.g. font sizes, hierarchy).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Extension to additional elements<\/strong>:\n<ul>\n<li><strong>Visual language<\/strong>: Establish guidelines for the use of photos, illustrations and icons.<\/li>\n<li><strong>User interface elements<\/strong>: Define the appearance of buttons, forms, menus, etc.<\/li>\n<li><strong>Editorial Style<\/strong>: Create guidelines for the tone, style and voice of the brand in written communications.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Create sample templates<\/strong>: Develop templates for common design tasks, such as website layouts, business cards, presentations, which can serve as a starting point.<\/li>\n<li><strong>Documentation and organization<\/strong>: Collect all guidelines in a central, easily accessible document. Make sure the guide is well organized and easy to navigate.<\/li>\n<li><strong>Review and feedback<\/strong>: Before finalizing the style guide, you should gather feedback from various stakeholders to ensure that it is feasible, understandable and effective.<\/li>\n<li><strong>Launch and training<\/strong>: When the style guide is ready, present it to the team and provide training to make sure everyone understands how to use it.<\/li>\n<li><strong>Monitoring and updating<\/strong>: A style guide should be a living document. Monitor its use and be ready to update it if brand strategy, goals or other factors change.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Best_practices_for_creating_a_coherent_and_actionable_style_guide\"><\/span>Best practices for creating a coherent and actionable style guide<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><strong>Be specific<\/strong>: vagueness can lead to inconsistencies. Provide clear, detailed guidelines.<\/li>\n<li><strong>Stay flexible<\/strong>: While a style guide sets out rules, it should also leave room for creativity and adaptation to different contexts.<\/li>\n<li><strong>Promote accessibility<\/strong>: Make sure your designs and guidelines are accessible, especially in terms of color contrasts, typography and navigation.<\/li>\n<li><strong>Use examples<\/strong>: Show examples of correctly and incorrectly applied guidelines. This helps understanding and correct application.<\/li>\n<li><strong>Involve the team<\/strong>: The style guide is used by different people. Their insights can be valuable in ensuring the guide is practical and relevant.<\/li>\n<li><strong>Keep it up to date<\/strong>: the world and the brand will continue to evolve. Review and update the style guide regularly to ensure it remains relevant and effective.<\/li>\n<li><strong>Make it easily accessible<\/strong>: A style guide is useless if nobody knows where it is or how to use it. Make sure it is easy to find and navigate.<\/li>\n<\/ol>\n<p>By following these steps and best practices, you can create a comprehensive, cohesive and actionable style guide that serves as an indispensable tool for branding consistency and quality.<\/p>\n<\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-2 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\"><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1144px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><a class=\"fusion-modal-text-link\" data-toggle=\"modal\" data-target=\".fusion-modal.Rock the Prototype - Software development &amp; Prototyping Podcast iTunes\" href=\"#\"><iframe id=\"embedPlayer\" style=\"width: 100%; max-width: 660px; overflow: hidden; border-radius: 10px; transform: translateZ(0px); animation: 2s ease 0s 6 normal none running loading-indicator; background-color: #e4e4e4;\" src=\"https:\/\/embed.podcasts.apple.com\/us\/podcast\/rock-the-prototype-software-development-prototyping\/id1684835330?itsct=podcast_box_player&amp;itscg=30200&amp;ls=1&amp;theme=auto\" height=\"450px\" frameborder=\"0\" sandbox=\"allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation\"><\/iframe><\/a><\/div><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>A style guide is a description of defined design principles. Style guides can be defined for different design objectives. Everything you need to know about style guides&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4534,"template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[1369,1258,1167,1166],"tags":[2146,2140,2141,2139,2142,2143,1144,2144,1142,1146,2149,2138,2137,2136,2150,1259,1741,2151,2145],"class_list":["post-4535","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","category-design-en","category-learn-programming","category-programming-languages-frameworks","category-software-architecture","tag-app-design-en","tag-cd-en","tag-ci-en","tag-corporate-design-en","tag-corporate-image-en","tag-design-grid","tag-design-pattern-en","tag-design-principles","tag-programming","tag-software-design-en","tag-style-categories","tag-style-guide-en","tag-style-guides-en","tag-styleguide-en","tag-ui-conventions","tag-usability-en","tag-user-experience-en","tag-ux-conventions","tag-web-design-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Styleguide - Indispensable tool for designing consistent UX<\/title>\n<meta name=\"description\" content=\"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styleguide - Indispensable tool for designing consistent UX\" \/>\n<meta property=\"og:description\" content=\"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/\" \/>\n<meta property=\"og:site_name\" content=\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-23T08:45:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/\",\"name\":\"Styleguide - Indispensable tool for designing consistent UX\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg\",\"datePublished\":\"2023-12-23T08:36:34+00:00\",\"dateModified\":\"2023-12-23T08:45:11+00:00\",\"description\":\"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg\",\"contentUrl\":\"https:\\\/\\\/rock-the-prototype.com\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg\",\"width\":1792,\"height\":1024,\"caption\":\"Styleguide f\u00fcr Digitale Medien und digitale Formate\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/design-en\\\/styleguide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/rock-the-prototype\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Prototyping Wiki\",\"item\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/wiki\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Styleguide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/\",\"name\":\"Rock the Prototype - Softwareentwicklung &amp; Prototyping\",\"description\":\"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rock-the-prototype.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styleguide - Indispensable tool for designing consistent UX","description":"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/","og_locale":"en_US","og_type":"article","og_title":"Styleguide - Indispensable tool for designing consistent UX","og_description":"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...","og_url":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/","og_site_name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","article_modified_time":"2023-12-23T08:45:11+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/","url":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/","name":"Styleguide - Indispensable tool for designing consistent UX","isPartOf":{"@id":"https:\/\/rock-the-prototype.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#primaryimage"},"image":{"@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#primaryimage"},"thumbnailUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg","datePublished":"2023-12-23T08:36:34+00:00","dateModified":"2023-12-23T08:45:11+00:00","description":"What is a style guide? \u2705 Why use a style guide? \u2705 Best practice for style guides \u2705 Find out more about the style guide now...","breadcrumb":{"@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#primaryimage","url":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg","contentUrl":"https:\/\/rock-the-prototype.com\/wp-content\/uploads\/2021\/12\/Styleguide-fuer-Digitale-Medien-und-Formate.jpg","width":1792,"height":1024,"caption":"Styleguide f\u00fcr Digitale Medien und digitale Formate"},{"@type":"BreadcrumbList","@id":"https:\/\/rock-the-prototype.com\/en\/design-en\/styleguide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/rock-the-prototype.com\/en\/rock-the-prototype\/"},{"@type":"ListItem","position":2,"name":"Prototyping Wiki","item":"https:\/\/rock-the-prototype.com\/en\/wiki\/"},{"@type":"ListItem","position":3,"name":"Styleguide"}]},{"@type":"WebSite","@id":"https:\/\/rock-the-prototype.com\/en\/#website","url":"https:\/\/rock-the-prototype.com\/en\/","name":"Rock the Prototype - Softwareentwicklung &amp; Prototyping","description":"Prototyping: Software Prototypen, Software entwickeln &amp; Programmieren im Team","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rock-the-prototype.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia\/4535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media\/4534"}],"wp:attachment":[{"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/media?parent=4535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/categories?post=4535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rock-the-prototype.com\/en\/wp-json\/wp\/v2\/tags?post=4535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}