Design systemPro

LINDERO

A light, exact system for architecture studios and the places they build, set on a twelve-column drawing.

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

About the system

Built from: Lindero website
Components: 33 in 7 groups, every state
Typefaces: Hanken Grotesk, Fragment Mono
Layer: Every page has two layers. Drawn shows the intention: column guides, property lines, dimensions and a tracing sheet over each photograph. Switch to Built and the drawing withdraws as the photographs come through underneath.
Format: HTML, CSS and JavaScript with no dependencies, plus DESIGN.md
Version: 1.0

A project page for one house, 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
tokens/tokens.css: The same tokens as CSS variables, including the drawn and built layers
css/lindero.css: All components and their states
js/lindero.js: Layer, curtains, drawn lines, tabs, dialogs, toasts, counters and the navigation. No dependencies
components.html: Every component in every state, side by side
starter/index.html: A project page for a single house, built only from the system
assets/imagery/: Site, room and material photographs at full resolution, with the drawings that register with them
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: Twelve-column grid, Column guides, Property line, Dimension line, Title block, Layer switch
Actions: Button, Text link, Close button
Input: Text field, Select, Textarea, Choice chips, Checkbox, Radio, Switch
Data: Tabs, Record table, Fact list, Stepper, Measure
Status: Tag, Alert, Progress, Toast
Content: House card, Plate, Registered pair, Quote
Overlay and navigation: Dialog, Navigation bar, Index menu, Footer index

See the full website the system comes from.