Identidade
Marca <gcruz.dev/>
A marca é 100% tipográfica em JetBrains Mono. Estes SVGs são os
contornos dos glifos convertidos em <path> — não
dependem de fonte instalada, não usam <text> (que a
API de ícones proíbe e o GitHub sanitiza) e preservam a proporção
original.
A abreviação da marca é gc, nunca g
isolado: a variante compacta é <gc/> e o monograma é
gc.
Tokens
As mesmas variáveis que o site inteiro usa, definidas em
site/css/tokens.css.
| Camada | Token | Escuro | Claro |
|---|---|---|---|
| Fundo | --bg |
#040710 |
#f2f4f8 |
| Brackets | --brand |
#f43f5e |
#be123c |
| Nome | --text-1 |
#f8fafc |
#0f172a |
Sufixo .dev |
--accent |
#818cf8 |
#4f46e5 |
| Fundo dos badges | --on-brand |
#070d19 |
#f2f4f8 |
Contraste dos brackets sobre o fundo: 5,29:1 no escuro e 5,71:1 no
claro — AA nos dois. Peso 700 até 32px, 600 acima de 40px. Abaixo de
24px o sufixo .dev perde a separação de cor: use a
variante compacta.
01 — Temas
A marca existe em duas variantes de cor, não em duas marcas. O que
muda é o ground onde ela assenta: -dark traz o nome em
slate-50, -light em slate-900. Escolha pelo fundo, não
pelo tema do site.
- fundo
#070d19- brackets
#f43f5e· 5,29:1 AA- nome
#f8fafc- sufixo
.dev #818cf8
- fundo
#f2f4f8- brackets
#be123c· 5,71:1 AA- nome
#0f172a- sufixo
.dev #4f46e5
02 — Escala
Progressão de 96 a 16px, peso 700 em toda ela. O ponto crítico fica
entre 24 e 16px: em 16px os brackets ainda se
distinguem, mas o sufixo .dev perde a separação de cor.
Abaixo de 24px, a peça certa é a compacta.
03 — Compacta <gc/>
Onde o lockup completo não cabe. A abreviação da marca é
gc, nunca g isolado — a compacta é
<gc/> e o monograma é gc.
Em 16×16 os brackets viram sugestão de forma — aceitável para favicon,
onde o que ancora a leitura é o gc. Abaixo disso, use o
monograma sozinho.
04 — Pesos
700 até 32px, 600 acima de 40px. No display grande o
700 começa a fechar os olhos do g.
fino demais para marca
neutro, pouco assertivo
equilíbrio em tamanho grande
máxima presença em header e favicon
05 — Contexto de aplicação
Onde cada variante entra, com o tamanho real de cada uso.
Header de site — 20px de altura
Início · Projetos · Contato
O lockup completo, peso 700.
Favicon — 16 e 32px
A compacta, com fundo próprio.
Avatar — 64px
O monograma: o que sobrevive ao círculo de avatar.
Badge da API — 48px, ao lado de outros
É o tamanho em que o endpoint renderiza cada ícone.
Diretrizes
O que a marca precisa para funcionar, e o que a quebra.
Área de respiro
Reserve, em volta do lockup, o equivalente à altura do bracket
<. É a medida que vem da própria marca, então escala
junto com ela em qualquer tamanho.
Tamanho mínimo
| Variante | Mínimo | Por quê |
|---|---|---|
wordmark | 24px de altura | abaixo disso o sufixo .dev perde a separação de cor |
compact <gc/> | 24px | abaixo disso os brackets viram sugestão de forma |
gc monograma | 16px | é a peça que ainda lê em favicon |
badge ?i=gcruz | 48px | é o tamanho em que o endpoint renderiza |
O que não fazer
Não recolorir. Os três papéis de cor — bracket, nome, sufixo — carregam a leitura.
Não distorcer. A marca é monoespaçada; esticar quebra o ritmo que a define.
Não aplicar sombra. Nenhum ícone do conjunto usa sombra; a marca não abre exceção.
Não usar g isolado. A abreviação é gc. A compacta é <gc/>.
Variações
Fundo transparente, exceto onde indicado. Clique em qualquer peça
para copiar o SVG. O sufixo -dark traz o nome em
slate-50 e -light em slate-900 — escolha pelo fundo
onde o logo vai assentar, não pelo tema do site.