VELA

About the system

Built from

Vela website

Components

46 in 7 groups, every state

Typefaces

Instrument Serif, Instrument Sans

Destination

The stationery is printed for one place at a time. Choose Florence, Amboseli or Phi Phi and every plate opens from the centre on the new place, local hours and coordinates reprint, the route redraws and the months it is at its best take a brass star.

Format

HTML, CSS and JavaScript with no dependencies, plus DESIGN.md

Version

1.0

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

In context

A journey proposal built only from the kit: two compositions to choose between and a form whose answers are noted on the stub. It ships as the starter, ready to rename.

In the kit

DESIGN.md

Rules for building with the system, written to hand to Claude, Lovable or a developer

tokens/tokens.json

Every colour, size, space, notch and timing as named tokens

tokens/tokens.css

The same tokens as CSS variables, with the forest and paper tones

css/vela.css

All components and their states, notches cut with masks

js/vela.js

Destination, the stub, tabs, the select list, the month dial, dialogs, toasts, stamps and barcodes. No dependencies

components.html

Every component in every state, side by side

starter/index.html

A private journey proposal with two compositions to choose between, built only from the system

assets/imagery/

Plate, passage and style photographs at full resolution

LICENSE.md

Commercial use in your own and client projects

Building with an AI

1. Attach DESIGN.md

   Add it to your conversation in Claude, Lovable or any AI builder.

2. Describe your page

   In your own words, with your own brand and content.

3. Keep the code or port it

   Link the token and component CSS, or ask for React. The rules hold either way.

Components

Layout

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

Actions

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

Input

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

Data

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

Status

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

Content

Plate, Arched window, Sheet, Spread

Overlay and navigation

Poster dialog, Navigation ticket, Menu