# Marca ArduMaker: logos, colores y tipografía

> La identidad visual oficial de ArduMaker: logos para descargar, colores con HEX, RGB y HSL, tipografía, componentes, uso correcto y pautas de video de Started.

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

## 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.

| Logos | URL | Formato | Tamaño | Fondo recomendado |
| --- | --- | --- | --- | --- |
| Símbolo | https://ardumaker.com/logo.png | PNG | 512 × 512 px | Claro, Oscuro |
| Favicon | https://ardumaker.com/favicon.ico | ICO | 256 × 256 px | Claro, Oscuro |
| Imagen para compartir (castellano) | https://ardumaker.com/og-image.jpg | JPG | 1200 × 630 px | Oscuro |
| Imagen para compartir (inglés) | https://ardumaker.com/og-image-en.jpg | JPG | 1200 × 630 px | Oscuro |
| Imagen para compartir (portugués) | https://ardumaker.com/og-image-pt.jpg | JPG | 1200 × 630 px | Oscuro |

### 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): Pendiente
- Logo horizontal: Pendiente
- Logo vertical: Pendiente
- Monocromo: Pendiente
- Negativo: Pendiente

### 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. `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)

### Monoespaciada del sistema

Código, comandos, rutas, tokens y 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)

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

### Jerarquía

|  | 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

### Radios

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

### Sombras

- `shadow-sm`: Tarjetas en reposo. `0 1px 2px 0 rgb(0 0 0 / 0.05)`
- `shadow-md`: Lo que flota sobre la página. `0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
- `shadow-lg`: La acción principal del hero y el logo de la barra. `0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`

### Movimiento

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

- `SALIDA` `cubic-bezier(0.23, 1, 0.32, 1)`: Entradas y hover: arranca rápido y frena suave.
- `TRASLADO` `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.
- Alteraciones a evitar: Estirarlo o aplastarlo; Girarlo; Cambiarle los colores; Agregarle sombras o efectos; Recortar el disco; Ponerlo sobre un fondo cargado.
- 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)

## 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
- Zona segura: 220 / 420 / 60 px

- **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

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