Brand kit

Foxii Dev

Versión 1.0Actualizado el 1 de octubre de 2026foxiidev.com

02 · Color

Color

Navy domina, teal acentúa. El ámbar aparece solo en badges y highlights, y nunca compite con el teal. Hacé clic en un código para copiarlo.

Navy — color principal

navy

Color principal de la marca. Fondo principal (canvas), theme-color y manifest.

navy-profundo

Fondo profundo: extremos del gradiente de página y base de sombras.

navy-superficie

Cards, paneles y superficies elevadas (opaco o translúcido al 48–92%).

navy-logo

Relleno del isotipo. Solo dentro del logo.

Teal — acento

teal

Acento de marca: links, foco, detalles, glow. Color de acento principal.

teal-fuerte

Hover, extremo oscuro de gradientes del botón primario.

teal-claro

Texto del logotipo, eyebrows, texto destacado sobre navy.

teal-palido

Detalles y estados hover de texto sobre navy.

teal-hielo

Link activo / hover de breadcrumbs.

teal-oscuro

Texto sobre botones teal.

teal-logo

Contorno y detalles del isotipo. Solo dentro del logo.

Ámbar — acento secundario, uso puntual

ambar

Acento secundario de uso puntual (badges, highlights). Nunca compite con el teal.

ambar-claro

Variante clara del acento secundario. Mismo criterio de uso puntual.

Texto

blanco

Títulos.

texto

Texto principal.

texto-suave

Párrafos destacados / texto secundario fuerte.

texto-secundario

Texto secundario, bajadas, metadatos.

Transparencias (sobre navy)

borde

Bordes y divisores.

borde-acento

Bordes destacados / foco.

teal-suave

Fondo de chips y badges teal.

superficie

Superficie translúcida.

superficie-fuerte

Superficie translúcida densa.

Colores funcionales — solo estados

exito

Confirmaciones y estados OK.

error

Errores y validaciones.

Pares texto / fondo

Contraste WCAG 2.1 calculado

Texto \ Fondonavy-profundonavynavy-superficie
blanco
Aa20,1:1
AAA
Aa18,9:1
AAA
Aa17,8:1
AAA
texto
Aa16,3:1
AAA
Aa15,3:1
AAA
Aa14,4:1
AAA
texto-suave
Aa13,5:1
AAA
Aa12,7:1
AAA
Aa12,0:1
AAA
texto-secundario
Aa7,8:1
AAA
Aa7,3:1
AAA
Aa6,9:1
AA
teal-claro
Aa13,6:1
AAA
Aa12,7:1
AAA
Aa12,0:1
AAA
teal
Aa10,8:1
AAA
Aa10,1:1
AAA
Aa9,5:1
AAA
ambar
Aa9,3:1
AAA
Aa8,8:1
AAA
Aa8,3:1
AAA
ambar-claro
Aa12,0:1
AAA
Aa11,3:1
AAA
Aa10,6:1
AAA
Aa7,7:1
AAA

teal-oscuro sobre teal · Botón primario

Aa9,7:1
AAA

teal-oscuro sobre teal-claro · Botón primario (claro)

Aa18,9:1
AAA

navy sobre blanco · Logo sobre claro

Aa12,7:1
AAA

navy sobre teal-claro · Badge teal

Aa8,8:1
AAA

navy sobre ambar · Badge ámbar

AAA ≥ 7:1 AA ≥ 4,5:1 texto normal Solo texto grande ≥ 3:1 (24px, o 18,5px en bold) No usar < 3:1

Proporción de uso

93,2%Navy
3,7%Texto
2,8%Teal
0,4%Ámbar

Navy dominante; teal como acento; ámbar solo puntual. Medido sobre la home de foxiidev.com (2026-09-30): porcentaje de píxeles de la paleta, sin contar fotos.

Radios, sombras y layout

Radios

pill
999px
sm
1rem
md
1.4rem
lg
1.6rem
xl
2.2rem

Sombras

base0 24px 80px rgba(2, 6, 23, 0.45)
glow-teal0 16px 38px -10px rgba(45, 212, 191, 0.42)

Ancho máximo

1320px

Ancho máximo del contenido.

03 · Tipografía

Tipografía

Dos familias, nada más: Sora para títulos y para el logo, Manrope para el cuerpo y la interfaz. Las dos están autoalojadas en woff2.

Títulos

Sora

Títulos, logotipo y elementos display.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 0123456789 áéíóú ¿?¡! $ % @

  • Sora SemiBold600
  • Sora Bold700
  • Sora ExtraBold800

Autoalojada (woff2, Fontsource). Licencia SIL OFL.

Cuerpo y UI

Manrope

Cuerpo de texto, UI, botones, navegación y eyebrows.

ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 0123456789 áéíóú ¿?¡! $ % @

  • Manrope Regular400
  • Manrope Medium500
  • Manrope SemiBold600
  • Manrope Bold700
  • Manrope ExtraBold800

Autoalojada (woff2, Fontsource). Licencia SIL OFL.

Escala tipográfica

Tamaños reales de foxiidev.com

H1 / HeroSora 8002.25rem → 3rem → 3.75rem (mobile → 640 → 1024px)interlineado 1.25

Sistemas que trabajan por vos

H2 / Título de secciónSora 700clamp(1.75rem, 3.2vw, 2.5rem)interlineado 1.18tracking -0.01em

Dejá el Excel, sumá un sistema

H3 / Título de cardSora 7001.3reminterlineado 1.25

Automatizaciones a medida

Cuerpo destacadoManrope 4001.05reminterlineado 1.9

Desarrollamos sistemas de gestión, automatizaciones, integraciones y plataformas web a medida para empresas que necesitan dejar atrás Excel, papel o software genérico.

CuerpoManrope 4000.98reminterlineado 1.7

Conectamos tus herramientas para que la información fluya sola, sin cargar dos veces lo mismo.

UI / BotónManrope 7001rem / 0.92reminterlineado 1.5
Pedí tu presupuesto
EyebrowManrope 7000.78reminterlineado 1.5tracking 0.16emmayúsculas

Software a medida

Texto chicoManrope 4000.88reminterlineado 1.4

Respuesta en menos de 24 horas

04 · Mascota

Mascota

El zorro acompaña la comunicación y le suma cercanía, pero la firma sigue siendo el logo. 10 poses, 5 publicadas en foxiidev.com. PNG transparente de 500 × 500 px.

Mascota de Foxii Dev — Saluda

Saluda

En la web
Mascota de Foxii Dev — Saluda 2

Saluda 2

En la web
Mascota de Foxii Dev — Señala

Señala

En la web
Mascota de Foxii Dev — Festeja

Festeja

En la web
Mascota de Foxii Dev — Sorprendido

Sorprendido

En la web
Mascota de Foxii Dev — Base

Base

Sin publicar
Mascota de Foxii Dev — Músculo

Músculo

Sin publicar
Mascota de Foxii Dev — Piensa

Piensa

Sin publicar
Mascota de Foxii Dev — Piensa 2

Piensa 2

Sin publicar
Mascota de Foxii Dev — Trabajando

Trabajando

Sin publicar

Reglas de uso

  • Acompaña, no reemplaza al logo.
  • Cuando aparece junto al logo, nunca más chica que el isotipo.
  • No ocupa más del 40% de la pieza.
  • Nunca recortada ni deformada.
  • Siempre sobre fondos de la paleta.

Excepción · Instagram

En contenido de Instagram la mascota es la protagonista y puede ocupar el tamaño que haga falta.

05 · Voz y tono

Voz y tono

Hablamos en primera persona del plural, como un equipo que conoce el problema. Directo y en rioplatense: voseo, frases cortas y cero jerga que no haga falta.

Persona

Nosotros

Registro

Rioplatense

Tono

Directo, sin tecnicismos innecesarios

Así sí / así no

Propuesta de valor

Así sí

Te armamos un sistema a medida para que dejes el Excel.

Así no

Desarrollamos soluciones de software escalables que optimizan sus procesos de negocio.

Llamado a la acción

Así sí

Escribinos y te respondemos en el día.

Así no

Contáctese con nuestro equipo comercial para recibir asistencia personalizada.

Explicar algo técnico

Así sí

Conectamos tu tienda con tu stock, así no cargás todo dos veces.

Así no

Implementamos integraciones vía API REST con sincronización bidireccional de inventario.