VELA

Sobre el sistema

Creado a partir de

La web Vela

Componentes

46 en 7 grupos, con todos sus estados

Tipografías

Instrument Serif, Instrument Sans

Destino

La papelería se imprime para un solo lugar cada vez. Elige Florencia, Amboseli o Phi Phi y cada lámina se abre desde el centro sobre el nuevo lugar, la hora local y las coordenadas se reimprimen, la ruta se redibuja y los meses en que está en su mejor momento reciben una estrella de latón.

Formato

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

Versión

1.0

• Forest#1D2A22
• Ivory#FBFAF7
• Paper#F7F5F0
• Stone#EBE8E1
• Ink#1B201C
• Brass#A88B57
• Brass deep#7C6640
• Rust#9A3226

En contexto

Una propuesta de viaje hecha solo con el kit: dos composiciones entre las que elegir y un formulario cuyas respuestas se anotan en la matriz del billete. 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, muesca y tiempo como tokens con nombre

tokens/tokens.css

Los mismos tokens como variables CSS, con los tonos bosque y papel

css/vela.css

Todos los componentes y sus estados, con las muescas recortadas con máscaras

js/vela.js

Destino, la matriz del billete, pestañas, la lista de selección, el dial de meses, diálogos, avisos, sellos y códigos de barras. Sin dependencias

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Una propuesta de viaje privado con dos composiciones entre las que elegir, hecha solo con el sistema

assets/imagery/

Fotografías de láminas, trayectos y estilo 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

Poster sheet, Ticket, Print band, Perforation, Stamp, Barcode

Acciones

Ticket button, Rule button, Round button, Rolling link, Text link

Entrada

Finder pass, Line field, Select list, Textarea, Checkbox, Radio, Switch, Range, Stepper, Month picker, Option tags, Choice tiles

Datos

Marks and tabs, Journey rows, Facts, Hours in the air, Route, Local clock, Timetable, Month dial, Stub

Indicadores

Tag, Notice, Steps, Edge numbers, Progress, Seal, Toast

Contenido

Plate, Arched window, Sheet, Spread

Capas y navegación

Poster dialog, Navigation ticket, Menu