Sistema de diseñoPro

LINDERO

Un sistema ligero y exacto para estudios de arquitectura y los lugares que construyen, compuesto sobre un dibujo de doce columnas.

Todo lo que hay en el banco de pruebas funciona en vivo. Pasa el puntero, escribe, recórrelo con el tabulador o cambia el selector Capa.

Sobre el sistema

Creado a partir de: La web Lindero
Componentes: 33 en 7 grupos, con todos sus estados
Tipografías: Hanken Grotesk, Fragment Mono
Capa: Cada página tiene dos capas. Dibujada muestra la intención: guías de columna, lindes, cotas y un papel de calco sobre cada fotografía. Cambia a Construida y el dibujo se retira mientras las fotografías aparecen debajo.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

La página de proyecto de una casa, hecha solo con el kit. Se incluye como página base, lista para cambiarle el nombre.

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 y tiempo como tokens con nombre
tokens/tokens.css: Los mismos tokens como variables CSS, con las capas Dibujada y Construida
css/lindero.css: Todos los componentes y sus estados
js/lindero.js: Capa, cortinas, líneas dibujadas, pestañas, diálogos, avisos, contadores y la navegación. Sin dependencias
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: La página de proyecto de una sola casa, hecha solo con el sistema
assets/imagery/: Fotografías de terreno, estancias y materiales a resolución completa, con los dibujos que encajan sobre ellas
LICENSE.md: Uso comercial en tus proyectos y en los de tus clientes

Adjunta DESIGN.md
Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.
Describe tu página
Con tus palabras, tu marca y tu contenido.
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.

Estructura: Twelve-column grid, Column guides, Property line, Dimension line, Title block, Layer switch
Acciones: Button, Text link, Close button
Entrada: Text field, Select, Textarea, Choice chips, Checkbox, Radio, Switch
Datos: Tabs, Record table, Fact list, Stepper, Measure
Indicadores: Tag, Alert, Progress, Toast
Contenido: House card, Plate, Registered pair, Quote
Capas y navegación: Dialog, Navigation bar, Index menu, Footer index

Mira la web completa de la que nace el sistema.