# Marca ArduMaker: logos, cores e tipografia

> A identidade visual oficial da ArduMaker: logos para baixar, cores em HEX, RGB e HSL, tipografia, componentes, uso correto e diretrizes de vídeo do Started.

https://ardumaker.com/pt/branding/ · https://ardumaker.com/branding/marca.json · 2026-10-16

## O que é a ArduMaker

Infraestrutura que pessoas e agentes de IA podem operar: servidores com root real, deploys, domínios, e-mail e projetos, a partir de um painel simples ou por MCP.

### Personalidade

- Prática: o essencial se entende num relance.
- Honesta: diz o que faz, o que não faz e quando outra opção convém mais.
- Técnica sem ser fria: root, SSH e logs, explicados para qualquer pessoa.

### Tom

- Direto e em segunda pessoa: «o seu servidor», «crie a sua conta».
- Frases curtas, verbos concretos, sem adjetivos de enchimento.
- Números e limites são ditos: preço, localização, o que falta.

### Estilo visual

- Superfícies limpas, bastante respiro e um único azul de destaque.
- O degradê azul, ciano e verde só no que se quer destacar.
- Movimento curto e com propósito: nada se mexe para enfeitar.

## Logos

Os arquivos oficiais que o site usa hoje. Vistos sobre fundo claro e escuro, no tamanho real.

| Logos | URL | Formato | Tamanho | Fundo recomendado |
| --- | --- | --- | --- | --- |
| Símbolo | https://ardumaker.com/logo.png | PNG | 512 × 512 px | Claro, Escuro |
| Favicon | https://ardumaker.com/favicon.ico | ICO | 256 × 256 px | Claro, Escuro |
| Imagem para compartilhar (espanhol) | https://ardumaker.com/og-image.jpg | JPG | 1200 × 630 px | Escuro |
| Imagem para compartilhar (inglês) | https://ardumaker.com/og-image-en.jpg | JPG | 1200 × 630 px | Escuro |
| Imagem para compartilhar (português) | https://ardumaker.com/og-image-pt.jpg | JPG | 1200 × 630 px | Escuro |

### Variantes pendentes

Ainda não existem como arquivo oficial. Não se desenham à mão nem se decalcam do PNG: quando estiverem prontas, são publicadas aqui.

- Símbolo em vetor (SVG): Pendente
- Logo horizontal: Pendente
- Logo vertical: Pendente
- Monocromático: Pendente
- Negativo: Pendente

### Cores do símbolo

Medidas do PNG oficial. São do logo, não da interface: não coincidir com os tokens é intencional, e não são usadas em botões nem textos.

- Amarelo: `#FFC837` · `rgb(255, 200, 55)`
- Vermelho: `#FF0546` · `rgb(255, 5, 70)`
- Verde: `#41B93C` · `rgb(65, 185, 60)`
- Azul: `#00A8EF` · `rgb(0, 168, 239)`
- Cinza: `#C3C3C3` · `rgb(195, 195, 195)`
- Branco: `#FFFFFF` · `rgb(255, 255, 255)`

## Cores

Os tokens da interface, com o valor no tema claro e no tema escuro. No código usa-se sempre o token, nunca o valor solto.

### Marca

| Token | Classe do Tailwind | Claro | Escuro |
| --- | --- | --- | --- |
| `--brand` | `brand` | `#006EFF` · `rgb(0, 110, 255)` · `hsl(214 100% 50%)` | `#006EFF` · `rgb(0, 110, 255)` · `hsl(214 100% 50%)` |
| `--brand-foreground` | `brand-foreground` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` |
| `--primary` | `primary` | `#006EFF` · `rgb(0, 110, 255)` · `hsl(214 100% 50%)` | `#2986FF` · `rgb(41, 134, 255)` · `hsl(214 100% 58%)` |
| `--primary-glow` | — | `#338BFF` · `rgb(51, 139, 255)` · `hsl(214 100% 60%)` | `#66A8FF` · `rgb(102, 168, 255)` · `hsl(214 100% 70%)` |
| `--info` | `info` | `#006EFF` · `rgb(0, 110, 255)` · `hsl(214 100% 50%)` | `#4D9AFF` · `rgb(77, 154, 255)` · `hsl(214 100% 65%)` |
| `--info-strong` | `info-strong` | `#2463EB` · `rgb(36, 99, 235)` · `hsl(221 83% 53%)` | `#4E81EF` · `rgb(78, 129, 239)` · `hsl(221 83% 62%)` |

### Superfícies e texto

| Token | Classe do Tailwind | Claro | Escuro |
| --- | --- | --- | --- |
| `--background` | `background` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` | `#151619` · `rgb(21, 22, 25)` · `hsl(220 8% 9%)` |
| `--foreground` | `foreground` | `#020817` · `rgb(2, 8, 23)` · `hsl(222.2 84% 4.9%)` | `#F5F5F5` · `rgb(245, 245, 245)` · `hsl(0 0% 96%)` |
| `--card` | `card` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` | `#212326` · `rgb(33, 35, 38)` · `hsl(220 7% 14%)` |
| `--popover` | `popover` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` | `#26282C` · `rgb(38, 40, 44)` · `hsl(220 7% 16%)` |
| `--secondary` | `secondary` | `#F5F4F5` · `rgb(245, 244, 245)` · `hsl(260 4% 96%)` | `#2D2F34` · `rgb(45, 47, 52)` · `hsl(220 7% 19%)` |
| `--muted` | `muted` | `#EFEFF0` · `rgb(239, 239, 240)` · `hsl(260 4% 94%)` | `#1C1E21` · `rgb(28, 30, 33)` · `hsl(220 7% 12%)` |
| `--muted-foreground` | `muted-foreground` | `#65758B` · `rgb(101, 117, 139)` · `hsl(215 16% 47%)` | `#AFB1B6` · `rgb(175, 177, 182)` · `hsl(220 5% 70%)` |
| `--accent` | `accent` | `#E1E7EF` · `rgb(225, 231, 239)` · `hsl(214 32% 91%)` | `#34373C` · `rgb(52, 55, 60)` · `hsl(220 7% 22%)` |
| `--border` | `border` | `#E2E8F0` · `rgb(226, 232, 240)` · `hsl(214.3 31.8% 91.4%)` | `#4B4F58` · `rgb(75, 79, 88)` · `hsl(220 8% 32%)` |
| `--input` | `input` | `#E2E8F0` · `rgb(226, 232, 240)` · `hsl(214.3 31.8% 91.4%)` | `#42464C` · `rgb(66, 70, 76)` · `hsl(220 7% 28%)` |
| `--ring` | `ring` | `#020817` · `rgb(2, 8, 23)` · `hsl(222.2 84% 4.9%)` | `#2986FF` · `rgb(41, 134, 255)` · `hsl(214 100% 58%)` |

### Estados

| Token | Classe do Tailwind | Claro | Escuro |
| --- | --- | --- | --- |
| `--success` | `success` | `#21C45D` · `rgb(33, 196, 93)` · `hsl(142 71% 45%)` | `#2DD269` · `rgb(45, 210, 105)` · `hsl(142 65% 50%)` |
| `--success-strong` | `success-strong` | `#16A249` · `rgb(22, 162, 73)` · `hsl(142 76% 36%)` | `#25D064` · `rgb(37, 208, 100)` · `hsl(142 70% 48%)` |
| `--warning` | `warning` | `#F59F0A` · `rgb(245, 159, 10)` · `hsl(38 92% 50%)` | `#F7B23B` · `rgb(247, 178, 59)` · `hsl(38 92% 60%)` |
| `--warning-strong` | `warning-strong` | `#DB7706` · `rgb(219, 119, 6)` · `hsl(32 95% 44%)` | `#F98C10` · `rgb(249, 140, 16)` · `hsl(32 95% 52%)` |
| `--destructive` | `destructive` | `#EF4444` · `rgb(239, 68, 68)` · `hsl(0 84.2% 60.2%)` | `#F26363` · `rgb(242, 99, 99)` · `hsl(0 85% 67%)` |
| `--destructive-strong` | `destructive-strong` | `#DC2828` · `rgb(220, 40, 40)` · `hsl(0 72% 51%)` | `#F47B7B` · `rgb(244, 123, 123)` · `hsl(0 85% 72%)` |

### Serviços

| Token | Classe do Tailwind | Claro | Escuro |
| --- | --- | --- | --- |
| `--service-cloud` | `service-cloud` | `#3C83F6` · `rgb(60, 131, 246)` · `hsl(217 91% 60%)` | `#639CF8` · `rgb(99, 156, 248)` · `hsl(217 91% 68%)` |
| `--service-whatsapp` | `service-whatsapp` | `#21C45D` · `rgb(33, 196, 93)` · `hsl(142 71% 45%)` | `#35D46F` · `rgb(53, 212, 111)` · `hsl(142 65% 52%)` |
| `--service-router` | `service-router` | `#895AF6` · `rgb(137, 90, 246)` · `hsl(258 90% 66%)` | `#A581F8` · `rgb(165, 129, 248)` · `hsl(258 90% 74%)` |
| `--service-email` | `service-email` | `#14B8A5` · `rgb(20, 184, 165)` · `hsl(173 80% 40%)` | `#25D0BC` · `rgb(37, 208, 188)` · `hsl(173 70% 48%)` |
| `--service-search` | `service-search` | `#EC4699` · `rgb(236, 70, 153)` · `hsl(330 81% 60%)` | `#EF6BAD` · `rgb(239, 107, 173)` · `hsl(330 81% 68%)` |
| `--service-domains` | `service-domains` | `#F59F0A` · `rgb(245, 159, 10)` · `hsl(38 92% 50%)` | `#F6AE31` · `rgb(246, 174, 49)` · `hsl(38 92% 58%)` |
| `--service-mcp` | `service-mcp` | `#6467F2` · `rgb(100, 103, 242)` · `hsl(239 84% 67%)` | `#7C7EF4` · `rgb(124, 126, 244)` · `hsl(239 84% 72%)` |

### Rodapé e terminal

| Token | Classe do Tailwind | Claro | Escuro |
| --- | --- | --- | --- |
| `--footer` | `footer` | `#1A212D` · `rgb(26, 33, 45)` · `hsl(220 26% 14%)` | `#0E0F11` · `rgb(14, 15, 17)` · `hsl(220 10% 6%)` |
| `--footer-foreground` | `footer-foreground` | `#FFFFFF` · `rgb(255, 255, 255)` · `hsl(0 0% 100%)` | `#F5F5F5` · `rgb(245, 245, 245)` · `hsl(0 0% 96%)` |
| `--terminal` | `terminal` | `#09090B` · `rgb(9, 9, 11)` · `hsl(240 10% 4%)` | `#09090B` · `rgb(9, 9, 11)` · `hsl(240 10% 4%)` |
| `--terminal-foreground` | `terminal-foreground` | `#E0E0E0` · `rgb(224, 224, 224)` · `hsl(0 0% 88%)` | `#E0E0E0` · `rgb(224, 224, 224)` · `hsl(0 0% 88%)` |
| `--terminal-accent` | `terminal-accent` | `#21C45D` · `rgb(33, 196, 93)` · `hsl(142 71% 45%)` | `#21C45D` · `rgb(33, 196, 93)` · `hsl(142 71% 45%)` |

## Tipografia

A ArduMaker usa a tipografia do sistema de cada dispositivo: lê-se nítida, carrega na hora e não abre conexões com terceiros.

### Sans do sistema

Todo o texto da interface. `font-sans`: `ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`

- [SF Pro](https://developer.apple.com/fonts/) (macOS · iOS)
- [Segoe UI](https://learn.microsoft.com/en-us/typography/font-list/segoe-ui) (Windows)
- [Roboto](https://fonts.google.com/specimen/Roboto) (Android · ChromeOS)

### Monoespaçada do sistema

Código, comandos, caminhos, tokens e valores. `font-mono`: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace`

- [SF Mono](https://developer.apple.com/fonts/) (macOS)
- [Consolas](https://learn.microsoft.com/en-us/typography/font-list/consolas) (Windows)

Não se distribuem arquivos de fontes: cada uma pertence ao seu fabricante e é baixada do site oficial.

### Hierarquia

|  | px | Tailwind |
| --- | --- | --- |
| h1 | 44 / 48 / 72 px | `text-[2.75rem] font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-7xl` |
| h2 | 30 / 36 px | `text-3xl font-bold tracking-tight sm:text-4xl` |
| h3 | 18 px | `text-lg font-semibold` |
| p | 18 px | `text-lg text-muted-foreground` |
| p | 16 px | `text-base` |
| p | 14 px | `text-sm text-muted-foreground` |
| span | 12 px | `text-xs font-semibold` |
| code | 14 px | `font-mono text-sm` |

## Componentes

### Raios

- `rounded-sm`: 4px
- `rounded-md`: 6px
- `rounded-lg`: 8px
- `rounded-xl`: 12px
- `rounded-2xl`: 16px
- `rounded-full`: 9999px

### Sombras

- `shadow-sm`: Cartões em repouso. `0 1px 2px 0 rgb(0 0 0 / 0.05)`
- `shadow-md`: O que flutua sobre a página. `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
- `shadow-lg`: A ação principal do hero e o logo da barra. `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`

### Movimento

Duas curvas e durações curtas. Só se animam transform, opacity e clip-path, e com «reduzir movimento» não há animação.

- `SALIDA` `cubic-bezier(0.23, 1, 0.32, 1)`: Entradas e hover: arranca rápido e freia suave.
- `TRASLADO` `cubic-bezier(0.77, 0, 0.175, 1)`: O que atravessa a tela: acelera e freia.
- Mudança de cor: 150 ms
- Pressão, giro e menus: 200 ms
- Mudança de vista: 180 ms
- Mudança de página: 220 ms
- Lista em cascata: 320 ms
- Aparecer ao rolar: 400 ms
- Janela: abrir: 520 ms
- Janela: fechar: 440 ms

## Uso correto e incorreto

Com o logo real. Se uma aplicação não está aqui, a regra é simples: o símbolo é usado inteiro, nítido e sem mudanças.

- Espaço mínimo: Ao redor do símbolo fica livre pelo menos um quarto do seu diâmetro. Tamanho mínimo na tela: 24 px.
- Contraste e fundos: O disco branco o separa de qualquer fundo liso, claro ou escuro. Sobre fotos com muito detalhe, vai sobre uma placa lisa.
- Alterações a evitar: Esticá-lo ou achatá-lo; Girá-lo; Mudar as suas cores; Adicionar sombras ou efeitos; Cortar o disco; Colocá-lo sobre um fundo carregado.
- O nome: Uma só palavra, com A e M maiúsculos. Não se traduz nem se separa. «ArduMaker Developer» é um sinônimo válido da mesma marca. (Assim não: Ardumaker · ARDUMAKER · Ardu Maker · ardu-maker)

## Identidade audiovisual do Started

O Started ensina a ArduMaker com vídeos curtos. Estas são as diretrizes comuns; cada vídeo monta o seu próprio roteiro.

> Ensina-se com um problema real e a sua solução, não com anúncios. Não há um roteiro único: há uma ordem que ajuda.

- Formato: 9:16 · 1080 × 1920 px
- Duração: Até 60 s
- Arquivo: MP4 · H.264 + AAC
- Legendas: WebVTT
- Miniatura: JPG 1080 × 1920
- Zona segura: 220 / 420 / 60 px

- **Estética**: Elegante e tecnológica: o fundo escuro do tema, telas reais do produto e o azul como único destaque.
- **Tipografia**: A sans do sistema em negrito e com pouco espaçamento entre letras nos títulos; a monoespaçada para comandos e código.
- **Legendas**: Sempre, no idioma do vídeo. Seminegrito, no máximo duas linhas, sobre uma placa escura e dentro da zona segura.
- **Movimento**: As mesmas curvas da interface. Cortes limpos, zoom suave no que importa; nada de transições de modelo.
- **Música**: De fundo e baixa, com licença de uso. Nunca cobre a voz.
- **Narração**: Voz humana e natural, como quem explica algo a um colega. Sem voz robótica nem tom de locutor.
- **Cores**: Os tokens desta página. O degradê azul, ciano e verde só para a palavra que se quer destacar.
- **Miniaturas**: Uma captura real e o problema em poucas palavras. Sem setas vermelhas nem caras de surpresa.
- **Logo**: O símbolo inteiro, pequeno, no fechamento. Não é animado, não é deformado e não vai por cima da tela do produto.
- **Fechamento educativo**: O que se aprendeu numa frase e onde continuar: a documentação do tema em /docs.

### Uma ordem que ajuda

1. O problema, numa frase.
2. A solução, na tela real.
3. O resultado que se vê.
4. O que você leva e onde continuar.