Datil · Marca

La identidad de Datil

Logotipo, aplicaciones, colores y tipografía para nuestros productos y materiales de marca.

Componentes, tipografía y reglas de interfaz. Las muestras usan el mismo sistema que nuestros productos.

Color

--canvasfondo
--inktexto
--primarymarca / enlaces
--secondarysecundario
--accentacción principal
--linefiletes
--surfacetarjetas, paneles
--product-lineFacturación
--product-lineFirma
--product-lineGestión
--product-lineSaldo

La tinta de producto colorea el chip, el borde activo y los enlaces del producto.

La tinta de producto no se aplica al texto de lectura.

El acento se reserva para la acción principal. Una por vista.

Tipografía

Datil Sans

650 100–900 · variable · woff2

El eje variable cubre los pesos 100–900 en un solo archivo por voz. No existen cortes intermedios.

datil-sans.woff2 · datil-sans-data.woff2 · wght 100–900

Escala

display · ds-text-display · 80/84 · 400 Factura electrónica autorizada
h1 · ds-text-h1 · 56/60 · 500 La identidad de Datil
h2 · ds-text-h2 · 40/44 · 500 Sección de contenido
h3 · ds-text-h3 · 18/28 · 500 Título de tarjeta
body · ds-text-body · 18/28 · 400 Texto de lectura para descripciones y párrafos del producto.
small · ds-text-small · 14/20 · 400 Texto secundario y notas al pie.
data · Datil Sans Data · 14/20 RUC 0992xxxxxx001 · $1,240.00
meta · ds-text-meta · 12/16 · 400 Etiqueta de campo

Pesos en uso

wght 400 · texto · display · ds-text-body Factura electrónica autorizada
wght 500 · títulos y controles · ds-text-h1–h3 · .btn Factura electrónica autorizada

Voz de datos · Datil Sans Data

Datil Sans

0O 1lI| 5S8B

Datil Sans Data · cero barrado

0O 1lI| 5S8B

En la voz de datos el cero barrado es el glifo por defecto. Los caracteres 1, l, I y | se distinguen sin contexto.

cifras proporcionales · texto corrido

1 111 111.11
2 022 020.02
9 909 099.90

cifras tabulares · tablas y montos

1 111 111.11
2 022 020.02
9 909 099.90

Los montos van en cifras tabulares: cada dígito ocupa el mismo ancho y las columnas quedan alineadas.

RUC 0992743954001
Cédula 0926879416
Clave de acceso 3007202601099274395400110010020000456781234567819
Serial 4C:7A:9F:03:B2:1D:88:E4

Datil Sans v0.1 · derivada de Inter 4.1 (The Inter Project Authors) · SIL OFL 1.1

Botones

Cada vista lleva un solo botón primario, y el botón nombra la acción exacta: «Emitir factura», nunca «Aceptar».

.btn · mínimo 40 px · táctil 44 px · lg 48 px · radio 4 px · Datil Sans 500 / 15 px

Lo destructivo va delineado en --error, nunca relleno.

Inicio y Cuenta son navegación global. La acción principal acompaña al título de la página; las acciones secundarias usan un nombre y una flecha, no puntos sin explicación.

Los menús se abren con clic, Enter o las flechas. Escape cierra y devuelve el foco; Tab continúa por la página. El mismo comportamiento en contabilidad, firmas y consola.

Formularios

La etiqueta va sobre el campo en Datil Sans, sin mayúsculas forzadas. El texto del campo usa 15 px en escritorio y 16 px en pantallas táctiles.

etiqueta Datil Sans 500 / 14 px · campo mín. 44 px · radio 4 px

El foco usa --primary en el borde y un anillo visible para orientarse con el teclado.

El error recolora el filete y el mensaje dice cómo corregir el dato.

El toggle es la única píldora del formulario; casillas y radios marcan con --primary.

casilla y radio 20 px · toggle 44×24 px · radio 999 px

Estados

Autorizada Por vencer Rechazada En proceso Borrador

El estado se escribe en su color, sobre un anillo en currentColor. Nunca un bloque relleno.

.badge · alto 20 px · radio 999 px · mono 12 px

Alertas

El SRI autorizó el documento 001-002-000045678.
El RUC del receptor no existe. Corrige el dato y vuelve a emitir.

La severidad es un punto de 7 px en el color del estado. Nunca una franja lateral.

.alert · punto 7 px · fondo --surface · borde --line · radio 4 px

Tabla

Documento Cliente Fecha Total Estado
001-002-000045678 Comercial Andina S.A. 2026-07-30 $1,240.00 Autorizada
001-002-000045677 Estudio Rivas & Asociados 2026-07-30 $380.50 En proceso
001-002-000045676 Transportes del Litoral 2026-07-29 $95.00 Rechazada

Números y códigos van en la voz de datos y los montos a la derecha. Las filas se separan con un filete, nunca cebra.

.ds-table · 15 px · cabecera mono 12 px mayúsculas · .ds-cell-num tabular

Bloques densos

Campañas

12 campañas 9 activas 3 por decidir

Red Acciones
Certificados EC Google $840.00 28
Firma de documentos Meta $400.00 13
  • Firmas 12 3 por firmar
  • Facturas 240 30 días
  • Certificados 2 vencen en 30 días
  • Publicidad $1,240.00 gasto 30 días

Aparece cuando alguien busca lo que vendes

  1. Qué vendes Tu producto, su precio y su margen
  2. Cuánto inviertes Un presupuesto diario con tope
  3. Dónde apareces Google y Meta, medidos en ventas

Cada sección usa los mismos seis bloques: sustantivos con números, un solo botón principal por pantalla y ningún párrafo de más de una línea. La explicación va en la ayuda (?).

Datil.UI.Dense · encabezado · tira de medidas · tabla · panel · mosaico · estado vacío

La tabla es una sola parada de tabulación; las flechas recorren las celdas. Una fila abre su registro en el panel y la URL lo conserva.

.ds-dt · filas de 40 px · cuadrícula APG · panel lateral, hoja inferior en teléfonos

Tarjetas y ofertas

Esta lámina renderiza los componentes reales del producto.

Tarjeta de producto

Destacado

Contabilidad

Facturación electrónica incluida: cada comprobante entra solo a tu contabilidad.

Prueba 14 días por $1

Sin renovación automática

Empezar la prueba

El pie de la tarjeta es fijo: precio, verbo de inicio en filete y «Ver detalles» solo cuando la página es un segundo destino.

pie: precio mono 18 px · nota 12 px · CTA mín. 44 px · radio 4 px

«Más usado» es el único elemento en acento y una sola tarjeta lo lleva por sección.

Tarjeta de plan

Prueba Contabilidad

$1 por 14 días

  • ✓ Acceso al plan Negocio
  • ✓ Pago único. Impuestos incluidos.
  • ✓ Sin renovación automática
  • ✓ Al terminar, compra un plan para continuar.
Empezar la prueba
Más elegido

Negocio

$19 /mes

o $190 al año — 2 meses gratis

  • ✓ Comprobantes y movimientos ilimitados
  • ✓ 1 RUC · 5 usuarios
  • ✓ Multimoneda y exportaciones
  • ✓ Prueba 14 días por $1
Empezar la prueba

La tarjeta de plan reserva sus zonas aunque estén vacías: nombre, precio, ancla y acción quedan a la misma altura en toda la fila.

precio mono 26 px tabular · lista 15 px · CTA ancho completo · lleno solo en la destacada

Oferta

Firma electrónica

2 años al precio de 1

Certificado con vigencia de 2 años. Válido hasta el 31 de agosto.

Ver oferta →

Solo las ofertas oficiales llevan el canto grabado.

.ds-voucher · canto 12 px · borde --line · radio 4 px

Modal · Vacío · Toast

¿Anular esta factura?

Se emitirá una nota de crédito por el total del documento 001-002-000045678. Esta acción no se puede deshacer.

Aún no tienes documentos

Cuando emitas tu primera factura aparecerá aquí.

El diálogo dice la consecuencia y el botón nombra la acción. Lo destructivo va delineado en --error.

.ds-pop · fondo --surface · borde --line · radio 4 px · sombra --ds-elevation-float

El estado vacío dice qué aparecerá y ofrece la primera acción.

Aviso

Factura autorizada por el SRI

Cerrar

El aviso queda bajo la barra, sobre una superficie distinta del lienzo, con un punto de 7 px en el color del estado y el texto en tinta. Aparece sin animación.

.ds-notice · superficie distinta · punto 7 px · tinta 500

Papel valor y sello

Factura 001-001-000044321
Cliente Comercial Andina S.A.
Detalle Valor
Cemento 50 kg × 2 17.00
Varilla 12 mm × 40 112.13
IVA 15% 19.37
Total 148.50
Clave de acceso 2603202601179…001000044321
Firmado digitalmente Comercial Andina S.A. · Certificado Datil
Autorizada SRI · 26/03/2026 09:41
Autorizada Anulada

El papel valor se usa solo en representaciones de documentos: facturas, certificados, comprobantes. Nunca en tarjetas de interfaz.

--paper-tile · 8×14 px · trazo 0.45 px · opacidad ≤ 5 %

El sello va recto, nunca rotado, y toma el color del estado.

.ds-stamp · borde 2 px · radio 2 px · mono 13 px · tracking 0.2em

Sin conexión — reintentando…

Esenciales

Sesión, seguridad, idioma y tema. Sin ellas el sitio no funciona.

Siempre activas