Sistema de diseñoPro

FOLDSTATE

Un sistema sereno y editorial para estudios y productos nativos de IA, donde cada superficie es un pliegue que se abre para mostrar cómo se hizo.

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

Sobre el sistema

Creado a partir de: La web FOLDSTATE
Componentes: 35 en 7 grupos, con todos sus estados
Tipografías: Oxanium, IBM Plex Sans
Pliegue: Cada superficie es una pila de hojas. Despliega la interfaz y las capas se abren en abanico, el botón dividido se separa, los campos de glifos pasan de cavidad a hoja y aparece cada rastro de cómo se hizo algo.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

Una página de caso de estudio 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 superficies de día y el estado Pliegue
css/foldstate.css: Todos los componentes y sus estados
js/foldstate.js: Etiquetas con efecto scramble, actos, pestañas, diálogos, avisos, el reloj en vivo, campos de glifos y Pliegue. Sin dependencias
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: Una página de caso de estudio con una demo de revisión y un formulario de briefing, hecha solo con el sistema
assets/imagery/: Renders del agente de las series Figure y Gesture, 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: Frame and split, Section index, Chapter track, Coordinate, Live clock, Glyph field
Acciones: Split button, Icon button, Text link, Action row, Pause control
Entrada: Line field, Select, Textarea, Checkbox, Radio, Switch, Toggle group
Datos: Act stepper, Tabs, Stage figure, Table, Layer stack
Indicadores: Tag, Checkpoint, Progress, Trace, Toast
Contenido: Card, Sheet, Plate, Accordion
Capas y navegación: Dialog, Navigation bar, Mobile menu

Mira la web completa de la que nace el sistema.