Diretrizes de Interface
A Masi Design é o estúdio criativo da MASI Negócios.
Traduzimos inovação e impacto em design, criando branding e experiências que refletem a visão de futuro dos nossos empresários.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 2.446 0.006 L 2.476 11.823 C 2.489 17.316 6.966 21.775 12.442 21.789 L 18.524 21.819 L 18.531 24.278 L 12.448 24.248 L 12.129 24.244 C 5.445 24.056 0.047 18.552 0.03 11.831 L 0 0 Z" fill="rgb(0, 0, 0)" height="24.27791812865498px" id="gpVQ4mAal" transform="translate(9.507 8.237)" width="18.530619883040913px"/><path d="M 25.939 0 C 33.575 0 39.766 6.227 39.766 13.909 L 39.766 26.091 C 39.766 33.773 33.575 40 25.939 40 L 13.827 40 C 6.191 40 0 33.773 0 26.091 L 0 13.909 C 0 6.227 6.191 0 13.827 0 Z M 13.827 2.64 C 7.64 2.64 2.624 7.685 2.624 13.909 L 2.624 26.091 C 2.624 32.315 7.64 37.36 13.827 37.36 L 25.939 37.36 C 32.126 37.36 37.142 32.315 37.142 26.091 L 37.142 13.909 C 37.142 7.685 32.126 2.64 25.939 2.64 Z" fill="rgb(0, 0, 0)" height="40px" id="BsR5gG1Nc" transform="translate(0.117 0)" width="39.76608187134503px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 20.494 0 C 20.472 0.576 20.405 1.14 20.293 1.69 C 20.084 2.721 19.721 3.698 19.235 4.598 C 18.953 5.12 18.624 5.615 18.259 6.078 L 18.259 6.078 C 17.585 6.935 16.78 7.684 15.875 8.294 L 15.874 8.294 C 15.062 8.844 14.165 9.283 13.21 9.59 C 12.203 9.914 11.131 10.086 10.016 10.086 L 10.016 10.09 L 0 10.09 L 0 7.642 L 10.021 7.642 C 11.798 7.642 13.441 7.062 14.772 6.081 L 14.772 6.081 C 15.323 5.678 15.819 5.202 16.248 4.678 C 16.955 3.814 17.486 2.796 17.782 1.688 C 17.928 1.144 18.016 0.581 18.044 0 Z" fill="rgb(0, 0, 0)" height="10.09003508771928px" id="aZ4LQXHJo" transform="translate(9.707 20.701)" width="20.493801169590615px"/><path d="M 20.496 2.448 L 10.476 2.448 C 6.177 2.448 2.657 5.84 2.45 10.087 L 0 10.087 C 0.209 4.488 4.828 0 10.476 0 L 20.496 0 Z" fill="rgb(0, 0, 0)" height="10.08748538011696px" id="eZ21I6l4k" transform="translate(9.713 10.058)" width="20.496280701754397px"/><path d="M 25.939 0 C 33.575 0 39.766 6.227 39.766 13.909 L 39.766 26.091 C 39.766 33.773 33.575 40 25.939 40 L 13.827 40 C 6.191 40 0 33.773 0 26.091 L 0 13.909 C 0 6.227 6.191 0 13.827 0 Z M 13.827 2.64 C 7.64 2.64 2.624 7.685 2.624 13.909 L 2.624 26.091 C 2.624 32.315 7.64 37.36 13.827 37.36 L 25.939 37.36 C 32.126 37.36 37.142 32.315 37.142 26.091 L 37.142 13.909 C 37.142 7.685 32.126 2.64 25.939 2.64 Z" fill="rgb(0, 0, 0)" height="40px" id="WUKp980HW" transform="translate(0.117 0)" width="39.76608187134503px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 24.478 0 C 30.208 0 34.854 4.648 34.854 10.381 C 34.854 16.115 30.208 20.763 24.478 20.763 L 10.376 20.763 C 4.645 20.763 0 16.115 0 10.381 C 0 4.648 4.645 0 10.376 0 Z M 10.376 2.62 C 6.092 2.62 2.619 6.095 2.619 10.381 C 2.619 14.667 6.092 18.142 10.376 18.142 L 24.478 18.142 C 28.762 18.142 32.235 14.667 32.235 10.381 C 32.235 6.095 28.762 2.62 24.478 2.62 Z" fill="rgb(0, 0, 0)" height="20.7625730994152px" id="Mps1NnLVn" transform="translate(2.573 19.181)" width="34.8538011695906px"/><path d="M 24.478 0 C 30.208 0 34.854 4.648 34.854 10.381 C 34.854 11.701 34.607 12.963 34.158 14.124 C 33.704 12.947 33.04 11.874 32.214 10.949 C 32.228 10.762 32.235 10.572 32.235 10.381 C 32.235 6.095 28.762 2.621 24.478 2.621 L 10.376 2.621 C 6.092 2.621 2.619 6.095 2.619 10.381 C 2.619 10.572 2.626 10.762 2.64 10.949 C 1.813 11.874 1.15 12.947 0.695 14.124 C 0.246 12.963 0 11.701 0 10.381 C 0 4.648 4.645 0 10.376 0 Z" fill="rgb(0, 0, 0)" height="14.123976608187133px" id="j5WdNV520" transform="translate(2.573 9.591)" width="34.8538011695906px"/><path d="M 24.478 0 C 30.208 0 34.854 4.648 34.854 10.381 C 34.854 11.701 34.607 12.963 34.158 14.124 C 33.704 12.947 33.04 11.874 32.214 10.949 C 32.228 10.762 32.235 10.572 32.235 10.381 C 32.235 6.095 28.762 2.621 24.478 2.621 L 10.376 2.621 C 6.092 2.621 2.619 6.095 2.619 10.381 C 2.619 10.572 2.626 10.762 2.64 10.949 C 1.813 11.874 1.15 12.947 0.695 14.124 C 0.246 12.963 0 11.701 0 10.381 C 0 4.648 4.645 0 10.376 0 Z" fill="rgb(0, 0, 0)" height="14.123953216374268px" id="UVAWCqH9T" transform="translate(2.573 0)" width="34.8538011695906px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 28 2.695 L 14.872 2.695 C 18.138 5.108 20.27 9.004 20.281 13.384 L 20.312 26 L 17.732 25.994 L 17.701 13.393 C 17.686 7.536 12.957 2.71 7.18 2.695 L 0 2.695 L 0 0 L 28 0 Z" fill="rgb(0, 0, 0)" height="26px" id="Sxt7GTlk_" transform="translate(6 6.587)" width="28px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 2.807 20 L 0 20 L 0 0 L 2.807 0 Z" fill="rgb(0, 0, 0)" height="20px" id="itgcQwrJS" transform="translate(18.596 12.398)" width="2.807017543859729px"/><path d="M 2.807 2.807 L 0 2.807 L 0 0 L 2.807 0 Z" fill="rgb(0, 0, 0)" height="2.8070175438596463px" id="cX5t_1dGg" transform="translate(18.596 7.953)" width="2.807017543859729px"/><path d="M 25.939 0 C 33.575 0 39.766 6.227 39.766 13.909 L 39.766 26.091 C 39.766 33.773 33.575 40 25.939 40 L 13.827 40 C 6.191 40 0 33.773 0 26.091 L 0 13.909 C 0 6.227 6.191 0 13.827 0 Z M 13.827 2.64 C 7.64 2.64 2.624 7.685 2.624 13.909 L 2.624 26.091 C 2.624 32.315 7.64 37.36 13.827 37.36 L 25.939 37.36 C 32.126 37.36 37.142 32.315 37.142 26.091 L 37.142 13.909 C 37.142 7.685 32.126 2.64 25.939 2.64 Z" fill="rgb(0, 0, 0)" height="40px" id="t2Y8EkEvR" transform="translate(0.117 0)" width="39.76608187134502px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 34.973 13.224 C 34.973 7.249 30.129 2.404 24.153 2.404 L 19.56 2.404 C 16.464 2.404 13.516 3.73 11.463 6.047 L 5.127 13.195 C 3.373 15.174 2.404 17.727 2.404 20.372 L 2.404 24.153 C 2.404 30.129 7.249 34.973 13.224 34.973 L 24.153 34.973 C 30.129 34.973 34.973 30.129 34.973 24.153 Z M 37.377 24.153 C 37.377 31.456 31.456 37.377 24.153 37.377 L 13.224 37.377 C 5.921 37.377 0 31.456 0 24.153 L 0 20.372 C 0 17.14 1.184 14.019 3.328 11.601 L 9.664 4.452 C 12.173 1.621 15.776 0 19.56 0 L 24.153 0 C 31.456 0 37.377 5.921 37.377 13.224 Z" fill="rgb(0, 0, 0)" height="37.37704918032787px" id="GDm7HkBqq" transform="translate(1.311 1.311)" width="37.37704918032793px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 22.495 20.51 L 20.51 22.495 L 0 1.985 L 1.985 0 Z" fill="rgb(0, 0, 0)" height="22.49525146198831px" id="bsXiaxKuG" transform="translate(12.514 4.7)" width="22.495204678362487px"/><path d="M 25.939 0 C 33.575 0 39.766 6.227 39.766 13.909 L 39.766 26.091 C 39.766 33.773 33.575 40 25.939 40 L 13.827 40 C 6.191 40 0 33.773 0 26.091 L 0 13.909 C 0 6.227 6.191 0 13.827 0 Z M 13.827 2.64 C 7.64 2.64 2.624 7.685 2.624 13.909 L 2.624 26.091 C 2.624 32.315 7.64 37.36 13.827 37.36 L 25.939 37.36 C 32.126 37.36 37.142 32.315 37.142 26.091 L 37.142 22.497 L 17.284 2.64 Z M 37.142 18.527 L 37.142 13.909 C 37.142 7.685 32.126 2.64 25.939 2.64 L 21.254 2.64 Z" fill="rgb(0, 0, 0)" height="40px" id="zSJU35DdQ" transform="translate(0.117 0)" width="39.76608187134502px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 7.988 0 C 12.401 0 15.977 3.582 15.977 7.999 C 15.977 12.416 12.401 15.999 7.988 15.999 C 3.576 15.999 0 12.416 0 7.999 C 0 3.582 3.576 0 7.988 0 Z M 7.988 2.419 C 4.912 2.419 2.417 4.916 2.417 7.999 C 2.417 11.082 4.912 13.58 7.988 13.58 C 11.065 13.58 13.56 11.082 13.56 7.999 C 13.56 4.916 11.065 2.419 7.988 2.419 Z" fill="rgb(0, 0, 0)" height="15.998526315789459px" id="tJsZwiavP" transform="translate(11.826 12)" width="15.977115789473661px"/><path d="M 19.789 0 C 30.719 0 39.579 8.954 39.579 20 C 39.579 31.046 30.719 40 19.789 40 C 8.86 40 0 31.046 0 20 C 0 8.954 8.86 0 19.789 0 Z M 19.789 2.423 C 10.183 2.423 2.397 10.293 2.397 20 C 2.397 29.707 10.183 37.577 19.789 37.577 C 29.396 37.577 37.182 29.707 37.182 20 C 37.182 10.293 29.396 2.423 19.789 2.423 Z" fill="rgb(0, 0, 0)" height="40px" id="WnMYw_3fh" transform="translate(0.207 0)" width="39.57894736842111px"/></svg>)
Tamanhos
20px
25px
30px
Ao aplicar o logotipo, certifique-se de que ele não seja nem muito grande nem muito pequeno em relação ao tamanho, espaçamento e quantidade de elementos no layout. Busque um equilíbrio visual.
Pitch Premium
Desbloqueie o seu potencial
Pitch Premium
Desbloqueie o seu potencial
Pitch Premium
Desbloqueie o seu potencial
v2 Empilhada
A versão empilhada do logotipo foi criada para situações em que o espaço horizontal é limitado. Ela mantém a proporção e a leitura mesmo em áreas mais estreitas. Utilize essa variação quando a versão horizontal não se adaptar ao layout, garantindo equilíbrio visual e consistência na aplicação.
Ao utilizar a versão empilhada, priorize situações com pouco espaço horizontal, como perfis ou áreas quadradas, garantindo que o logotipo permaneça legível e proporcional ao formato. Um exemplo prático são os avatares de redes sociais.
Símbolo
O símbolo do logotipo Masi Negócios foi inicialmente criado para a marca “Masi”, fundada por Breno Masi. Este símbolo representa todas as marcas que levam o nome “Masi” e sua essência.
Aplicações
O símbolo do logotipo deve ser utilizado em diversos tipos de aplicações para reforçar a presença da marca. Seu uso é recomendado principalmente em layouts com pequenos espaços, onde a versão tipográfica fica ilegível.
Paleta de Cores
A paleta de cores da MASI Negócios foi criada para garantir unidade visual e consistência entre todas as aplicações da marca. Nesta seção, você encontrará as orientações necessárias para o uso dos tons.
#AFFF00
#D4D4D4
#E8E8E8
#F0F0F0
#404040
#1C1C1C
#000000
Sobreposições
A sobreposição geral utiliza tons claros como base para reforçar a presença da marca em diferentes composições. Seu uso é indicado em layouts amplos ou com áreas neutras, onde o cinza e o branco mantêm a leitura estável. Elementos em verde claro podem ser aplicados para destacar informações específicas sem comprometer o conjunto visual.
#AFFF00
#1C1C1C
#E8E8E8
Sobreposições 2
A sobreposição premium aplica tons escuros para transmitir profundidade e sofisticação em materiais de maior relevância. O preto absoluto e o cinza intenso são recomendados para páginas especiais ou peças de caráter institucional, mantendo contraste adequado com o logotipo.
#000000
#404040
#1C1C1C
Tipografia
A marca Masi Negócios serve como hub central para todas as submarcas Masi. Nesta seção, você encontrará um guia abrangente sobre as aplicações do logotipo principal e suas variações.
Masi Modular
A Masi Modular é a tipografia oficial da marca Masi, do tipo display sans-serif geométrica de estética futurista (Neo-Tech). Seu desenho foi desenvolvido para impacto visual, com formas tecnológicas, cortes precisos e módulos geométricos, ideal para títulos, chamadas e composições de destaque.
Uso da fonte
A tipografia Masi Modular é de uso exclusivo das marcas que compõem o ecossistema MASI. Seu emprego também é permitido em pontos de destaque em títulos, sempre com o objetivo de reforçar a identidade visual, garantir autenticidade e consolidar o diferencial estético da marca.
Fonte usual - Inter
Para toda a comunicação das marcas Masi, utilize a tipografia Inter, garantindo consistência visual e coerência com o posicionamento da marca. O uso de outras fontes, desde que padronizadas, pode ser permitido em projetos específicos, mediante aprovação prévia do time de Design.
Ícones
Com base em um elemento visual, criamos a grade de ícones da marca Masi, utilizando o mesmo elemento presente no logotipo e na tipografia da marca.
Linguagem de Icons
A linguagem de ícones da marca MASI segue um padrão rigoroso de espessura de linha, espaçamento, estilo visual e semiótica. É altamente recomendado o uso dos ícones proprietários da marca, garantindo unidade e força visual.
O uso de ícones genéricos encontrados na internet não é recomendado, pois compromete a autenticidade e enfraquece a essência da marca.
Formas
A forma geométrica da marca adota um padrão fixo de corne radius e estruturação de sobreposições para garantir consistência e qualidade. Além disso, um estilo próprio de chanfro é aplicado.
Consistência
A estrutura de comunicação da marca utiliza caixas de seção que compõem o estilo visual e garantem uma hierarquia clara, separando informações e organizando o layout de forma funcional. Em todas as suas aplicações, essas caixas devem apresentar arestas com arredondamento de 10px.
10px
Forma com ID
Para alcançar um estilo modernista, o primeiro elemento geométrico do layout deve ter um chanfro superior esquerdo com um corte de 45 graus. No entanto, evite usar esse chanfro em todas as box/formas do layout. Em vez disso, use-o apenas no primeiro elemento para criar um ponto focal e evitar que o layout fique carregado.
45º
Sobreposições
A estrutura de comunicação da marca utiliza caixas de seção que compõem o estilo visual e garantem uma hierarquia clara, separando informações e organizando o layout de forma funcional. Em todas as suas aplicações, essas caixas devem apresentar arestas com arredondamento de 10px.
Background
Glass Effect
O efeito liquid glass deve ser usado com moderação, apenas em barras de menu, navegação e destaque médio de subtítulos.
Evite usá-lo mais de uma vez no mesmo layout.
Uso, e estilo Glass
Para alcançar o efeito glass, aplique um leve blur à forma e diminua sua opacidade para garantir boa visibilidade do texto. Em plataformas compatíveis, utilize o Liquid Glass, ajustando suas propriedades para obter um resultado esteticamente agradável e de fácil leitura. Pode ser utilizado em Dark Mode e Light Mode.
Quando deve ser utilizado a marca M. Negócios?
Utilize esta linguagem visual exclusivamente para comunicar sobre todos os projetos do Hub Masi, incluindo o website oficial, posts gerais do Instagram e materiais publicitários que promovam o Hub.
Versão Usual
Conjunto de assets da Masi Negócios para criação de conteúdos nas redes sociais. Organizado em um arquivo drag-and-drop no Canva, permite produzir e editar posts com agilidade, mantendo consistência visual da marca.
