Design systemPro

LATENT

A cinematic system for image studios and luxury launches, where every image develops from its latent frame.

Everything on the bench is live. Hover it, type in it, tab through it, or flip Chapter.

About the system

Built from: LATENT website
Components: 35 in 7 groups, every state
Typefaces: Mona Sans
Chapter: Every section is a chapter with its own ground. Switch the chapter and the page goes through an exposure: dark between the dark rooms, a flash when the lightbox comes on. Ink, marks and focus follow.
Format: HTML, CSS and JavaScript with no dependencies, plus DESIGN.md
Version: 1.0

A commission page for a campaign image, built only from the kit. It ships as the starter, ready to rename.

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, chapters included
tokens/tokens.css: The same tokens as CSS variables, with the six chapters
css/latent.css: All components and their states
js/latent.js: Develop, line reveal, split word, chapters, tabs, contact sheet, dialogs, toasts and counters. No dependencies
components.html: Every component in every state, side by side
starter/index.html: A commission page for a campaign image, built only from the system
assets/imagery/: Key frame, long exposure and refraction images at full resolution, each with its latent frame
LICENSE.md: Commercial use in your own and client projects

Attach DESIGN.md
Add it to your conversation in Claude, Lovable or any AI builder.
Describe your page
In your own words, with your own brand and content.
Keep the code or port it
Link the token and component CSS, or ask for React. The rules hold either way.

Layout: Chapter, Light leak, Registration ticks, Split word, Film grain
Actions: Button, Round button, Text link
Input: Text field, Select, Textarea, Checkbox, Radio, Switch, Segmented control, Contact-sheet picker
Data: Tabs, Comparison table, Readout, Figure
Status: Tag, Alert, Meter, Steps, Progress thread, Toast
Content: Developing image, Case card, Roll frame, Contact sheet, Client grid, Quote carousel
Overlay and navigation: Dialog, Header with chapter counter, Mobile menu

See the full website the system comes from.