Guía de marca
Una marca. Ocho prácticas detrás.
Todo lo que necesitas para representar a DGTL correctamente: el símbolo, el lockup, color, tipografía y voz. Si algo que necesitas no está aquí, pregúntanos antes de improvisar.
Versión 1.0, julio 2026
El símbolo
El Octet Grid: ocho celdas en una cuadrícula de tres por tres con el centro vacío. Las ocho celdas son las ocho prácticas. El centro vacío es el cliente al que las prácticas rodean. El símbolo cuenta la historia de la firma sin una sola palabra, que es exactamente para lo que sirve un símbolo.
Construcción: un lienzo de 64 unidades, ocho cuadrados de 14 unidades con separación de 3 unidades y radio de esquina de 3 unidades. La celda central está ausente. Nunca se rellena, nunca se reemplaza con una letra o un ícono.
Espacio libre: deja al menos el ancho de una celda de espacio vacío en los cuatro lados del símbolo. Nada entra en esa zona, incluido el wordmark en contextos fuera del lockup.
Tamaño mínimo: 16 píxeles por lado en pantalla. Por debajo de eso, usa solo el wordmark. En impresión, 6 milímetros.
Lo que no se hace
- No rotes, inclines ni reflejes el símbolo.
- No lo recolorees fuera de la paleta aprobada (azul de marca, negro, blanco).
- No agregues sombras, degradados, contornos ni ningún efecto.
- No rellenes la celda central. El centro vacío es justamente la idea.
- No lo redibujes ni lo aproximes. Usa los archivos de esta página.
- No lo coloques sobre fotografía cargada o fondos de bajo contraste.
El lockup
El lockup principal une el símbolo con el wordmark DGTL, en JetBrains Mono semibold (peso 600) con tracking ajustado. El símbolo mide 1.125 veces el tamaño de fuente del wordmark, con una separación de la mitad del ancho del símbolo. Usa el lockup en headers, footers, documentos y donde la marca se presenta.
DGTL
Sobre fondos claros: símbolo en brand-600, wordmark casi negro.
DGTL
Sobre fondos oscuros: símbolo en brand-500, wordmark casi blanco.
El wordmark siempre es DGTL en mayúsculas, siempre JetBrains Mono, siempre semibold en peso 600. Nunca aparece en Inter, nunca en minúsculas, nunca con letras espaciadas.
Descargas
Cada archivo aprobado, directo de la fuente. SVG para todo lo que escala, PNG donde se requiere raster. Si falta un formato que necesitas, pregunta en vez de convertir.
Color
Dos familias, una disciplina de acento. El azul lleva la marca. El coral la acentúa. Los neutros hacen que todo se lea.
Azul de marca
La familia principal. Las prácticas técnicas (Build, AI, Data, Secure) usan de brand-600 a brand-900. El símbolo usa brand-600 sobre superficies claras y brand-500 sobre oscuras.
brand-50
#EFF4FF
brand-100
#DBE6FE
brand-300
#93B4FD
brand-500
#3B76F6
Tinte para modo oscuro
brand-600
#2563EB
Principal. 5.2:1 sobre blanco, AA
brand-700
#1D58D8
6.1:1 sobre blanco, AA
brand-900
#1E408A
brand-950
#172954
Coral
El acento. Un elemento coral por viewport, máximo. En la mayoría de las vistas ese elemento es el CTA principal, en coral-700 con texto blanco. coral-500 está retirado de roles de texto y botón: a 2.8:1 contra blanco no pasa WCAG AA, así que sobrevive solo como acento decorativo.
coral-100
#FFE8D9
coral-300
#FFAE80
coral-500
#FF6B35
Solo acento. 2.8:1 con blanco, no pasa AA en texto
coral-700
#C73C12
CTA + blanco pasa AA 4.5:1
coral-900
#802C16
Neutros
Una escala slate con tinte azul, de la misma familia que el azul de marca. En modo claro, texto casi negro sobre una superficie slate-50 (#f8fafc) con tarjetas blancas y bordes #e2e8f0. En modo oscuro, texto casi blanco sobre azul medianoche (#020617) con paneles #0f172a y bordes #1e293b. Ambos temas son de primera clase: cada superficie sale en claro y oscuro, y el contraste cumple WCAG AA en los dos.
Reglas de color
- Un elemento coral por viewport. El CTA principal tiene prioridad.
- coral-700 más blanco para botones y texto de CTA. Nunca coral-500.
- Las prácticas técnicas se tiñen con la familia azul, las de negocio (Marketing, Sales, Studio, Advisory) con la familia coral.
- Nada de colores default de Tailwind. Cada color del sitio sale de estos tokens.
- El modo oscuro no es un extra. Si un par de colores sale a producción, sale en ambos temas con contraste AA.
Tipografía
Dos tipografías, sin excepciones. Inter para todo lo que se lee. JetBrains Mono para el wordmark, los eyebrows y el código.
Aa
Inter
UI y texto de lectura. Cargada con los subsets latin y latin-ext para que los acentos del español rendericen en la tipografía de marca, no en una de respaldo.
Aa
JetBrains Mono
Solo peso 600. El wordmark, los eyebrows de sección, etiquetas de datos y código. Usada con moderación se lee arquitectónica. Usada en todo, se lee como una terminal.
Escala
Ocho prácticas. Un equipo.
Ocho prácticas. Un equipo.
Ocho prácticas. Un equipo.
Ocho prácticas. Un equipo.
Ocho prácticas. Un equipo.
Voz
Latitude zero. Offset zero.
Slogan principal para superficies frías (banner de LinkedIn, portadas de deck). Los slogans nunca se traducen: la línea va en inglés en ambos idiomas, siempre a la vista del H1 o de la línea de datos de Quito. Latitud cero es la dirección; desfase cero es la promesa (UTC-5 todo el año, cero costuras).
Nothing between.
Segunda voz, en inglés en ambos idiomas, solo en superficies acompañadas (interior de decks, /framework, esta guía) hasta que se active el disparador definido: tres clientes de referencia firmados o búsqueda de marca significativa. Nunca sola en una superficie fría.
DGTL se lee como un ingeniero que sabe escribir, no como un marketero que conoce jerga de ingeniería. Con confianza, directo, con opinión cuando corresponde.
Principios
Lo específico le gana a lo ingenioso
Cada afirmación lleva un número, un plazo o un ejemplo concreto. Los números redondos y las cantidades vagas se leen como relleno.
Contracciones y cercanía
En español, la cercanía viene del tú y de frases directas. La formalidad excesiva es una señal de plantilla, y la formalidad no es lo mismo que el profesionalismo.
Varía el ritmo
Frases cortas mezcladas con largas. Nunca todas cortas. Nunca todas largas.
Voz activa, trato directo
Tú y nosotros. Nunca 'los clientes' o 'los usuarios' cuando el lector es el cliente.
Opiniones sin rodeos
Sin medias tintas, sin 'algunos dirían'. Si creemos algo, lo decimos.
Prohibido sin excepción
Esto nunca aparece en el copy de DGTL. La prohibición de las rayas (em-dashes) es absoluta: usa puntos, comas, dos puntos, o reescribe la frase.
Puntuación
Rayas (em-dashes) en cualquier lugar. Puntos suspensivos fuera de citas.
Señales de IA
'aprovechar' como calco de leverage, 'revolucionar', 'de última generación', 'holístico', 'de vanguardia', 'soluciones a medida' como relleno.
Encuadre geográfico
'nearshore', 'offshore', 'bajo costo', 'económico', 'asequible'. Quito es una decisión estratégica, nunca una jugada de precio.
Arranques de frase
'En conclusión', 'Además', 'Por otra parte', 'Más aún'.
La voz en español
Español latinoamericano, siempre de tú, neutral entre mercados. Reescrito, nunca traducido literalmente. Las reglas de voz en inglés se aplican igual en español.
- Tú, nunca usted. Cercano-profesional, sin modismos de un solo país.
- Sin calcos: 'usar' en vez de 'aprovechar' como calco de leverage, nada de 'revolucionar' ni 'de vanguardia'.
- Los términos técnicos en inglés se quedan en inglés cuando el comprador LATAM los usa así: app, cloud, backend, sprint, dashboard, CRM.
- Las certificaciones nunca se traducen: SOC 2, ISO 27001, HIPAA, GDPR, WCAG AA.
Iconografía
Lucide React, y solo Lucide React, hasta que salga el set propio que encargamos.
- Cada ícono renderiza como SVG inline con currentColor, así se tiñe correctamente en ambos temas.
- Nada de CDNs de íconos de terceros, imágenes hotlinkeadas ni familias de íconos mezcladas.
- Los íconos apoyan al texto que los acompaña. Un ícono que necesita explicación es el ícono equivocado.
Movimiento
El pulido se debe sentir, no ver. Si el usuario nota la animación, es demasiada.
- Cada componente animado respeta prefers-reduced-motion.
- Nada avanza solo. Los carruseles automáticos no pasan WCAG y ya se eliminaron una vez.
- El movimiento comunica jerarquía y causalidad, nunca decoración por sí misma.
DGTL
Preguntas
Si un caso de uso no está cubierto aquí, no improvises. Escríbenos y te respondemos en un día hábil.
hello@withdgtl.com