Skip to content

Logo

El logotipo de DEVSOFTEC es la pieza central de la identidad: un mark tipográfico (el símbolo en una caja redondeada) + el wordmark en dos pesos.

Versiones

Section titled “Versiones”
Fondo claro
Fondo oscuro
Solo mark
Mark oscuro

Construcción

Section titled “Construcción”

El logo se compone de dos elementos:

Elemento Descripción
Mark el símbolo en JetBrains Mono 700, dentro de su cuadrado redondeado. Representa el código como base de todo lo que hacemos.
Wordmark DEVSOFTEC — “DEV” en peso 400 (ligero), “SOFTEC” en peso 600 (semibold).

Especificaciones técnicas

Section titled “Especificaciones técnicas”

El logo en la documentación se sirve como PNG rasterizado (fuentes reales, sin FOUT). En la librería también hay SVG de referencia (mark.svg, lockup.svg).

Alineación mark ↔ wordmark

Section titled “Alineación mark ↔ wordmark”

El cap-height de DEVSOFTEC coincide con el tramo recto del mark (entre radios), no con el alto total:

  • La esquina superior izquierda de la D se alinea con la esquina superior derecha del cuadro, antes de que empiece la curva.
  • Igual abajo con la curva inferior.
  • S, O, C tienen un overshoot tipográfico mínimo (~2%); es intencional.
Propiedad Valor
Tipografía wordmark Space Grotesk 400/600
Tipografía mark JetBrains Mono 700
Alto del mark 1× (size)
Cap-height wordmark Tramo recto (alto − 2×radio)
Radio de la caja 20% del rect interno
Grosor del borde 0.05×
Distancia mark → palabra 0.125× del mark
Assets PNG lockup-light.png, lockup-dark.png, favicon-light.png, favicon-dark.png

Área segura

Section titled “Área segura”

El espacio libre mínimo alrededor del logo debe ser igual a la altura del mark. Ningún elemento gráfico, texto o borde debe invadir esta zona.

Uso correcto e incorrecto

Section titled “Uso correcto e incorrecto”

✓ Correcto

Section titled “✓ Correcto”
  • Usar sobre fondos sólidos (negro o blanco)
  • Respetar el contraste: mark claro en fondo oscuro y viceversa
  • Mantener la proporción original

✗ Incorrecto

Section titled “✗ Incorrecto”
  • No rotar ni distorsionar el logo
  • No agregar sombras, gradientes ni efectos
  • No cambiar los pesos tipográficos
  • No separar el mark del wordmark más allá del gap definido
  • No usar colores distintos a los de marca (blanco/negro)

Favicon

Section titled “Favicon”

El favicon usa solo el mark (sin wordmark). Variante clara y oscura:

favicon-light
favicon-dark