{"id":117921,"date":"2022-07-19T08:46:19","date_gmt":"2022-07-19T11:46:19","guid":{"rendered":"https:\/\/fluency.io\/br\/blog\/?p=11859"},"modified":"2023-07-27T12:48:24","modified_gmt":"2023-07-27T15:48:24","slug":"style-guide","status":"publish","type":"post","link":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/","title":{"rendered":"Style Guide: aprenda do zero a criar o seu"},"content":{"rendered":"\n<p>Se voc\u00ea j\u00e1 trabalhou com <strong>design<\/strong> em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as <strong>informa\u00e7\u00f5es<\/strong> est\u00e9ticas e visuais de uma marca, como <strong>tipografia, paleta de cores, logo<\/strong>, entre outras.<\/p>\n\n\n\n<p>O Style Guide ou guia de estilo, em tradu\u00e7\u00e3o livre, \u00e9 como se fosse um manual de marca, s\u00f3 que voltado para times de <strong>produto<\/strong> e <strong>tecnologia<\/strong>.<\/p>\n\n\n\n<p>Veremos neste conte\u00fado o que \u00e9 um <strong>Style Guide<\/strong>, no que ele difere do manual de marca e do Design System, com o qual tamb\u00e9m pode ser confundido, e como criar o seu do zero. Vamos l\u00e1?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>O que significa Style Guide?<\/strong><\/h2>\n\n\n\n<p>Style Guide \u00e9 um documento que cont\u00e9m as diretrizes de design de um projeto, seja ele uma empresa, um <strong>produto<\/strong> ou uma marca.<\/p>\n\n\n\n<p>Dentro desse <strong>documento<\/strong> ficam os direcionamentos acerca do uso de cores, tipografia, grids e breakpoints, al\u00e9m dos elementos de <strong><a href=\"https:\/\/fluency.io\/br\/blog\/user-interface-design\/\" data-type=\"post\" data-id=\"6112\" target=\"_blank\" rel=\"noreferrer noopener\">User Interface<\/a><\/strong> que s\u00e3o utilizados no produto.<\/p>\n\n\n\n<p>Duas <strong>caracter\u00edsticas<\/strong> fundamentais do Style Guide s\u00e3o:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Todos os envolvidos no produto precisam ter <strong>acesso<\/strong> a ele;<\/li><li>O guia \u00e9 um <strong>organismo vivo<\/strong>, que pode ser modificado quando necess\u00e1rio.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Por que o Style Guide \u00e9 importante?<\/strong><\/h3>\n\n\n\n<p>\u00c9 comum encontrar no mercado equipes mais enxutas, principalmente na <strong><a href=\"https:\/\/fluency.io\/br\/blog\/conceitos-gestao-de-produtos\/\" data-type=\"post\" data-id=\"565\" target=\"_blank\" rel=\"noreferrer noopener\">\u00e1rea de produto<\/a><\/strong>, com menos pessoas envolvidas.<\/p>\n\n\n\n<p>Mesmo assim \u00e9 muito importante que todos saibam as <strong>diretrizes de design<\/strong> do projeto no qual est\u00e3o trabalhando para que n\u00e3o haja ru\u00eddos na <strong>comunica\u00e7\u00e3o<\/strong>, tampouco na <strong>interface do usu\u00e1rio<\/strong>.<\/p>\n\n\n\n<p>Essa necessidade fica ainda mais clara quando o time \u00e9 <strong>maior<\/strong>, contemplando mais <strong>designers<\/strong> e outros profissionais envolvidos no processo.<\/p>\n\n\n\n<p>Se n\u00e3o houver um <strong>guia<\/strong>, cada pessoa pode tomar uma decis\u00e3o diferente a respeito do design, o que acarreta em erros, perda de tempo, <strong>retrabalhos<\/strong> e falta de <strong>organiza\u00e7\u00e3o<\/strong>.<\/p>\n\n\n\n<p>E sabemos que num ambiente com muitos erros, desperd\u00edcio de tempo h\u00e1bil e falta de organiza\u00e7\u00e3o falta tamb\u00e9m <strong>otimiza\u00e7\u00e3o<\/strong>. Sem otimiza\u00e7\u00e3o, perde-se n\u00e3o apenas <strong>tempo<\/strong>, mas <strong>dinheiro<\/strong> tamb\u00e9m.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Style Guide, Brand Guidelines e Design System<\/strong><\/h2>\n\n\n\n<p>No in\u00edcio do conte\u00fado comparamos o <strong>Style Guide<\/strong> ao manual de marca, tamb\u00e9m conhecido como Brand Guidelines. Eles s\u00e3o dois documentos que, \u00e0 primeira vista, podem parecer similares, mas t\u00eam <strong>diferen\u00e7as cruciais<\/strong> entre si.<\/p>\n\n\n\n<p>O <strong>manual de marca<\/strong>, por exemplo, armazena informa\u00e7\u00f5es importantes sobre uma marca, como tipografia, <strong>paleta de cores<\/strong>, maneiras corretas e incorretas de aplica\u00e7\u00e3o de logo, al\u00e9m de toda a defesa e <strong><a href=\"https:\/\/fluency.io\/br\/blog\/storytelling-com-dados\/\" data-type=\"post\" data-id=\"6319\" target=\"_blank\" rel=\"noreferrer noopener\">storytelling<\/a><\/strong> acerca da <strong>identidade<\/strong> e nascimento da marca.<\/p>\n\n\n\n<p>O manual de marca \u00e9 um documento que s\u00f3 vai mudar quando os decisores da <strong>empresa<\/strong> acreditarem que \u00e9 hora de realizar um <strong>rebranding<\/strong>, nome que a publicidade d\u00e1 ao processo de recria\u00e7\u00e3o e reformata\u00e7\u00e3o de uma marca.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img decoding=\"async\" width=\"624\" height=\"417\" src=\"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY\"><\/p>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\"><em>Como definir as diretrizes de estilo de um produto para que todos possam seguir e, dessa maneira, criar uma unidade identit\u00e1ria.<\/em><\/p>\n\n\n\n<p>J\u00e1 o Style Guide n\u00e3o. O Style Guide, como dissemos anteriormente, \u00e9 um <strong>organismo vivo<\/strong>. Isso significa que ele sofrer\u00e1 mudan\u00e7as com muito mais frequ\u00eancia do que um manual de marca.<\/p>\n\n\n\n<p>\u00c9 claro que o guia de estilo n\u00e3o vai ter uma vers\u00e3o nova todos os dias, mas como no caso da \u00e1rea de produto o foco \u00e9 sempre uma melhor <strong><a href=\"https:\/\/fluency.io\/br\/blog\/o-que-ux\/\" data-type=\"post\" data-id=\"795\" target=\"_blank\" rel=\"noreferrer noopener\">experi\u00eancia do usu\u00e1rio<\/a><\/strong> (UX), se algum dos profissionais envolvidos encontrar uma solu\u00e7\u00e3o melhor, ent\u00e3o o <strong>guia<\/strong> vai mudar.<\/p>\n\n\n\n<p>J\u00e1 o <a href=\"https:\/\/fluency.io\/br\/blog\/design-system\/\" data-type=\"post\" data-id=\"10084\" target=\"_blank\" rel=\"noreferrer noopener\">Design System<\/a> tem uma outra defini\u00e7\u00e3o. Trata-se de uma ferramenta mais <strong>robusta<\/strong> e <strong>completa<\/strong> que tem mais dados acerca de uma empresa, como:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Princ\u00edpios de design;<\/li><li>Prop\u00f3sitos, valores e objetivos;<\/li><li>Identidade visual;<\/li><li>Componentes, elementos e padr\u00f5es visuais;<\/li><li>Regras e outras diretrizes.<\/li><\/ul>\n\n\n\n<p>Podemos dizer que o <strong>Style Guide<\/strong> estar\u00e1 dentro do Design System e, por ser uma ferramenta mais completa, com mais informa\u00e7\u00f5es e diretrizes, o Design System serve como <strong>fonte de consulta<\/strong> para as mudan\u00e7as do Style Guide.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Passo a passo para criar um Style Guide<\/strong><\/h2>\n\n\n\n<p>Um bom Style Guide deve ter refer\u00eancias sobre <strong>cores<\/strong>, <strong>tipografia<\/strong>, elementos de <strong>User Interface<\/strong>, <strong>layouts, grids e breakpoints<\/strong>.<\/p>\n\n\n\n<p>A seguir veja uma lista com o passo a passo para definir cada um desses elementos e criar o seu pr\u00f3prio documento.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Cores<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Defina as cores prim\u00e1rias, secund\u00e1rias e terci\u00e1rias;<\/li><li>Se poss\u00edvel, escolha apenas <strong>uma cor<\/strong> prim\u00e1ria e trabalhe com tons e sombras;<\/li><li>Defina as cores dos <strong>textos<\/strong>, dos <strong>backgrounds<\/strong> (devem contrastar entre si), dos t\u00edtulos e subt\u00edtulos;<\/li><li>Lembre-se que elas s\u00e3o um elemento importante de <strong><a href=\"https:\/\/fluency.io\/br\/blog\/web-stories\/o-que-e-ux-design\/\" data-type=\"web-story\" data-id=\"6446\" target=\"_blank\" rel=\"noreferrer noopener\">UX<\/a><\/strong>, ent\u00e3o \u00e9 necess\u00e1rio definir tamb\u00e9m as cores de <strong>links, bot\u00f5es de CTA, mensagens de erro, status<\/strong> etc.<\/li><li>Documente todas essas informa\u00e7\u00f5es no seu Style Guide.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Tipografia<\/h3>\n\n\n\n<p>Dentro da tipografia n\u00e3o est\u00e3o apenas as fontes utilizadas, mas tamb\u00e9m:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Os espa\u00e7amentos entrelinhas, entre caracteres e entre um bloco de texto e outro;<\/li><li>Altura e posicionamento das linhas;<\/li><li>Hierarquia tipogr\u00e1fica;<\/li><li>Peso e cores.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Grids e Breakpoints<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>No Style Guide deve estar contemplada a <strong>estrutura padr\u00e3o<\/strong> dos grids para manter a <strong>padroniza\u00e7\u00e3o<\/strong> das interfaces;<\/li><li>Assim como a padroniza\u00e7\u00e3o dos <strong>breakpoints<\/strong>, que s\u00e3o os diversos tipos de <strong>layouts<\/strong> para cada tela.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. User Interface<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u00c9 importante lembrar dos <strong>elementos de interface<\/strong>, como imagens, \u00edcones, logos e outros elementos visuais;<\/li><li>A padroniza\u00e7\u00e3o das <strong>mensagens de erro<\/strong> tamb\u00e9m entra no Style Guide;<\/li><li><strong><a href=\"https:\/\/fluency.io\/br\/blog\/guia-ux-writing\/\" data-type=\"post\" data-id=\"6290\" target=\"_blank\" rel=\"noreferrer noopener\">UX Writing<\/a><\/strong>: regras de como deve estar escrito o conte\u00fado em texto de forma que comunique o passo a passo ao usu\u00e1rio sem ru\u00eddos;<\/li><li>Lembre-se sempre da acessibilidade, conceito importante dentro do design de interfaces que tamb\u00e9m precisa de <strong>padr\u00e3o<\/strong>.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>? Quer ingressar na \u00e1rea de Design e Produto? Vem para a Awari!<\/strong><\/h2>\n\n\n\n<p>A Awari \u00e9 uma plataforma completa que conta com <strong>mentorias individuais<\/strong>, cursos com <strong>aulas ao vivo<\/strong> e suporte de carreira na \u00e1rea de Produto.<\/p>\n\n\n\n<p>Conhe\u00e7a nossos <strong><a href=\"https:\/\/fluency.io\/br\/blog\/trilha-de-design\/\" data-type=\"page\" data-id=\"2376\" target=\"_blank\" rel=\"noreferrer noopener\">cursos de Design<\/a> e <a href=\"https:\/\/fluency.io\/br\/blog\/trilha-de-gestao-de-produtos\/\" data-type=\"page\" data-id=\"4843\" target=\"_blank\" rel=\"noreferrer noopener\">Gest\u00e3o de Produtos<\/a><\/strong>, com intensivos de Product Management, Product Discovery, Product Marketing &amp; Product Leadership.<\/p>\n\n\n\n<p>Saiba mais sobre a nossa jornada personalizada e materiais complementares feitos por <strong>especialistas no mercado<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ticas e visuais de uma marca, como tipografia, paleta de cores, logo, entre outras. O Style Guide ou guia de estilo, em tradu\u00e7\u00e3o livre, \u00e9 como se fosse um [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-117921","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-19T11:46:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T15:48:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/\",\"name\":\"Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY\",\"datePublished\":\"2022-07-19T11:46:19+00:00\",\"dateModified\":\"2023-07-27T15:48:24+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage\",\"url\":\"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY\",\"contentUrl\":\"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Style Guide: aprenda do zero a criar o seu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil","description":"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...","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:\/\/homolog.fluency.io\/br\/blog\/style-guide\/","og_locale":"pt_BR","og_type":"article","og_title":"Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil","og_description":"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/","og_site_name":"Fluency.io Brasil","article_published_time":"2022-07-19T11:46:19+00:00","article_modified_time":"2023-07-27T15:48:24+00:00","og_image":[{"url":"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/","name":"Style Guide: aprenda do zero a criar o seu - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY","datePublished":"2022-07-19T11:46:19+00:00","dateModified":"2023-07-27T15:48:24+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"Se voc\u00ea j\u00e1 trabalhou com design em algum momento da carreira, deve ter ouvido falar em manual de marca, um documento que cont\u00e9m todas as informa\u00e7\u00f5es est\u00e9ti...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#primaryimage","url":"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY","contentUrl":"https:\/\/lh6.googleusercontent.com\/BMkI6X1FRU1PS-21kLdaqeNC0Ezz0JFBApBwAfhTSf6xyW3yCMpAf7GrtEfPZ7hBSA3eNuUQUB6FfkdM47swAG1QpCjDHnM8sBy476BqK25ZakH_4UY95CcgRefRmrNPmZLpD9eY"},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Style Guide: aprenda do zero a criar o seu"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=117921"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/117921\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=117921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=117921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=117921"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=117921"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=117921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}