A marca ArduMaker

Logos, cores, tipografia e regras de uso, tal como estão no produto. Para quem escreve, desenha, grava ou programa sobre a ArduMaker.

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.

Símbolo: O logo principal: disco branco com o anel de quatro cores e o infinito. Para avatares, a barra do site e documentos. (PNG · 512 × 512 px · Claro, Escuro) Baixar

Favicon: O ícone da aba do navegador. (ICO · 256 × 256 px · Claro, Escuro) Baixar

**Imagem para compartilhar (espanhol)**: A prévia no WhatsApp, LinkedIn, X e buscadores das páginas em espanhol: o logo, o título da página inicial e ardumaker.com sobre o fundo escuro. (JPG · 1200 × 630 px · Escuro) Baixar

**Imagem para compartilhar (inglês)**: A mesma prévia para as páginas em inglês. (JPG · 1200 × 630 px · Escuro) Baixar

**Imagem para compartilhar (português)**: A mesma prévia para as páginas em português. (JPG · 1200 × 630 px · Escuro) Baixar

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): O original escalável para impressão e tamanhos grandes.
Logo horizontal: Símbolo e nome numa linha, para cabeçalhos e assinaturas.
Logo vertical: Símbolo em cima e nome embaixo, para espaços quadrados.
Monocromático: Uma só tinta, para carimbos, gravações e fundos coloridos.
Negativo: Para fundos escuros sem o disco branco.

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. ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" — SF Pro, Segoe UI, Roboto
Monoespaçada do sistema: Código, comandos, caminhos, tokens e valores. ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace — SF Mono, Consolas

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

Hierarquia

Servidores para agentes (h1, 44 / 48 / 72 px) text-[2.75rem] font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-7xl
Tudo num painel (h2, 30 / 36 px) text-3xl font-bold tracking-tight sm:text-4xl
Deploy a partir do GitHub (h3, 18 px) text-lg font-semibold
Root real, NVMe e domínio com HTTPS. (p, 18 px) text-lg text-muted-foreground
Conecte um repositório e cada push atualiza a app. (p, 16 px) text-base
Último deploy há 2 minutos. (p, 14 px) text-sm text-muted-foreground
Grátis (span, 12 px) text-xs font-semibold
claude mcp add --transport http ardumaker (code, 14 px) font-mono text-sm

Componentes

As peças reais da interface, as mesmas que o painel usa. Pode tocá-las.

Raios

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

Sombras

shadow-sm: Cartões em repouso.
shadow-md: O que flutua sobre a página.
shadow-lg: A ação principal do hero e o logo da barra.

Movimento

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

cubic-bezier(0.23, 1, 0.32, 1): Entradas e hover: arranca rápido e freia suave.
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.
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)

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

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

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

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

Downloads

Tudo o que está disponível hoje, para baixar um a um. O guia completo também vem em JSON e em Markdown.

Recursos para agentes de IA

Um agente que monte uma apresentação, um vídeo ou uma página sobre a ArduMaker pode ler a marca inteira a partir destes arquivos. Saem da mesma fonte que esta página.

https://ardumaker.com/branding/marca.json: Tokens, logos com a sua URL, regras de uso e diretrizes audiovisuais, nos três idiomas.
https://ardumaker.com/pt/branding/marca.md: O mesmo guia em Markdown, pronto para colar num contexto.
https://ardumaker.com/llms.txt: O índice do site para agentes.