Sistema de diseñoPro

DATUM

Un sistema medido para constructoras, ingenierías y promotoras: formas de encofrado, una mira de nivelación y una sola línea de referencia.

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 Fase.

Sobre el sistema

Creado a partir de: La web DATUM
Componentes: 35 en 7 grupos, con todos sus estados
Tipografías: Archivo, Schibsted Grotesk
Fase: Día uno es la obra de noche bajo el foco de trabajo; Entrega es piedra caliza a la luz del día. Cambia de fase y las superficies giran, las fotos de una misma cámara cambian de encuadre y los textos escritos para una fase dan paso a los de la otra.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

Una página de avance de obra de un proyecto, 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, con las dos fases
tokens/tokens.css: Los mismos tokens como variables CSS, con Día uno y Entrega
css/datum.css: Todos los componentes y sus estados
js/datum.js: Fase, pestañas, índice, diálogos, avisos, niveles, marcas de replanteo, mira y loader. Sin dependencias
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: Una página de avance de obra de un proyecto, hecha solo con el sistema
assets/imagery/: Fotografías de la cámara de obra, del foco de trabajo y de la entrega a resolución completa
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: Grid and staff lane, Datum line, Section head
Acciones: Button, Ghost button, Key button, Text link
Entrada: Text field, Select, Textarea, Checkbox, Level radio, Key switch, Segmented control, Phase switch
Datos: Stepped tabs, Project index, Schedule table, Level readout
Indicadores: Status tag, Alert, Footing steps, Pour meter, Toast, Loader
Contenido: Notched panel, Framed card, Plate, Phase plate, Survey pin, Ground mark
Capas y navegación: Dialog, Navigation bar, Level staff, Chapter bar and menu

Mira la web completa de la que nace el sistema.