Sistema de diseñoPro

RUBRA

Un sistema cálido y exacto para estudios de marca y marcas editoriales, compuesto como una lámina botánica sobre papel crema.

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 Estación.

Sobre el sistema

Creado a partir de: La web RUBRA
Componentes: 38 en 7 grupos, con todos sus estados
Tipografías: Italiana, Libre Franklin
Estación: Cada página empieza como una línea. Sin hoja deja el sistema en tinta, con las hojas en contorno; Con hoja llena de bermellón cada hoja, brote y rama, y el árbol calcado se cubre de hojas rojas sobre su propio dibujo.
Formato: HTML, CSS y JavaScript sin dependencias, más DESIGN.md
Versión: 1.0

Una página de manual de marca para un estudio de cerámica, 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 dos estaciones
css/rubra.css: Todos los componentes y sus estados
js/rubra.js: Estación, el árbol que crece, pestañas, diálogos, avisos, la ficha de espécimen, relojes y la rama de navegación. Sin dependencias
js/rubra-tree.js: El árbol calcado, 32 KB, alineado con las fotografías Specimen
components.html: Cada componente en cada estado, uno al lado del otro
starter/index.html: Una página de manual de marca para un cliente, hecha solo con el sistema
assets/imagery/: Fotografías de espécimen, luz de día y copa de los árboles 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: Twelve-column sheet, Carmine frame, Branch rule, Leader rows, Figure annotations
Acciones: Seal button, Ruled button, Leaf link, Icon button, Text link
Entrada: Text field, Select, Textarea, Checkbox, Radio, Leaf switch, Segmented control, Specimen card
Datos: Index tabs, Register table, Studio clock, Counter, Index list
Indicadores: Tag, Note, Branch progress, Steps, Stamp, Toast
Contenido: Plate, Bloom plate, Traced tree, Service band, Case sheet
Capas y navegación: Dialog, Navigation bar, Menu sheet, Colophon

Mira la web completa de la que nace el sistema.