DESIGN SYSTEM · V1.0
MARTIAL ARTS MARKETING
FUNDAMENTOS
Logo, cores, tipografia e espaçamento da COMODORO. A base visual para o site e para as
artes de Instagram: minimalista, de contraste alto e com pontas afiadas.
01
Logo
O ícone une a rosa dos ventos (direção e estratégia) à faixa amarrada com barra vermelha
(disciplina e graduação). O logotipo usa Jost com espaçamento largo. A barra vermelha é
o único ponto de cor.
Vertical
Uso principal. Fundo claro.
Ícone
Avatar, favicon, selo.
Horizontal
Header do site e rodapés de arte.
Horizontal negativo
Fundo preto. Barra segue vermelha.
Vertical negativo
Modo escuro e stories.
Ícone negativo
Fundo preto.
ÁREA DE PROTEÇÃO
Respeite uma margem mínima de 40 px (5 × 8) ao redor do logo. Nenhum texto, borda ou
imagem entra nessa área.
TAMANHO MÍNIMO
24 px
32 px
48 px
120 px
Ícone: 24 px. Logo horizontal: 120 px de largura. Abaixo disso, use só o ícone.
USOS INCORRETOS
Não distorcer nem girar o logo.
Não recolorir. O vermelho vive só na barra.
Não aplicar sombra, gradiente ou contorno.
Não usar sobre fotos sem contraste.
Não redesenhar nem trocar a tipografia.
Mantenha as proporções originais e use apenas as versões oficiais.
02
Cores
Preto e branco carregam a marca. O vermelho aparece como detalhe, como a barra da faixa:
CTAs, marcadores e destaques. Em uma peça, ele ocupa no máximo cerca de 5% da área.
PRETO
#111111
ink · primária
Texto, logo, botões primários, fundo escuro.
BRANCO
#FFFFFF
paper · fundo
Fundo padrão do modo claro.
OFF-WHITE
#F5F5F3
gray-50 · seções
Seções alternadas, cards, fundos de feed.
VERMELHO
#B3202A
accent · destaque
CTAs, barra, marcadores. Texto sempre branco.
ESCALA DE NEUTROS
50
#F5F5F3
100
#EBEBE8
200
#D9D9D6
300
#BDBDB9
400
#9A9A96
500
#75756F
600
#5A5A55
700
#3F3F3B
800
#272724
900
#111111
Bordas: 200 · Texto secundário: 600 · Placeholders: 500 · Fundo de modo escuro em cards:
#1A1A1A
PROPORÇÃO DE USO
Branco 55%
Off-white 25%
Preto 17%
Vermelho 3%
CONTRASTE (WCAG)
Aa
Preto sobre branco
18,9 : 1 AAA
Aa
Branco sobre preto
18,9 : 1 AAA
Aa
Branco sobre vermelho
6,7 : 1 AA
Aa
Cinza 600 sobre branco
7,0 : 1 AAA
Aa
Vermelho sobre preto
2,8 : 1 só gráfico
https://app.kosmi.io/room/@vitorgabrie1f
https://app.kosmi.io/room/@vitorgabrie1f
03
Tipografia
Jost, uma geométrica no estilo Futura, dá a voz da marca em títulos e chamadas. Inter
garante leitura limpa em textos corridos, formulários e legendas.
DISPLAY E TÍTULOS
500 · 600
Aa
Jost
Espaçamento largo no display (0,2 em). Títulos em semibold.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
CORPO E INTERFACE
400 · 500 · 600
Aa
Inter
Textos, legendas, formulários e rótulos pequenos.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Display
Jost 500 · 72 / 80 · +0,2 em · MAIÚSCULAS
MAIS ALUNOS
H1
Jost 600 · 48 / 56 · +0,01 em
Sua academia cheia
H2
Jost 600 · 40 / 48
Vídeo que enche o tatame
H3
Jost 600 · 32 / 40
Fotografia de graduação
H4
Jost 600 · 24 / 32
Tráfego pago com direção
H5
Jost 600 · 20 / 28
Diagnóstico gratuito
H6
Jost 600 · 16 / 24 · +0,12 em · MAIÚSCULAS
SERVIÇOS
Corpo grande
Inter 400 · 18 / 28
Ajudamos donos de academias de artes marciais a atrair alunos com conteúdo e anúncios.
Corpo
Inter 400 · 16 / 24
Ajudamos donos de academias de artes marciais a atrair alunos com conteúdo e anúncios.
Corpo pequeno
Inter 400 · 14 / 20
Ajudamos donos de academias de artes marciais a atrair alunos com conteúdo e anúncios.
Legenda
Inter 500 · 12 / 16 · +0,04 em
Jiu-Jitsu · Muay Thai · Boxe · Judô · MMA
Botão
Jost 600 · 14 / 16 · +0,16 em · MAIÚSCULAS
QUERO MEU DIAGNÓSTICO
04
Espaçamento e formas
Tudo parte de uma base de 8 px. Cantos retos ou quase retos (0 a 2 px), bordas finas de
1 px e nenhum gradiente.
ESCALA (BASE 8 PX)
space-1
4 px
Ajustes finos, ícone e texto
space-2
8 px
Entre elementos próximos
space-3
16 px
Padding de botões e campos
space-4
24 px
Padding de cards, gap de grids
space-5
32 px
Entre blocos
space-6
48 px
Entre grupos de conteúdo
space-7
64 px
Padding de seção (mobile)
space-8
96 px
Padding de seção (desktop)
space-9
128 px
Respiro de hero
RAIOS E BORDAS
radius-0
radius-1 · 1 px
radius-2 · 2 px
borda forte · 2 px
GRADE
Desktop 1440: 12 colunas · gutter 24 px · margem 80 px
Mobile 390: 4 colunas · gutter 16 px · margem 24 px
Instagram: feed 1080 × 1350 e stories 1080 × 1920, com margem de 80 px. Em stories,
mantenha 250 px livres no topo e na base para a interface.
05
Recursos gráficos
As pontas da rosa dos ventos e a barra vermelha são os únicos ornamentos: divisores,
marcadores e destaques. Sempre linhas finas, retas e sem gradiente.
DIVISOR COM PONTA
Linha de 1 px com uma ponta de rosa dos ventos no centro.
Captação de vídeo
Fotografia
Tráfego pago
MARCADOR
Ponta pequena como bullet de listas e itens de serviço.
Direção e disciplina
BARRA DE DESTAQUE
Barra vermelha sobre títulos e números-chave. Uma por composição.
PONTAS DE CANTO
Quatro pontas finas marcam o enquadramento em artes e vídeos.
06
Modo escuro
O modo claro é o padrão. No escuro, o fundo é preto (#111111), texto e logo ficam
brancos e o vermelho segue como único acento.
TOKEN
CLARO
ESCURO
USO
bg
#FFFFFF
#111111
Fundo da página
surface
#F5F5F3
#1A1A1A
Seções alternadas, cards
fg
#111111
#FFFFFF
Texto e ícones
fg-muted
#5A5A55
#A8A8A3
Texto secundário
border
#D9D9D6
#333333
Linhas e bordas
accent
#B3202A
#B3202A
Destaque, igual nos dois modos