Sistema de diseñoPro

LATENT

Un sistema cinematográfico para estudios de imagen y lanzamientos de lujo, donde cada imagen se revela desde su fotograma latente.

Todo lo que hay en el banco de pruebas funciona en vivo. Pasa el puntero, escribe, recórrelo con el tabulador o cambia el selector Capítulo.

Sobre el sistema

Creado a partir de: La web LATENT
Componentes: 35 en 7 grupos, con todos sus estados
Tipografías: Mona Sans
Capítulo: Cada sección es un capítulo con su propio fondo. Cambia de capítulo y la página pasa por una exposición: oscuridad entre los cuartos oscuros, un destello cuando se enciende la mesa de luz (Lightbox). La tinta, las marcas y el foco la siguen.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

Una página de encargo para una imagen de campaña, hecha solo con el kit. Se incluye como página base, lista para cambiarle el nombre.

DESIGN.md: Las reglas para construir con el sistema, escritas para pasárselas a Claude, a Lovable o a un desarrollador
tokens/tokens.json: Cada color, tamaño, espacio y tiempo como tokens con nombre, capítulos incluidos
tokens/tokens.css: Los mismos tokens como variables CSS, con los seis capítulos
css/latent.css: Todos los componentes y sus estados
js/latent.js: Revelado, aparición por líneas, palabra partida, capítulos, pestañas, hoja de contactos, diálogos, avisos y contadores. Sin dependencias
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: Una página de encargo para una imagen de campaña, hecha solo con el sistema
assets/imagery/: Imágenes de fotograma clave, larga exposición y refracción a resolución completa, cada una con su fotograma latente
LICENSE.md: Uso comercial en tus proyectos y en los de tus clientes

Adjunta DESIGN.md
Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.
Describe tu página
Con tus palabras, tu marca y tu contenido.
Quédate con el código o llévalo a otro stack
Enlaza el CSS de tokens y componentes, o pide React. Las reglas se mantienen igual.

Estructura: Chapter, Light leak, Registration ticks, Split word, Film grain
Acciones: Button, Round button, Text link
Entrada: Text field, Select, Textarea, Checkbox, Radio, Switch, Segmented control, Contact-sheet picker
Datos: Tabs, Comparison table, Readout, Figure
Indicadores: Tag, Alert, Meter, Steps, Progress thread, Toast
Contenido: Developing image, Case card, Roll frame, Contact sheet, Client grid, Quote carousel
Capas y navegación: Dialog, Header with chapter counter, Mobile menu

Mira la web completa de la que nace el sistema.