Marca zforgehq
O z-ui é um produto da zforgehq. A marca da organização aparece na logo e convive com a identidade do z-ui, sem substituir a tinta de ação nem o lacre de certificação.
Logo
Versão clara sobre fundo claro e escura sobre fundo escuro, nos dois temas.
Ícone
Favicon, avatar e ícone de app. O fundo carvão já vem no arquivo.
64px32px16pxCores da marca
Cada cor da identidade foi mapeada para a primitiva mais próxima do z-ui por ΔE OK. Nenhuma cor nova foi criada.
| Cor da identidade | Papel | Primitiva do z-ui | Semântico equivalente |
|---|---|---|---|
| Burnt Copper | O Z do símbolo, nos dois tons | warning-500 | Nenhum. Fica só nos arquivos da logo |
| Amber Glow | A faísca, decorativa | warning-350 | Nenhum. Fica só nos arquivos da logo |
| Charcoal Core | Fundo do ícone e wordmark sobre claro | neutral-900 | bg-bg-surface no escuro |
| Forged Steel | Superfície escura | neutral-850 | bg-bg-muted e bg-bg-elevated no escuro |
| Sheet Metal | Fundo claro e wordmark sobre escuro | neutral-100 | bg-bg-muted no claro |
| Muted Slate | Texto secundário, só como amostra | neutral-500 | Em texto, use text-fg-subtle |
Tipografia
Nenhuma fonte nova é carregada.
| Papel | Na identidade | No z-ui |
|---|---|---|
| Wordmark e títulos | Chakra Petch | Não é carregada. O wordmark está em curvas e os títulos seguem na fonte da interface (text-page-title, text-display-*) |
| Interface e texto | Inter | Inter, a mesma da identidade (--font-family-sans); Onest como alternativa com data-font="onest" |
| Código e dados | JetBrains Mono | JetBrains Mono (text-data-*) |
Uso correto
- O laranja da marca só aparece na logo. Botões, links, textos, badges e fundos seguem os semânticos do z-ui.
- bg-bg-warning, text-fg-warning e border-border-warning significam atenção. Não servem para dar cara de zforgehq.
- Deixe ao redor da logo um espaço livre igual a metade da altura do símbolo.
- A logo horizontal precisa de pelo menos 24px de altura. Abaixo de 32px, prefira só o símbolo.
- Use a versão clara sobre fundo claro e a escura sobre fundo escuro. Dentro de ilhas .theme-light e .theme-dark, passe o tone.
- Não estique, não gire, não troque cores, não aplique sombra, contorno ou gradiente e não separe a faísca do Z.
- Não recomponha o wordmark com outra fonte. Em texto corrido, escreva zforgehq em minúsculas, com a tipografia do contexto.
Arquivos
Servidos em /brand. O brand board de referência não entra em interface.
| Arquivo | O que é | Quando usar |
|---|---|---|
| zforgehq-logo-light.svg | Logo horizontal, 302×64 | Fundo claro |
| zforgehq-logo-dark.svg | Logo horizontal, 302×64 | Fundo escuro |
| zforgehq-logo-mono.svg | Logo horizontal em currentColor | Uma cor só, inline no SVG |
| zforgehq-symbol-light.svg | Símbolo, 64×64 | Espaço pequeno, fundo claro |
| zforgehq-symbol-dark.svg | Símbolo, 64×64 | Espaço pequeno, fundo escuro |
| zforgehq-symbol-mono.svg | Símbolo em currentColor | Uma cor só, inline no SVG |
| zforgehq-icon.svg | Ícone de app | Favicon, avatar, PWA |
| zforgehq-icon-512.png | Ícone 512×512 | Manifest e redes sociais |
| zforgehq-icon-192.png | Ícone 192×192 | Manifest |
| zforgehq-icon-32.png | Ícone 32×32 | Onde SVG não é aceito |
| apple-icon.png | Ícone 180×180 | iOS |
