INFALL

Sobre el sistema

Creado a partir de

La web Infall

Componentes

45 en 7 grupos, con todos sus estados

Tipografías

Kumbh Sans

Ignición

La interfaz es negro y papel; solo la energía tiene color. Fría dibuja cada carga en papel y deja las bandas separadas. Enciende el núcleo y las celdas de carga, los medidores, la traza y el monitor se vuelven solares, los puntos vivos empiezan a arder y cada marca en bandas se cierra sobre su línea central.

Formato

HTML, CSS y JavaScript sin dependencias, más DESIGN.md

Versión

1.0

• Ink#000000
• Edge#61605E
• Dim#8D8C89
• Paper#F3F1EC
• Hot#FFF0CC
• Amber#FF8F29
• Ember#EB380D
• Deep#4D0D03

En contexto

Un registro público de disparos para un laboratorio de fusión, hecho solo con el kit: estado en vivo, los últimos disparos, el monitor del núcleo y una suscripción al registro. Se incluye como página base, lista para cambiarle el nombre.

En el kit

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 los estados Fría y Encendida

css/infall.css

Todos los componentes y sus estados

js/infall.js

Ignición, la barra que viaja, celdas, mantener para cargar, pestañas, diálogos, avisos, relojes, tipografía en bandas y el logotipo. Sin dependencias

js/infall-fall.js

El monitor del núcleo: un dibujo 2D en vivo de la caída, liviano en teléfonos y quieto con movimiento reducido

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Un registro público de disparos para un laboratorio de fusión, hecho solo con el sistema

assets/imagery/

Fotogramas de núcleo, caída y resplandor renderizados desde la escena original a resolución completa

LICENSE.md

Uso comercial en tus proyectos y en los de tus clientes

Construir con una IA

1. Adjunta DESIGN.md

   Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.

2. Describe tu página

   Con tus palabras, tu marca y tu contenido.

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

Componentes

Estructura

Column field, Hairlines, White bar, Band rule, Centre mark

Acciones

Charge button, Line button, Hold to charge, Bar link, External link, Icon button

Entrada

Text field, Select, Textarea, Checkbox, Core radio, Switch, Segmented control, Charge slider

Datos

Tabs, Readouts, Telemetry, Clock, Counter, Shot table, Inflow trace, Index list

Indicadores

Tag, Live point, Alert, Meter, Loader, Steps, Toast

Contenido

Plate, Ignition plate, Scene, Figure, Banded type, Wordmark, Core monitor

Capas y navegación

Dialog, Navigation bar, Menu, Telemetry row