Sistema visual · es-SV

Una interfaz técnica, clara y confiable.

La identidad visual de CleanTrace combina el rigor de una herramienta forense con una experiencia comprensible para creadores y equipos.

Versión 0.1.0Modo oscuro preferenteFrontend sin dependenciasReferencia aprobada

01 / Identidad

El patrón de huella expresa inspección, trazabilidad y control. La construcción monolineal mantiene reconocimiento incluso en iconos pequeños.

CleanTrace

Composición preferente: isotipo a la izquierda y wordmark sans serif. Separación mínima equivalente a media altura del isotipo.

Tono de marca

Privacidad real para tus imágenes

Precisa, sobria, rápida y honesta. No prometemos invisibilidad frente a sistemas de detección; describimos el alcance del procesamiento y mostramos evidencia.

Usar: inspeccionar, verificar, limpiar, conservar, señal detectada.

Evitar: indetectable, garantizado en redes, borrar cualquier marca de agua.

02 / Paleta cromática

Fondo de carbono con iluminación turquesa concentrada. Los colores de estado tienen significados específicos, no decorativos.

Base#071319

Superficie#0D2028

Acción#25E9D6

Texto principal#EEF9FA

Borde#20414C

Éxito · #33DFAF

Confirmación y campos presentes.

Precaución · #FFC06B

Ambigüedad, GPS y límites.

Riesgo · #FF7280

Hallazgo sensible o falla.

03 / Tipografía

Geometría moderada y legibilidad de datos. Pilas de sistema para evitar distribuir archivos de fuentes y depender de CDNs.

Display · 66 / 1.075

Misma imagen.
Más control.

Sans serif fuerte, espaciado negativo para titulares. En móvil escala a 38-52px.

Jerarquía

Contenido verificable

Panel de metadatos

Cuerpo de lectura: claro, denso solo cuando sea necesario y con espacio consistente entre bloques.

C2PA / Manifest Store
0000  63 32 70 61 00 01 4D 42
// La vista hexadecimal es un ejemplo.

04 / Componentes y estados

El turquesa indica foco o acción. Error y precaución acompañados siempre de texto, no solo de color.

Botones

Simular limpieza →Ver manifiestoSeleccionado

Radio 10px. Estado hover más luminoso. Foco visible con halo tenue de turquesa.

Archivo seleccionado

paisaje_ia.png2.4 MB · PNG · Demo

✓

Fila compacta: imagen, nombre truncado, tamaño y selección. Evitar acciones destructivas ambiguas.

Correcto

Mostrar `No analizado` al importar un archivo. Explicar cuándo un resultado es una simulación y cuándo se verificó con un parser real.

Incorrecto

Mostrar `Firma válida` solo porque existe el manifiesto. Afirmar que el archivo ya está limpio o que no será etiquetado por una plataforma.

05 / Layout y responsive

En escritorio el hero vende el flujo; el panel demuestra profundidad técnica. En móvil se prioriza completar una tarea antes de ver datos secundarios.

Inspector · Desktop

Cola de archivos
22%

Metadatos y evidencias
42%

C2PA y redes
36%

Antes / Después + Modos de limpieza + Acción primaria

Tablet: dos columnas para cola e inspector y los paneles secundarios bajan. Móvil: todo se apila en el mismo orden del flujo, sin perder información.

Desktop

≥1190px · Hero dividido, herramienta a la derecha.

Tablet

850-1189px · Hero apilado, inspector expandido.

Móvil

≤560px · Una columna y controles amplios.

06 / Concepto de referencia

La imagen generada originalmente se conserva para comparar intención y ejecución. Los controles funcionales pertenecen al template, no a la captura.

Imagen aprobada del diseño oscuro de CleanTrace

Consulta además brand-guide.md, layout-spec.md y brand-tokens.json.