VEDUTA

About the system

Built from

Veduta website

Components

45 in 7 groups, every state

Typefaces

Noto Serif Display, Spline Sans

Gate

Every picture is seen through a die-cut window in card stock. Closed covers each window and traces its dieline, for stills under embargo; Framed shows the painting through the cut, with its rounded film corners, raised tab and registration pins; Open retracts the card until the picture fills its box, and the timecodes roll.

Format

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

Version

1.0

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

In context

A screening-season page for a production company, built only from the kit: the programme, a slate board that books seats and a ticket whose window opens. 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 and timing as named tokens

tokens/tokens.css

The same tokens as CSS variables, with the card stock and dark sheet tones

css/veduta.css

All components and their states

js/veduta.js

The Gate and its die-cut geometry, sheet edges, timecodes, tabs, the slate board, dialogs, toasts, the location index and the credit roll. No dependencies

components.html

Every component in every state, side by side

starter/index.html

A screening-season page with seat booking, built only from the system

assets/imagery/

Location, crew in frame and interval paintings 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

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

Actions

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

Input

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

Data

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

Status

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

Content

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

Overlay and navigation

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