{"id":107,"date":"2020-09-01T05:11:50","date_gmt":"2020-09-01T05:11:50","guid":{"rendered":"https:\/\/www.sagaratechnology.com\/blog\/?p=107"},"modified":"2023-03-27T07:40:07","modified_gmt":"2023-03-27T07:40:07","slug":"how-to-create-design-system-for-user-interface","status":"publish","type":"post","link":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/","title":{"rendered":"How to Create Design System for User Interface?"},"content":{"rendered":"\n<p>A <strong>design system <\/strong>is a collection of elements that can be combined and reused to build products. A design system is about <strong>communication<\/strong>. A well-crafted design system establishes a common shared <strong>language <\/strong>among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is to create both a single source of truth that can be referred to during product design and an effective shared language that all team members can use when working on a product.<\/p>\n\n\n\n<p>A <strong>UI design system <\/strong>is a set of standards for <strong>design <\/strong>and <strong>code <\/strong>along with components that complement each other and producing the <strong>conceptualized <\/strong>result. A UI system helps your users <strong>navigate intuitively<\/strong>, making them familiar with your <strong>design language<\/strong>.<\/p>\n\n\n\n<p>Read more : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/blog\/2019\/11\/05\/the-creative-process-of-user-interface-design\/\" target=\"_blank\">The Creative Process of User Interface Design<\/a><\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e2e2f7efcc0\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" 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: #999;color:#999\" 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><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e2e2f7efcc0\"  aria-label=\"Toggle\" \/><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:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Why_do_we_need_a_UI_System\" >Why do we need a UI System?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Creating_a_UI_Design_System\" >Creating a UI Design System<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Moodboards_Colour_Palette\" >Moodboards &amp; Colour Palette<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Border_Radius_and_shadows\" >Border Radius and shadows<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Type_scale\" >Type scale<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Buttons_Sliders_Progress_Bars\" >Buttons, Sliders &amp; Progress Bars<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#Dropdowns_Tags_and_Popups_Complex_elements\" >Dropdowns, Tags and Popups (Complex elements)<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Why_do_we_need_a_UI_System\"><\/span><strong>Why do we need a UI System?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>To design <strong>consistent <\/strong>UI across every part of your design can be daunting. A UI system helps your users <strong>navigate intuitively <\/strong>and makes it uniform across your product, making them familiar with your <strong>design language.<\/strong>They help teams by giving them a more structured and guided way to build UI for their products.<\/p>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"Creating_a_UI_Design_System\"><\/span><strong>Creating a UI Design System<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The best way to start is by building an inventory of all the different <strong>patterns, colours, text styles and assets <\/strong>which you will use in your design. It should be a clear inventory which shows all the <strong>components and features <\/strong>needed to build a product (Website or Application).<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Moodboards_Colour_Palette\"><\/span><strong>Moodboards &amp; Colour Palette<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"386\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/Moodboards-Colour-PaletteImage.png\" alt=\"\" class=\"wp-image-117\"\/><\/figure>\n\n\n\n<p>Let\u2019s start by creating a <strong>mood board <\/strong>and colour palette, this way you set the <strong>theme <\/strong>of your design and have quite a good picture on what your design would look like. Your mood board could be pictures of trending UI, inspirational products or images which you are inspired from. This mood board also helps you select your <strong>colour palette<\/strong>, remember your colour selection is also based on your research. List down your <strong>Primary<\/strong>, <strong>Secondary <\/strong>&amp; <strong>Tertiary colours <\/strong>and <strong>Greyscale<\/strong>. Greyscales are used for various elements in your UI Design system. Most UIs will need at least the following grey colours:<\/p>\n\n\n\n<ul>\n<li>A very light grey for backgrounds<\/li>\n\n\n\n<li>A slightly darker grey for borders, lines, strokes or dividers.<\/li>\n\n\n\n<li>A medium grey for subheadings and supporting body copy.<\/li>\n\n\n\n<li>A dark grey for main headings, body copy and backgrounds Ideally, you\u2019d want to keep tints and tones of your primary colours they may come in handy.<\/li>\n<\/ul>\n\n\n\n<p>As a final touch, we may want to add tint or tone variations for each of your colours. These can be useful when it comes to designing components for adding light backgrounds or dark strokes.<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Border_Radius_and_shadows\"><\/span><strong>Border Radius and shadows<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"254\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/Border-Radius-and-shadowsImage.png\" alt=\"\" class=\"wp-image-118\"\/><\/figure>\n\n\n\n<p>Following up colour, let\u2019s start setting up the <strong>border-radius <\/strong>and <strong>shadows <\/strong>for your UI. Border radius sets the tone for your UI Cards, Tables and changes the overall look and feel of your UI.<\/p>\n\n\n\n<p>Shadows are mostly used to apply depth and perspective into our design. Lately, shadows have been trending and they are used to distinguish between multiple elements in your UI. These four shadows should be enough to style every component in our system:<\/p>\n\n\n\n<ul>\n<li>A subtle shadow to raise interactive components and add affordance.<\/li>\n\n\n\n<li>A more pronounced shadow for a hover effect on components.<\/li>\n\n\n\n<li>A strong shadow to give perspective to dropdowns\/popovers and other similar components.<\/li>\n\n\n\n<li>A distant shadow for modal components.<\/li>\n<\/ul>\n\n\n\n<p>Read more : <a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/blog\/2019\/10\/31\/why-digital-product-stage-development-matter\/\" target=\"_blank\">Why Digital Product Stage Development Matter?<\/a><\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Type_scale\"><\/span><strong>Type scale<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"1132\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/Type-scaleImage.png\" alt=\"\" class=\"wp-image-120\"\/><\/figure>\n\n\n\n<p>There\u2019s no UI without Type hierarchy. Type follows a rhythm. You need fonts to complement each other as well as a good scale for different tags. All you need to do is select a type scale and it lists down different sizes which could be used. For websites, I would recommend the Major Third Type Scale.Here\u2019s what all type of font-scales you may need.<\/p>\n\n\n\n<ul>\n<li>Default (1em) for standard text that will appear in many places throughout our marketing site, UI etc. 16px is the default browser font size so let\u2019s run with that.<\/li>\n\n\n\n<li>A slightly larger size for large body copy in a blog for example.<\/li>\n\n\n\n<li>A couple of larger sizes for headings and subheadings.<\/li>\n\n\n\n<li>Very large size for section titles.<\/li>\n\n\n\n<li>A ridiculously large size maybe for prices on a pricing page for example.<\/li>\n\n\n\n<li>We will also need some smaller sizes for smaller body copy, input hints and other secondary text.<\/li>\n<\/ul>\n\n\n\n<p><strong>Icons<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"350\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/IconsImage.png\" alt=\"\" class=\"wp-image-121\"\/><\/figure>\n\n\n\n<p>Make your Icons <strong>uniform<\/strong>. For starters, you could just use Icon set packs which are free to use so you don\u2019t spend much time on making icons yourself, but always make sure it\u2019s uniform.<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Buttons_Sliders_Progress_Bars\"><\/span><strong>Buttons, Sliders &amp; Progress Bars<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"379\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/Buttons-Sliders-Progress-BarsImage.png\" alt=\"\" class=\"wp-image-122\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Buttons are going to be really vital elements of your UI Design. <strong>Buttons <\/strong>allow users to take actions, and <strong>make <\/strong>choices, with a single tap. <strong>Buttons <\/strong>communicate actions and hence should be designed according to their work functions. They <strong>should <\/strong>be easily findable and identifiable while clearly indicating the action they allow a user to complete. There are various types of buttons. Showing the status of buttons is also an important part of your UI.<\/p>\n\n\n\n<ul>\n<li>Buttons<\/li>\n\n\n\n<li>Radio Buttons<\/li>\n\n\n\n<li>Checkboxes<\/li>\n\n\n\n<li>Navigation Buttons<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"700\" height=\"670\" src=\"https:\/\/www.sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/slidersImage.png\" alt=\"\" class=\"wp-image-123\"\/><\/figure>\n\n\n\n<p>Sliders, Progress Circles help you define these small elements to make your UI look even more uniform. Breaking them down will also help you design other elements better.<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"Dropdowns_Tags_and_Popups_Complex_elements\"><\/span><strong>Dropdowns, Tags and Popups (Complex elements)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Now that we\u2019ve set a basic guideline, you could all these other elements to build dropdowns, Tags and Popups<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/en\" target=\"_blank\">Sagara Technology<\/a> can help you develop beautiful and functional interfaces for desktop and mobile applications. At <a rel=\"noreferrer noopener\" href=\"https:\/\/www.sagaratechnology.com\/en\" target=\"_blank\">Sagara Technology<\/a> we develop attractive, engaging, usable interface design that focuses on solving usability problems and producing outstanding results.<\/p>\n\n\n\n<p>Read also <a href=\"https:\/\/sagaratechnology.com\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sagara&#8217;s article here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A design system is a collection of elements that can be combined and reused to build products. A design system is about communication. A well-crafted design system establishes a common shared language among team members, and this language allows the team to collaborate more effectively. Thus, the ultimate goal in creating a design system is&#8230;<\/p>\n","protected":false},"author":14,"featured_media":113,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[28,30,31,29],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create Design System for User Interface? -<\/title>\n<meta name=\"description\" content=\"A design system is a collection of elements that can be combined and reused to build products. A design system is about communication.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Create Design System for User Interface? -\" \/>\n<meta name=\"twitter:description\" content=\"A design system is a collection of elements that can be combined and reused to build products. A design system is about communication.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/How-to-Create-Design-System-for-User-InterfaceHeader.gif\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sagara Technology\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Design System for User Interface? -","description":"A design system is a collection of elements that can be combined and reused to build products. A design system is about communication.","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:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/","twitter_card":"summary_large_image","twitter_title":"How to Create Design System for User Interface? -","twitter_description":"A design system is a collection of elements that can be combined and reused to build products. A design system is about communication.","twitter_image":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2020\/09\/How-to-Create-Design-System-for-User-InterfaceHeader.gif","twitter_misc":{"Written by":"Sagara Technology","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#article","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/"},"author":{"name":"Sagara Technology","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723"},"headline":"How to Create Design System for User Interface?","datePublished":"2020-09-01T05:11:50+00:00","dateModified":"2023-03-27T07:40:07+00:00","mainEntityOfPage":{"@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/"},"wordCount":953,"commentCount":0,"publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"keywords":["Design","Design System","UI","UI Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/","url":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/","name":"How to Create Design System for User Interface? -","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/#website"},"datePublished":"2020-09-01T05:11:50+00:00","dateModified":"2023-03-27T07:40:07+00:00","description":"A design system is a collection of elements that can be combined and reused to build products. A design system is about communication.","breadcrumb":{"@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sagaratechnology.com\/blog\/how-to-create-design-system-for-user-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sagaratechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/sagaratechnology.com\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"How to Create Design System for User Interface?"}]},{"@type":"WebSite","@id":"https:\/\/sagaratechnology.com\/blog\/#website","url":"https:\/\/sagaratechnology.com\/blog\/","name":"Sagara Asia Blog","description":"Dapatkan Informasi Seputar Teknologi dan Bisnis","publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sagaratechnology.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sagaratechnology.com\/blog\/#organization","name":"Sagara Technology","url":"https:\/\/sagaratechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","contentUrl":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","width":200,"height":200,"caption":"Sagara Technology"},"image":{"@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/sagara-asia\/"]},{"@type":"Person","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/e25a7dce1900980898a69a7c63241723","name":"Sagara Technology","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55085e31e9427bed3336eaea67c72b96?s=96&d=mm&r=g","caption":"Sagara Technology"},"sameAs":["https:\/\/sagaratechnology.com","https:\/\/www.facebook.com\/Sagaratechnology","https:\/\/www.linkedin.com\/company\/sagara-asia\/"]}]}},"_links":{"self":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/107"}],"collection":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":5,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"predecessor-version":[{"id":3924,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/107\/revisions\/3924"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media\/113"}],"wp:attachment":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}