MORE BUZZ
User engagement and adoption
APP
SAAS
B2B
B2C
Colors
Black
Yellow
Error
Attention
Informative
Success
Toast
Mensagem breve e temporária usada para confirmar ações, informar mudanças de estado ou alertar o usuário sem interromper sua jornada.
Status
Positivo
Mensagem positiva
Banner
Componente de destaque usado para comunicar informações importantes, avisos ou oportunidades dentro do contexto da tela.
Status
Positivo
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Toast
Brief, temporary message used to confirm actions, report state changes, or alert the user without interrupting their journey.
State
Positive
Mensagem positiva
Banner
Highlighting component used to communicate important information, notices, or opportunities within the context of the screen.
State
Positive
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Botão
Elemento de ação que orienta o usuário sobre o próximo passo, como confirmar, continuar, salvar, cancelar ou iniciar uma tarefa.
Variação
Label
Clique aqui
GRANDE
Clique aqui
MÉDIO
Clique aqui
PEQUENO
Badge
Usado para destacar status, categorias, notificações ou informações complementares, ajudando o usuário a identificar estados importantes.
Status
Notificação
Label
GRANDE
Label
MÉDIO
Label
PEQUENO
MÍNIMO
Button
An action element that guides the user through the next step, such as confirming, continuing, saving, canceling, or starting a task.
Variable
Label
Clique aqui
LARGE
Clique aqui
MEDIUM
Clique aqui
SMALL
Badge
Used to highlight statuses, categories, notifications, or supplemental information, helping the user identify important states.
State
Notification
Label
LARGE
Label
MEDIUM
Label
SMALL
MINIMAL
Navigation bar
Estrutura de navegação que organiza os principais destinos do app, permitindo que o usuário se mova com clareza entre áreas importantes da experiência.
Dispositivo
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z M 20 25.208 C 21.441 25.208 22.669 24.7 23.685 23.685 C 24.7 22.669 25.208 21.441 25.208 20 C 25.208 18.559 24.7 17.331 23.685 16.315 C 22.669 15.299 21.441 14.792 20 14.792 C 18.559 14.792 17.331 15.299 16.315 16.315 C 15.299 17.331 14.792 18.559 14.792 20 C 14.792 21.441 15.299 22.669 16.315 23.685 C 17.331 24.7 18.559 25.208 20 25.208 Z M 20 30.417 C 18.559 30.417 17.205 30.143 15.937 29.596 C 14.67 29.049 13.568 28.307 12.63 27.37 C 11.693 26.432 10.95 25.33 10.403 24.062 C 9.857 22.795 9.583 21.441 9.583 20 C 9.583 18.559 9.857 17.205 10.403 15.937 C 10.95 14.67 11.693 13.568 12.63 12.63 C 13.568 11.693 14.67 10.95 15.937 10.403 C 17.205 9.857 18.559 9.583 20 9.583 C 21.441 9.583 22.795 9.857 24.062 10.403 C 25.33 10.95 26.432 11.693 27.37 12.63 C 28.307 13.568 29.049 14.67 29.596 15.937 C 30.143 17.205 30.417 18.559 30.417 20 C 30.417 21.441 30.143 22.795 29.596 24.062 C 29.049 25.33 28.307 26.432 27.37 27.37 C 26.432 28.307 25.33 29.049 24.062 29.596 C 22.795 30.143 21.441 30.417 20 30.417 Z M 20 28.333 C 22.326 28.333 24.297 27.526 25.911 25.911 C 27.526 24.297 28.333 22.326 28.333 20 C 28.333 17.673 27.526 15.703 25.911 14.088 C 24.297 12.474 22.326 11.666 20 11.666 C 17.673 11.666 15.703 12.474 14.088 14.088 C 12.474 15.703 11.666 17.673 11.666 20 C 11.666 22.326 12.474 24.297 14.088 25.911 C 15.703 27.526 17.673 28.333 20 28.333 Z" fill="transparent" height="40px" id="lytMw13Cl" width="40px"><path d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z" fill="transparent" height="40px" id="s4s4aG2zE" width="40px"/><path d="M 10.417 15.625 C 11.858 15.625 13.086 15.117 14.102 14.102 C 15.117 13.086 15.625 11.858 15.625 10.417 C 15.625 8.976 15.117 7.747 14.102 6.732 C 13.086 5.716 11.858 5.208 10.417 5.208 C 8.976 5.208 7.747 5.716 6.732 6.732 C 5.716 7.747 5.208 8.976 5.208 10.417 C 5.208 11.858 5.716 13.086 6.732 14.102 C 7.747 15.117 8.976 15.625 10.417 15.625 Z M 10.417 20.833 C 8.976 20.833 7.621 20.56 6.354 20.013 C 5.087 19.466 3.984 18.724 3.047 17.787 C 2.109 16.849 1.367 15.747 0.82 14.479 C 0.273 13.212 0 11.858 0 10.417 C 0 8.976 0.273 7.622 0.82 6.354 C 1.367 5.087 2.109 3.984 3.047 3.047 C 3.984 2.109 5.087 1.367 6.354 0.82 C 7.621 0.273 8.976 0 10.417 0 C 11.858 0 13.212 0.273 14.479 0.82 C 15.746 1.367 16.849 2.109 17.786 3.047 C 18.724 3.984 19.466 5.087 20.013 6.354 C 20.56 7.622 20.833 8.976 20.833 10.417 C 20.833 11.858 20.56 13.212 20.013 14.479 C 19.466 15.747 18.724 16.849 17.786 17.787 C 16.849 18.724 15.746 19.466 14.479 20.013 C 13.212 20.56 11.858 20.833 10.417 20.833 Z M 10.417 18.75 C 12.743 18.75 14.713 17.943 16.328 16.328 C 17.943 14.713 18.75 12.743 18.75 10.417 C 18.75 8.09 17.943 6.12 16.328 4.505 C 14.713 2.891 12.743 2.083 10.417 2.083 C 8.09 2.083 6.12 2.891 4.505 4.505 C 2.891 6.12 2.083 8.09 2.083 10.417 C 2.083 12.743 2.891 14.713 4.505 16.328 C 6.12 17.943 8.09 18.75 10.417 18.75 Z" fill="rgb(7, 144, 255)" height="20.833375000000004px" id="uFangEaQL" transform="translate(9.583 9.583)" width="20.83337499999999px"/></g></svg>)
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 23.111 24.889 L 32 16 L 23.111 7.111 M 32 16 L 10.667 16 M 10.667 32 L 3.556 32 C 1.592 32 0 30.408 0 28.444 L 0 3.556 C 0 1.592 1.592 0 3.556 0 L 10.667 0" fill="transparent" height="32px" id="O8_8yxu8L" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.33" stroke="rgb(194, 40, 32)" transform="translate(4 4)" width="32.000001483493406px"/></svg>)
Sair
Navigation bar
A navigation structure that organizes your app's top destinations, allowing the user to move clearly between important areas of the experience.
Device
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
Sair
Back home
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g d="M 9.98 10.977 L 9.98 1.996 L 0.998 1.996 C 0.447 1.996 0 1.549 0 0.998 C 0 0.447 0.447 0 0.998 0 L 10.977 0 C 11.529 0 11.975 0.447 11.975 0.998 L 11.975 10.977 C 11.975 11.529 11.529 11.975 10.977 11.975 C 10.426 11.975 9.98 11.529 9.98 10.977 Z M 10.284 0.305 C 10.535 0.045 10.906 -0.059 11.255 0.033 C 11.604 0.124 11.876 0.396 11.967 0.745 C 12.059 1.094 11.955 1.465 11.695 1.716 L 1.716 11.695 C 1.465 11.955 1.094 12.059 0.745 11.967 C 0.396 11.876 0.124 11.604 0.033 11.255 C -0.059 10.906 0.045 10.535 0.305 10.284 Z" fill="transparent" height="12px" id="TVZCt2ODY" transform="translate(5 5)" width="12px"><path d="M 9.98 10.977 L 9.98 1.996 L 0.998 1.996 C 0.447 1.996 0 1.549 0 0.998 C 0 0.447 0.447 0 0.998 0 L 10.977 0 C 11.529 0 11.975 0.447 11.975 0.998 L 11.975 10.977 C 11.975 11.529 11.529 11.975 10.977 11.975 C 10.426 11.975 9.98 11.529 9.98 10.977 Z" fill="rgb(255, 255, 255)" height="11.975424446415929px" id="TAkCTIb4j" width="11.975424446416127px"/><path d="M 10.284 0.305 C 10.535 0.045 10.906 -0.059 11.255 0.033 C 11.604 0.124 11.876 0.396 11.967 0.745 C 12.059 1.094 11.955 1.465 11.695 1.716 L 1.716 11.695 C 1.465 11.955 1.094 12.059 0.745 11.967 C 0.396 11.876 0.124 11.604 0.033 11.255 C -0.059 10.906 0.045 10.535 0.305 10.284 Z" fill="rgb(255, 255, 255)" height="12px" id="meAnXRyQ2" width="12px"/></g></svg>)
MORE BUZZ
User engagement and adoption
APP
SAAS
B2B
B2C
Preto
cor da marca
Usado como base neutra da interface, trazendo estrutura, legibilidade e equilíbrio visual.
Amarelo
cor da marca
Destaca as ações primárias da interface e direciona a atenção do usuário para os principais pontos de interação.
Erro
cor semântica
Indica falhas, problemas ou ações que exigem correção.
Atenção
cor semântica
Sinaliza situações que exigem cuidado antes de continuar.
Informativo
cor semântica
Comunica orientações, atualizações ou mensagens neutras de apoio.
Sucesso
cor semântica
Usada para confirmar que uma ação foi concluída corretamente.
Toast
Mensagem breve e temporária usada para confirmar ações, informar mudanças de estado ou alertar o usuário sem interromper sua jornada.
Status
Positivo
Mensagem positiva
Banner
Componente de destaque usado para comunicar informações importantes, avisos ou oportunidades dentro do contexto da tela.
Status
Positivo
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Botão
Elemento de ação que orienta o usuário sobre o próximo passo, como confirmar, continuar, salvar, cancelar ou iniciar uma tarefa.
Variação
Label
Clique aqui
GRANDE
Clique aqui
MÉDIO
Clique aqui
PEQUENO
Badge
Usado para destacar status, categorias, notificações ou informações complementares, ajudando o usuário a identificar estados importantes.
Status
Notificação
Label
GRANDE
Label
MÉDIO
Label
PEQUENO
MÍNIMO
Navigation bar
Estrutura de navegação que organiza os principais destinos do app, permitindo que o usuário se mova com clareza entre áreas importantes da experiência.
Dispositivo
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
Sair