INFALL

About the system

Built from

Infall website

Components

45 in 7 groups, every state

Typefaces

Kumbh Sans

Ignition

The interface is black and paper; only the energy has colour. Cold draws every charge in paper and lets the bands stand apart. Ignite the core and the charge cells, meters, trace and monitor turn solar, the live points start to burn and every banded mark closes in on its centre line.

Format

HTML, CSS and JavaScript with no dependencies, plus DESIGN.md

Version

1.0

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

In context

A public shot log for a fusion lab, built only from the kit: live status, the last shots, the core monitor and a sign-up for the log. It ships as the starter, ready to rename.

In the kit

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, with the cold and ignited states

css/infall.css

All components and their states

js/infall.js

Ignition, the travelling bar, cells, hold to charge, tabs, dialogs, toasts, clocks, banded type and the wordmark. No dependencies

js/infall-fall.js

The core monitor: a live 2D drawing of the inflow, light on phones and still with reduced motion

components.html

Every component in every state, side by side

starter/index.html

A public shot log for a fusion lab, built only from the system

assets/imagery/

Core, inflow and afterglow frames rendered from the original scene at full resolution

LICENSE.md

Commercial use in your own and client projects

Building with an AI

1. Attach DESIGN.md

   Add it to your conversation in Claude, Lovable or any AI builder.

2. Describe your page

   In your own words, with your own brand and content.

3. Keep the code or port it

   Link the token and component CSS, or ask for React. The rules hold either way.

Components

Layout

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

Actions

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

Input

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

Data

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

Status

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

Content

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

Overlay and navigation

Dialog, Navigation bar, Menu, Telemetry row