A identidade da Monk Business vem da Cloud Monk: o símbolo orbital no lugar do O, a peça teal no K e as mesmas cinco cores. As letras são desenhadas a partir da fonte Lexend, a mesma usada no site e nos documentos.
Logotipo
Use a versão horizontal sempre que houver espaço. A versão empilhada serve para espaços quadrados. Sobre fundo escuro, use os arquivos “on-dark”; sobre fundo claro, os arquivos “on-light”.
Símbolo
16px24px32px48px
64px+O símbolo é um núcleo com três satélites em uma órbita aberta. Abaixo de 64 px, use o desenho simplificado (favicon.svg), com traços mais grossos e satélites cheios.
Cores
- Grafite#272727Fundo principal
- Gelo#F9F9F9Texto sobre escuro, fundo claro
- Bruma#BBD4D5Símbolo e rótulos sobre escuro
- Sálvia#7EAFB1Botões sobre escuro
- Petróleo#418A8DPeça do K, símbolo sobre claro
Escala teal
- 50#F1F7F7
- 100#E0EEEE
- 200#BBD4D5
- 300#9CC2C3
- 400#7EAFB1
- 500#5F9C9F
- 600#418A8D
- 700#2F6F72
- 800#245759
- 900#1C4244
- 950#122B2C
Escala neutra
- 0#FFFFFF
- 50#F9F9F9
- 100#EFEFEF
- 200#DCDCDC
- 300#C2C2C2
- 400#A3A3A3
- 500#858585
- 600#6B6B6B
- 700#4F4F4F
- 750#464646
- 800#303030
- 850#383838
- 900#272727
- 950#1B1B1B
Tema escuro (padrão)
| Fundo | #272727 | --mb-color-bg | |
|---|---|---|---|
| Superfície | #303030 | --mb-color-surface | |
| Superfície 2 | #383838 | --mb-color-surface-2 | |
| Borda | #464646 | --mb-color-border | |
| Borda forte (campos) | #858585 | --mb-color-border-strong | |
| Texto | #F9F9F9 | --mb-color-fg | |
| Texto secundário | #A3A3A3 | --mb-color-muted | |
| Rótulo (eyebrow) | #BBD4D5 | --mb-color-eyebrow | |
| Link | #9CC2C3 | --mb-color-link | |
| Botão principal | #7EAFB1 | --mb-color-primary | |
| Texto sobre o botão | #272727 | --mb-color-on-primary | |
| Anel de foco | #9CC2C3 | --mb-color-focus | |
| Símbolo | #BBD4D5 | --mb-color-symbol | |
| Destaque | #418A8D | --mb-color-accent | |
| Balão do visitante no chat | #1C4244 | --mb-color-bubble-user | |
| Sucesso | #7FCF9F | --mb-color-success | |
| Atenção | #F0C36B | --mb-color-warning | |
| Erro | #FF9580 | --mb-color-danger | |
| Info | #9CC2C3 | --mb-color-info |
Tema claro
| Fundo | #F9F9F9 | --mb-color-bg | |
|---|---|---|---|
| Superfície | #FFFFFF | --mb-color-surface | |
| Superfície 2 | #EFEFEF | --mb-color-surface-2 | |
| Borda | #DCDCDC | --mb-color-border | |
| Borda forte (campos) | #858585 | --mb-color-border-strong | |
| Texto | #272727 | --mb-color-fg | |
| Texto secundário | #6B6B6B | --mb-color-muted | |
| Rótulo (eyebrow) | #2F6F72 | --mb-color-eyebrow | |
| Link | #2F6F72 | --mb-color-link | |
| Botão principal | #2F6F72 | --mb-color-primary | |
| Texto sobre o botão | #FFFFFF | --mb-color-on-primary | |
| Anel de foco | #2F6F72 | --mb-color-focus | |
| Símbolo | #418A8D | --mb-color-symbol | |
| Destaque | #418A8D | --mb-color-accent | |
| Balão do visitante no chat | #E0EEEE | --mb-color-bubble-user | |
| Sucesso | #1F7A4D | --mb-color-success | |
| Atenção | #8A5A00 | --mb-color-warning | |
| Erro | #B42318 | --mb-color-danger | |
| Info | #2F6F72 | --mb-color-info |
Grafite é o fundo principal e Gelo é o texto sobre ele. Bruma marca o símbolo e os rótulos, Sálvia os botões e Petróleo a peça do K. Dois tons extras da escala teal garantem contraste para links e botões em fundo claro.
Tipografia
Lexend · títulos e textos
Integrações de telecom, software e IA para quem não pode parar.
Títulos em peso 600, com só a primeira letra maiúscula. Textos em 300 a 400, com cerca de 17 px e entrelinha 1,6. Rótulos em caixa alta com espaçamento largo.
- Light 300
- Regular 400
- Medium 500
- SemiBold 600
- Bold 700
JetBrains Mono · técnico
+55 11 0000-0000
BDR → BDO → prestadora receptora
AWS · Google Cloud · IBM Cloud
Para telefones, código, nomes de nuvens e modelos e rótulos técnicos.
Área de proteção e tamanhos mínimos
- Logotipo, largura mínima
- 120 px
- Símbolo, tamanho mínimo
- 24 px
- Símbolo abaixo de 64 px
- favicon.svg
- Mantenha em volta do logotipo um espaço livre igual à altura da peça teal do K.
- Logotipo horizontal: no mínimo 120 px de largura.
- Símbolo: no mínimo 24 px. Abaixo de 64 px, use o favicon.svg.
Uso correto
Faça Logotipo original sobre grafite
Faça Versão clara sobre gelo
Não faça Não estique nem distorça
Não faça Não gire
Não faça Não mude as cores
Não faça Não aplique sombras nem efeitos
Não faça Não use sobre fundos poluídos
- Não mude as cores do logotipo nem do símbolo.
- Não estique, distorça ou gire.
- Não aplique sombras, contornos, brilhos ou outros efeitos.
- Não use sobre fundos com muita informação ou pouco contraste.
- Não separe a peça teal do K nem mude a sua posição.
Downloads
- Logotipo, para fundos escuroslogo-on-dark.svg
- Logotipo, para fundos claroslogo-on-light.svg
- Logotipo alternativo, fundos escuroslogo-alt-on-dark.svg
- Logotipo alternativo, fundos claroslogo-alt-on-light.svg
- Logotipo empilhado, fundos escuroslogo-stacked-on-dark.svg
- Logotipo empilhado, fundos claroslogo-stacked-on-light.svg
- Logotipo em uma cor, brancologo-mono-white.svg
- Logotipo em uma cor, grafitelogo-mono-graphite.svg
- Logotipo em uma cor (currentColor, para código)logo-mono.svg
- Símbolo, fundos escurossymbol-on-dark.svg
- Símbolo, fundos clarossymbol-on-light.svg
- Símbolo em uma corsymbol-mono.svg
- Ícone de aplicativoapp-icon.svg
- Favicon (abaixo de 64 px)favicon.svg
