Brandbook
Cómo se ve, cómo se lee y cómo se escribe RedFox. Una sola regla gobierna todo lo demás: el lienzo es negro, el contenido es blanco, y el color solo aparece para identificar un servicio.
¿Le estás pidiendo a una IA que produzca algo con esta marca? Pásale redfoxdev.com/brandbook.md: es esta misma página en texto plano, generada desde la misma fuente.
Negro
Archivo
Space Mono
5
Posición
Todo lo visual existe para sostener una sola frase. Si un elemento no la sostiene, sobra.
Construimos el sistema operativo de tu empresa: software a la medida, automatización e IA.
Empresas de cualquier tamaño en Guatemala y LATAM, desde las que apenas dejan la hoja de cálculo hasta las que ya operan con varios sistemas.
Los sistemas que no se conectan entre sí, y el software que se implementó a medias: incompleto, mal configurado o sin soporte que responda.
Precio fijo por proyecto, alcance escrito, primer resultado visible antes de 30 días.
- «Cada servicio es un módulo del sistema operativo de tu empresa» — la metáfora vive dentro de una frase que la explica.
- «Módulos» como etiqueta de navegación, botón o encabezado. Sin frase que lo explique, el cliente no sabe qué es un módulo.
Logo
El logo es el único lugar donde el rojo es identidad y no etiqueta. En todo lo demás, el rojo es el color del servicio de IA.
- Altura mínima de 24px en pantalla. Por debajo, la marca se ensucia.
- Siempre sobre negro o sobre una foto ya tratada y oscurecida.
- No recolorear la marca ni pasarla a blanco completo.
- No encerrarla en una caja, un círculo ni un botón.
- Logo RedFox — sobre negroVectorial, escala a cualquier tamaño. El archivo principal.
- Logo RedFox — sobre blancoMisma marca roja, texto en negro. Para fondos claros y documentos impresos.
- ÍconoFavicon, avatar y cualquier lugar donde sólo cabe la marca.
- Ícono para ApplePantalla de inicio en iOS, 180×180.
- Imagen para compartirLa tarjeta que aparece al pegar un enlace del sitio.
Pendiente: la marca sola, sin texto. Mientras no exista, recorta nada — usa uno de los dos logos completos.
Color
Negro y blanco hacen el trabajo. Los cinco acentos existen para una sola tarea: decir de qué servicio estás leyendo.
Fondo de toda página.
Secciones y celdas elevadas.
Paneles y menús sobre superficie.
Títulos, cifras, CTA primario.
Párrafos y descripciones.
Metadatos y notas al pie.
Inteligencia Artificial
Automatización
Desarrollo
Data
Consultoría
- Marcas de servicio: la barra de 2px, el ícono, la rama del diagrama.
- Como máximo dos apariciones de color por tarjeta o bloque.
- Nunca en un botón. El CTA primario es blanco sobre negro, siempre.
- Nunca en texto que haya que leer, ni como fondo de sección.
- Nunca en degradado. No existen degradados en esta marca.
Tipografía
Dos familias con trabajos distintos. Archivo dice cosas a personas. Space Mono etiqueta datos.
Sistema operativo
Cada servicio es un módulo
Construimos el sistema que sí funciona, armado alrededor de cómo ya trabajas.
+40 · 48h · 01/19
- Mono solo para lo que una máquina leería: nombres de servicio, cifras, plazos, etiquetas.
- Interletrado negativo en em, no en px, para que escale con el tamaño.
- Nunca un párrafo en mono. La prosa siempre es Archivo.
- Nunca una tercera familia tipográfica.
Retícula y forma
Una sola caja de 1200px con el margen por dentro. Las secciones se separan con una línea de 1px, nunca con un cambio de fondo.
1200px
20 / 32 / 40px
0px
1px · blanco 8%
- El margen va dentro de la caja de 1200px, no en la sección que la contiene.
- Las tarjetas comparten borde: una losa dividida por costuras, no piezas flotando.
- Ninguna esquina redondeada, en ningún componente.
- Ninguna sombra. La profundidad se sugiere con la línea y la superficie.
Imagen
La fotografía tiene tres papeles y un orden. Operación real es la imagen por defecto; Materia la sustituye cuando no hay foto; Retrato aparece solo donde la persona es el tema. Nunca las tres en la misma página.
.rb-img { filter: grayscale(1) contrast(1.08) brightness(0.88); }
.rb-img-raw { filter: none; } /* sólo UI de producto */La foto pierde su color para que el único color de la página siga siendo el del servicio. Una prenda o una máquina de color vivo compite con los acentos; tratada, ya no. El tratamiento se aplica a toda fotografía — la única excepción son las capturas de producto, porque desaturarlas esconde justo lo que la página vende.
Operación real
Fotografía documental de la operación de nuestros clientes.
Es la imagen por defecto de la marca. Bodegas, plantas, pisos de producción, oficinas en uso: gente trabajando, no gente posando. Es la única que aporta una prueba en vez de una textura — enseña la clase de empresa con la que trabajamos y el desorden que el sistema viene a ordenar.
Exige acceso a las instalaciones del cliente y permiso por escrito. Ese costo es real y es la razón por la que existe la segunda dirección.
- Escenas reales, capturadas en sitio, con el desorden que ya existe.
- Encuadre amplio que muestre el sistema completo, no un detalle.
- Personas de espaldas o concentradas en la tarea.
- Stock de gente sonriendo a la cámara en una sala de juntas.
- Pantallas con dashboards falsos superpuestos.
- Cualquier foto donde el trabajo se vea limpio y silencioso.
Materia
Macro de materiales, máquina y textura industrial.
Se usa donde no hay foto de operación disponible y el texto necesita una pausa. Metal, engranaje, trama, superficie: abstracto y sin fecha de caducidad. Nunca compite con Operación real en la misma página; la reemplaza cuando no existe.
Se resuelve con banco de imágenes o con una sesión corta propia. Es el respaldo barato, no la primera opción.
- Un solo material por imagen, encuadre muy cerrado.
- Alto contraste: negro real en las sombras.
- A escala grande, a sangre, nunca como ícono.
- Renders 3D, partículas, mallas de polígonos, «IA» genérica.
- Texturas con color propio que compitan con los acentos.
- La misma textura en dos secciones contiguas.
Retrato
Retratos del equipo y de clientes sobre fondo negro.
Solo donde la persona es el tema. Luz dura, fondo negro, mirada directa. Le pone cara a un sistema que de otro modo se ve solo como máquina, pero fuera de su sitio lo vuelve una agencia de personas. No se resuelve con banco de imágenes: o es nuestra gente, o no va.
Exige sesión propia con dirección de fotografía. Sin sesión, la sección va sin retrato.
- Fondo negro continuo, sin decorado ni oficina detrás.
- Una sola fuente de luz, sombra marcada.
- Encuadre consistente en toda la serie: mismo plano, misma altura.
- Fondos claros o de color — rompen el lienzo negro.
- Mezclar retratos propios con stock de personas.
- Ropa de color saturado que sobreviva al tratamiento.
- Una sola fotografía por página de servicio, a sangre, como corte entre secciones.
- Texto sobre foto solo con velo negro al 55% y la foto ya tratada.
- Nunca una foto detrás de un bloque de datos o de un formulario.
- Nunca dos direcciones distintas de imagen en la misma página.
Página de servicio
Es la única página donde un color manda. Al entrar a un servicio, su acento pasa de ser una etiqueta entre cinco a ser el color de la habitación — y los otros cuatro se apagan.
Dentro de una página de servicio, el único acento que aparece es el de ese servicio. Los otros cuatro solo vuelven al final, cuando la página ofrece a dónde ir después.
Sigue siendo la misma disciplina del capítulo 03: el color identifica, no decora. Lo que cambia es que aquí ya no hay que distinguir entre cinco cosas — el lector ya eligió — así que el acento pasa a confirmar dónde está parado.
Encabezado
Miga de pan, ícono, nombre y promesa. A la derecha, el diagrama del sistema con esta rama encendida y las otras al 22%: responde «dónde estoy» sin decirlo.
El problema
El dolor en palabras del cliente, y tres señales que reconoce en su propia operación. Sin esto, todo lo demás es catálogo.
Qué incluye
Tres entregables en una losa dividida por costuras. Lo que se entrega, no lo que se promete.
Evidencia
Una sola fotografía de operación, a sangre, con velo negro. Es el único respiro visual de la página.
Cómo se conecta
Los dos servicios con los que más se combina, cada uno con su propio acento. Aquí vuelve el color de los demás.
Preguntas y cierre
Las objeciones reales respondidas sin rodeos, y un solo CTA blanco. Nunca un botón de color.
- La barra de estado queda fija en el servicio que estás leyendo.
- Plazo y alcance de arranque van juntos bajo el CTA, en mono.
- Nunca precios en la página. El precio vive en la propuesta.
- Nunca un acento ajeno antes de «Cómo se conecta».
Componentes
Piezas resueltas, con su regla al lado.
- Un solo CTA primario por sección. El resto son bordes o enlaces.
- La marca de servicio es una barra de 2px, nunca un punto ni un ícono suelto.
- Nada de botones de color, ni siquiera para el servicio de IA.
- Nada de íconos rellenos: Phosphor duotone, 24–32px.
Movimiento
El movimiento explica una relación o no ocurre. Nada se mueve por ambientar.
Entrada
Opacidad 0 → 1 con 20px de desplazamiento. 450ms, ease-out. Una sola vez por elemento.
Secuencia
80ms entre hermanos dentro de una rejilla. Nunca más de cinco elementos escalonados.
Diagrama
Las ramas se dibujan al cargar y un pulso las recorre: es la única animación en bucle del sitio.
Hover
La marca de servicio crece de 16 a 24px. Transform y opacity únicamente.
Barra de estado
El servicio activo se aclara en 200ms mientras lees. Cambia porque cambió el contenido.
Reducción
Con prefers-reduced-motion todo aparece en su estado final, sin excepción.
Voz
Directa, concreta y sin adjetivos de folleto. Escribimos como habla alguien que ya estuvo en la operación del cliente.
Soluciones innovadoras de transformación digital de última generación.
Construimos el sistema que refleja cómo ya trabajas.
Nombra lo que hacemos, no la categoría en la que nos ponen.
Contáctanos para conocer más sobre nuestros servicios.
Cuéntanos el problema. En 30 minutos sabemos si podemos ayudarte.
Dice qué pasa después de hacer clic y cuánto tarda.
Precios competitivos adaptados a tus necesidades.
Precio fijo por proyecto, no por hora. Alcance escrito antes de empezar.
Una cifra o una regla verificable vale más que un adjetivo.