VEDUTA

Sobre el sistema

Creado a partir de

La web Veduta

Componentes

45 en 7 grupos, con todos sus estados

Tipografías

Noto Serif Display, Spline Sans

Compuerta

Cada imagen se ve a través de una ventana troquelada en cartulina. Cerrada tapa cada ventana y traza su troquel, para imágenes bajo embargo; Encuadrada muestra la pintura por el corte, con sus esquinas de fotograma, la pestaña en relieve y los pernos de registro; Abierta retira la cartulina hasta que la imagen llena su caja, y corren los códigos de tiempo.

Formato

HTML, CSS y JavaScript sin dependencias, más DESIGN.md

Versión

1.0

• Paper#DCD1B4
• Paper deep#D3C7A8
• Ink#1A1914
• Ink 2#5F5844
• Shade#14130F
• Film#8F8A73
• Light#EFE7D2
• Sienna#8A2F1F

En contexto

Una página de temporada de proyecciones para una productora, hecha solo con el kit: el programa, una pizarra que reserva butacas y una entrada cuya ventana se abre. Se incluye como página base, lista para cambiarle el nombre.

En el kit

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

tokens/tokens.css

Los mismos tokens como variables CSS, con los tonos de cartulina y de hoja oscura

css/veduta.css

Todos los componentes y sus estados

js/veduta.js

La Compuerta y su geometría troquelada, bordes de hoja, códigos de tiempo, pestañas, la pizarra, diálogos, avisos, el índice de localizaciones y los créditos. Sin dependencias

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Una página de temporada de proyecciones con reserva de butacas, hecha solo con el sistema

assets/imagery/

Pinturas de localización, de equipo en cuadro y de intervalo a resolución completa

LICENSE.md

Uso comercial en tus proyectos y en los de tus clientes

Construir con una IA

1. Adjunta DESIGN.md

   Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.

2. Describe tu página

   Con tus palabras, tu marca y tu contenido.

3. 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.

Componentes

Estructura

Card stock, Dark sheet, Ruled column, Hairline cells, Slate band, Sheet edge, Registration mark and sticks

Acciones

Slate button, Cell button, Plain button, Play cue, Text link, Icon button

Entrada

Line field, Select, Textarea, Checkbox, Registration radio, Clapper switch, Segmented cells, Take stepper, Slate board

Datos

Index tabs, Call sheet, Location index, Film facts, Timecode, Footage counter, Credit roll

Indicadores

Tag, Note, Stage line, Meter, Circled take, Toast

Contenido

Window, Film sheet, Statement, Ruled list, Plate card

Capas y navegación

Dialog, Header cells, Menu sheet, Reel pager, End slate