La marca ArduMaker

Logos, colores, tipografía y reglas de uso, tal como están en el producto. Para quien escribe, diseña, graba o programa sobre ArduMaker.

Qué es ArduMaker

Infraestructura que pueden operar personas y agentes de IA: servidores con root real, deploys, dominios, correo y proyectos, desde un panel simple o por MCP.

Personalidad

Práctica: lo esencial se entiende en una mirada.
Honesta: dice lo que hace, lo que no y cuándo conviene otra opción.
Técnica sin ser fría: root, SSH y logs, explicados para cualquiera.

Tono

Directo y en segunda persona: «tu servidor», «crea tu cuenta».
Frases cortas, verbos concretos, sin adjetivos de relleno.
Los números y los límites se dicen: precio, ubicación, lo que falta.

Estilo visual

Superficies limpias, mucho aire y un solo azul de acento.
El degradado azul, celeste y verde solo en lo que se quiere destacar.
Movimiento corto y con propósito: nada se mueve para adornar.

Logos

Los archivos oficiales que hoy usa el sitio. Vistos sobre fondo claro y oscuro, con su tamaño real.

Símbolo: El logo principal: disco blanco con el anillo de cuatro colores y el infinito. Para avatares, la barra del sitio y documentos. (PNG · 512 × 512 px · Claro, Oscuro) Descargar

Favicon: El ícono de la pestaña del navegador. (ICO · 256 × 256 px · Claro, Oscuro) Descargar

**Imagen para compartir (castellano)**: La vista previa en WhatsApp, LinkedIn, X y buscadores de las páginas en castellano: el logo, el título de la portada y ardumaker.com sobre el fondo oscuro. (JPG · 1200 × 630 px · Oscuro) Descargar

**Imagen para compartir (inglés)**: La misma vista previa para las páginas en inglés. (JPG · 1200 × 630 px · Oscuro) Descargar

**Imagen para compartir (portugués)**: La misma vista previa para las páginas en portugués. (JPG · 1200 × 630 px · Oscuro) Descargar

Variantes pendientes

Todavía no existen como archivo oficial. No se dibujan a mano ni se calcan del PNG: cuando estén, se publican acá.

Símbolo en vector (SVG): El original escalable para imprenta y tamaños grandes.
Logo horizontal: Símbolo y nombre en una línea, para cabeceras y firmas.
Logo vertical: Símbolo arriba y nombre debajo, para espacios cuadrados.
Monocromo: Una sola tinta, para sellos, grabados y fondos con color.
Negativo: Para fondos oscuros sin el disco blanco.

Colores del símbolo

Medidos del PNG oficial. Son del logo, no de la interfaz: que no coincidan con los tokens es intencional, y no se usan para botones ni textos.

Amarillo: #FFC837 rgb(255, 200, 55)
Rojo: #FF0546 rgb(255, 5, 70)
Verde: #41B93C rgb(65, 185, 60)
Azul: #00A8EF rgb(0, 168, 239)
Gris: #C3C3C3 rgb(195, 195, 195)
Blanco: #FFFFFF rgb(255, 255, 255)

Colores

Los tokens de la interfaz, con su valor en tema claro y en tema oscuro. En código se usa siempre el token, nunca el valor suelto.

Marca

Token	Clase de Tailwind	Claro	Oscuro
`--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%)`

Superficies y texto

Token	Clase de Tailwind	Claro	Oscuro
`--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	Clase de Tailwind	Claro	Oscuro
`--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%)`

Servicios

Token	Clase de Tailwind	Claro	Oscuro
`--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%)`

Pie y terminal

Token	Clase de Tailwind	Claro	Oscuro
`--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%)`

Tipografía

ArduMaker usa la tipografía del sistema de cada equipo: se lee nítida, carga al instante y no abre conexiones a terceros.

Sans del sistema: Todo el texto de la interfaz. ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" — SF Pro, Segoe UI, Roboto
Monoespaciada del sistema: Código, comandos, rutas, tokens y valores. ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace — SF Mono, Consolas

No se distribuyen archivos de fuentes: cada una pertenece a su fabricante y se descarga desde su sitio oficial.

Jerarquía

Servidores para agentes (h1, 44 / 48 / 72 px) text-[2.75rem] font-bold leading-[1.05] tracking-tight sm:text-5xl md:text-7xl
Todo en un panel (h2, 30 / 36 px) text-3xl font-bold tracking-tight sm:text-4xl
Deploy desde GitHub (h3, 18 px) text-lg font-semibold
Root real, NVMe y dominio con HTTPS. (p, 18 px) text-lg text-muted-foreground
Conecta un repositorio y cada push actualiza la app. (p, 16 px) text-base
Último deploy hace 2 minutos. (p, 14 px) text-sm text-muted-foreground
Gratis (span, 12 px) text-xs font-semibold
claude mcp add --transport http ardumaker (code, 14 px) font-mono text-sm

Componentes

Las piezas reales de la interfaz, las mismas que usa el panel. Se pueden tocar.

Radios

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: Tarjetas en reposo.
shadow-md: Lo que flota sobre la página.
shadow-lg: La acción principal del hero y el logo de la barra.

Movimiento

Dos curvas y duraciones cortas. Solo se animan transform, opacity y clip-path, y con «reducir movimiento» no hay animación.

cubic-bezier(0.23, 1, 0.32, 1): Entradas y hover: arranca rápido y frena suave.
cubic-bezier(0.77, 0, 0.175, 1): Lo que cruza la pantalla: acelera y frena.
Cambio de color: 150 ms
Presión, giro y menús: 200 ms
Cambio de vista: 180 ms
Cambio de página: 220 ms
Lista en cascada: 320 ms
Aparecer al bajar: 400 ms
Ventana: abrir: 520 ms
Ventana: cerrar: 440 ms

Uso correcto e incorrecto

Con el logo real. Si una aplicación no está acá, la regla es simple: el símbolo se usa entero, nítido y sin cambios.

Espacio mínimo: Alrededor del símbolo queda libre al menos un cuarto de su diámetro. Tamaño mínimo en pantalla: 24 px.
Contraste y fondos: El disco blanco lo separa de cualquier fondo liso, claro u oscuro. Sobre fotos con mucho detalle, se pone sobre una placa lisa.
El nombre: Una sola palabra, con A y M mayúsculas. No se traduce ni se separa. «ArduMaker Developer» es un sinónimo válido de la misma marca. (Así no: Ardumaker · ARDUMAKER · Ardu Maker · ardu-maker)

Alteraciones a evitar

Estirarlo o aplastarlo
Girarlo
Cambiarle los colores
Agregarle sombras o efectos
Recortar el disco
Ponerlo sobre un fondo cargado

Identidad audiovisual de Started

Started enseña ArduMaker con videos cortos. Estas son las pautas comunes; cada video arma su propio guion.

Se enseña con un problema real y su solución, no con anuncios. No hay un guion único: hay un orden que ayuda.

Formato: 9:16 · 1080 × 1920 px
Duración: Hasta 60 s
Archivo: MP4 · H.264 + AAC
Subtítulos: WebVTT
Miniatura: JPG 1080 × 1920

Estética: Elegante y tecnológica: fondo oscuro del tema, pantallas reales del producto y el azul como único acento.
Tipografía: La sans del sistema en negrita y con poco interletrado para los títulos; la monoespaciada para comandos y código.
Subtítulos: Siempre, en el idioma del video. Seminegrita, dos líneas como máximo, sobre una placa oscura y dentro de la zona segura.
Movimiento: Las mismas curvas de la interfaz. Cortes limpios, zoom suave a lo que importa; nada de transiciones de plantilla.
Música: De fondo y baja, con licencia para usarla. Nunca tapa la voz.
Narración: Voz humana y natural, como quien le explica algo a un colega. Sin voz robótica ni tono de locutor.
Colores: Los tokens de esta página. El degradado azul, celeste y verde solo para la palabra que se quiere destacar.
Miniaturas: Una captura real y el problema en pocas palabras. Sin flechas rojas ni caras de sorpresa.
Logo: El símbolo entero, chico, en el cierre. No se anima, no se deforma y no se pone encima de la pantalla del producto.
Cierre educativo: Lo que se aprendió en una frase y dónde seguir: la documentación del tema en /docs.

Un orden que ayuda

El problema, en una frase.
La solución, en la pantalla real.
El resultado que se ve.
Qué te llevas y dónde seguir.

Descargas

Todo lo que está disponible hoy, para bajar de a uno. La guía completa va también en JSON y en Markdown.

Recursos para agentes de IA

Un agente que arme una presentación, un video o una página sobre ArduMaker puede leer la marca entera desde estos archivos. Salen de la misma fuente que esta página.

https://ardumaker.com/branding/marca.json: Tokens, logos con su URL, reglas de uso y pautas audiovisuales, en los tres idiomas.
https://ardumaker.com/branding/marca.md: La misma guía en Markdown, lista para pegar en un contexto.
https://ardumaker.com/llms.txt: El índice del sitio para agentes.