Sistema de diseñoPro

PERIAPT

Un sistema frío y preciso para marcas de hardware, aeroespacial y robótica, trazado sobre una retícula técnica.

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 Energía.

Sobre el sistema

Creado a partir de: La web PERIAPT
Componentes: 27 en 7 grupos, con todos sus estados
Tipografías: Chakra Petch, Geist, Geist Mono
Energía: La interfaz se mantiene monocroma hasta que el sistema está en línea. Activa Energía y la retícula, los marcadores y el logotipo se encienden en el azul Signal.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

Una página para reservar una prueba, 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 el estado Energía
css/periapt.css: Todos los componentes y sus estados
js/periapt.js: Etiquetas con efecto scramble, pestañas, diálogos, avisos, contadores y Energía. Sin dependencias
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: Una página para reservar una prueba, hecha solo con el sistema
assets/imagery/: Fotografías de hardware, terreno y horizonte 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: Technical grid, Rails and rules, Live marker
Acciones: Button, Icon button, Text link
Entrada: Text field, Select, Textarea, Checkbox, Radio, Switch, Segmented control
Datos: Tabs, Comparison table, Readout, Counter
Indicadores: Tag, Alert, Meter, Steps, Toast
Contenido: Card, Plate
Capas y navegación: Dialog, Navigation bar, Mobile menu

Mira la web completa de la que nace el sistema.