REstimator Design System

Congelado

• IA, flujos y estructura de pantallas (V1).
• Pairing tipográfico (2026‑06‑16) — no re‑explorar.
• Las 5 reglas de producto (abajo).

Estable y en uso

• 147 tokens · tema dark.
• 33 componentes exportados.
• 5 pantallas desktop del kit.

Especificado, sin construir

• 6 componentes mobile (Mobile v1).
• Capa tablet (documentada, sin artefacto).
• templates/ — 0 templates.

Primary UI — Hanken Grotesk

Technical — JetBrains Mono

Regular

400

Medium

500

Semibold

600

Bold

700

tight

1.15

snug

1.35

normal

1.45

relaxed

1.6

ls-body

-0.005em

ls-heading

-0.02em

ls-tight

-0.01em

ls-eyebrow

0.06em

ls-caps

0.05em

Sidebar

248px

Topbar

60px

Ancho de documento

1080px

Control estándar

40px

Control compacto

32px

Reglas

• SVG de línea inline únicamente. viewBox 24×24, stroke="currentColor", stroke-width ~1.7–1.8 (1.7 nav/UI, 2 chevrons/flechas), caps y joins redondos.
• Heredan el color del texto y se sitúan a 15–18px.
• Sin icon font, sin sprite, sin PNG, sin emoji, sin pictogramas unicode. Un “✓” en toasts transitorios es la única excepción.
• Para superficies nuevas, copiá las formas del kit antes de recurrir a una librería. No hay set de CDN incluido: el set es chico y mantenido a mano.

Glifos recurrentes

Propósito

Control de acción principal. Exactamente un primary (o accent) por vista; todo lo demás es secondary o ghost.

API

variant

secondary | primary | accent | ghost

size

sm | md | lg

block

boolean

iconLeft / iconRight

ReactNode (16px)

Semántica de variantes

• secondary — outline neutro, el caballo de batalla.
• primary — fill charcoal sólido, la acción principal única de la pantalla.
• accent — fill ámbar de marca, reservado a acciones hero de envío/compartir.
• ghost — sin borde, acciones inline de baja énfasis.

Tokens

variant

default 34 | bare 30

danger

boolean

title

obligatorio

Icon‑only para topbar y acciones de fila. title se usa como tooltip y aria-label.

pressed / defaultPressed

boolean

size

md | sm

accent

boolean

disabled

boolean

options

2–3 items

value

string

onChange

(value) => void

Más de 3 opciones → usar Select.

API

Comportamiento

• Field envuelve: label + hint inline (“opcional”) + control + note con icono.
• num activa cifras tabulares y alineación para dinero y medidas.
• prefix/suffix para $ y unidades (m, %).
• Focus: borde ámbar + --re-ring. Disabled: opacidad .45.

API

Badge · tone

neutral | ok | warn | crit | info

Badge · dot

boolean

Badge · square

chip mono de código

Badge · icon

ReactNode

StatusBadge · status

draft | sent | appr | rej | cancel

StatusBadge · label

override del español

Uso

• StatusBadge mapea automáticamente color de punto + etiqueta en español. No armes el pill a mano.
• square para códigos (GV-A-00148, ESC-RECT): mono, radio 5px.
• El estado nunca se comunica sólo por color: siempre punto + texto.

API

Alert · tone

warn | ok | info | crit | neutral

Alert · icon

ReactNode · null oculta

Alert · title

lead line en negrita

AlertGroup · title

“Alertas y recordatorios”

AlertGroup · items

ReactNode[]

Comportamiento

• El motor es warn‑only y nunca bloquea; por eso warn es el tono por defecto y el icono default es el triángulo.
• AlertGroup es el panel titulado de recordatorios con bullets.
• Microcopy: icono info/lock + una sola oración.

Tokens

Esta card es el especímen: CardHead (tile de icono + título + hint + acciones) sobre un divisor, luego CardBody.

API

Anatomía

Superficie grafito, borde --re-line de 1px, --re-shadow-sm, radio --re-r-lg 13px. flush cuando la card envuelve una tabla a sangre.

Hacer / No hacer

• Do — usar SectionHead numerado para pasos de un flujo largo (calculadora, editor).
• Don't — anidar cards dentro de cards; para agrupar dentro de una card usá SectionHead + divisores.

API

label

uppercase

value

tabular

sub

línea de apoyo

accent

variante charcoal

dot

punto de estado live

amberValue

cifra en ámbar

Uso

• Fila de KPI del dashboard y grillas de estado.
• accent es para un solo tile destacado por fila: es el ancla charcoal.
• amberValue con moderación: sólo cifras headline (respeta el racionamiento del ámbar).
• dot se combina con accent para paneles “En vivo”.

El único dibujo sancionado del sistema: planos y elevaciones esquemáticos generados paramétricamente desde las dimensiones del propio presupuesto. Son diagramas medidos, con líneas de estructura grafito de 1px, overlays de dimensión token‑driven y ámbar reservado al indicio de entrada/baranda.

Registro

Basado en registro: family/variant seleccionan un renderer. Escaleras trae cuatro: recta (elevación lateral), L, U y caracol (vistas en planta). Las familias desconocidas caen a un placeholder “sin vista técnica”.

Uso permitido

• Previews de calculadora y editor, filas de historial, documento al cliente.
• Nunca dibujar arte de producto decorativo a mano.

API

family

Escaleras | otras → placeholder

variant

recta | L | U | caracol

dims

ancho · altura · avance · escalones · huella · contrahuella · diametro

config

string[] de chips

size

compact | standard | large

title / code

override · código mono

showDims

default true

live

indicador “En vivo”

Densidades

• compact — head + dibujo + footer.
• standard — + 4 dimensiones + chips.
• large — stage más grande + 6 dimensiones.

Extender

TechnicalRenderers.register(family, variant, def) · setFamilyLabel · has · variants · families, todos encadenables. escalones se clampea a 4–16; un chip que matchee /baranda|pasamano/ dibuja la baranda en recta.

Topbar · Breadcrumbs · UserChip

API

Patrón de data entry — formularios largos

• Pasos numerados con SectionHead: Producto → Dimensiones → Opciones constructivas → Terminación / colocación / zona.
• Una card por paso; grilla de 2–3 columnas en desktop, 1–2 en tablet, 1 en mobile.
• Unidades siempre visibles como suffix, nunca sólo en el label.
• Coma decimal en medidas — el hint del paso lo recuerda (“decimales con coma”).
• Recálculo en vivo: no hay botón “calcular”; el panel de resultado muestra el punto “En vivo”.
• Campos opcionales marcados con hint inline optional, no con asterisco en los obligatorios.

Save bar

Editor y Parámetros usan una barra fija inferior con recuento de cambios (“1 cambio de calibración local”) + Restaurar por defecto + Guardar cambios. Sombra hacia arriba (--re-shadow-bar).

API

Helpers

• Clases de header: is-right · is-center · is-sortable.
• Clases de celda: re-cell-strong (primaria) · re-cell-sub (línea secundaria).
• Envolver en <Card flush>: la card recorta el desborde de la tabla.
• RowActions se revela en hover de fila.

Montos y cifras

• Columna de monto alineada a la derecha, tabular-nums, peso 600.
• Código en mono a 11,5px, color --re-ink-3.
• Fila de dos líneas: primaria (re-cell-strong) + secundaria cliente · fecha.

Empty state — el patrón real del producto

Los estados vacíos explican la regla, no sólo dicen “sin resultados”.

Reglas del patrón

• El recomendado es la única cifra ámbar de la pantalla y vive sobre el charcoal más profundo.
• Siempre se muestra con su rango (mín / máx) y un pin en el track: el número nunca aparece solo.
• El precio sale de Fab_min/Fab_max calibrados, no de jornales × valor.
• Siempre etiquetado “valor de fabricación · + IVA”: nunca se insinúa que es precio final.
• El panel lleva el punto “En vivo”: recálculo continuo, sin botón calcular.

Jornales — control, no precio

Flujo de la calculadora

• 1 Producto — familia → subcategoría (taxonomía de 10 rubros).
• 2 Dimensiones — medidas en metros, coma decimal.
• 3 Opciones constructivas — estructura, contrahuella, antideslizante, baranda.
• 4 Terminación · colocación · zona — DTM, tipo de colocación, zona geográfica.
• Encabezado del presupuesto opcional y compactable: no roba protagonismo al formulario.

Clasificación

Familias → subcategorías es la columna vertebral. TaxonomyIcon acompaña cada rubro en rails, dropdowns, cards de catálogo y chips.

Ciclo de vida y acciones

• Estados: Borrador → Enviado → Aprobado / Rechazado / Cancelado.
• Sin borrado físico: el cambio de estado es suave y reversible.
• Duplicar es de primera clase: retomar una cotización previa es el camino más común.
• Freeze: al publicarse, el presupuesto congela su versión de parámetros y queda inmutable.
• Override: el ajuste manual queda registrado, no reemplaza silenciosamente al recomendado.

Filtros y búsqueda

• Búsqueda por N°, cliente u obra en un único input con leadIcon.
• Filtros por tipo/estado en una línea; en mobile con scroll horizontal y activo ámbar sólido.
• Contador de resultados siempre visible (“58 resultados”).

Desktop ≥ 1200

Espacio horizontal de sobra: el desglose completo queda sticky junto al formulario, como ya venía funcionando.

Tablet 834

Formulario a ancho cómodo; barra‑peek inferior con recomendado + rango + CTA. Se expande sin tapar campos.

Mobile 390

Header de resultado pinneado (recomendado + rango + tamaño); “Ver desglose” abre el sheet. Acciones en barra fija.

Viewport base

390 × 844

Rango fluido

360–430

Grilla

4px (--re-s*)

Padding de pantalla

16 (s4)

Gap entre cards

14

Card

r13 · pad 16

Control

h42 · r7

Touch target

≥ 44

Safe area

env(safe-area-inset-bottom)

Reglas de adaptación de componentes

• Nada se “oculta” solamente. Si un elemento no cabe, se reemplaza por su equivalente táctil.
• Acción dominante por tap: la fila entera abre; las secundarias van a un overflow ⋯.
• Chips en una línea con scroll horizontal; el activo es ámbar sólido, nunca wrap a dos líneas.
• Sin sub‑copy en headers táctiles: título + back y nada más.
• Una sola marca por header: monograma = app, avatar = usuario.
• El bottom sheet sólo transporta el desglose: nunca se convierte en navegación.

Spec completa: Mobile v1 — Spec de implementación

1 · Estilos

Enlazá un solo archivo. Es un manifiesto de @import: trae fuentes, colores, tipografía, spacing, elevación y el reset base.

2 · Tema

No hay nada que configurar: dark es el único tema del sistema, y es el que aplica :root por defecto.

3 · Componentes

Reglas para superficies nuevas

• Nunca un hex literal: siempre var(--re-*). Si falta un token, se agrega al sistema, no a la pantalla.
• Nunca re‑explorar tipografía: está congelada.
• Respetá el racionamiento del ámbar: recomendado · rail/tab activo · CTA · logo.
• Iconos: copiá las formas del kit; 24×24, stroke 1.7–1.8, round caps.
• Sin emoji, sin gradientes, sin glass, sin blur decorativo.
• Las 5 reglas de producto del §00 no se negocian desde diseño.
• Cifras: tabular-nums y formato uruguayo siempre.

Migración a Figma

• Los tokens de §01 mapean 1:1 a variables de Figma (color, number para spacing/radius, string para families).
• Las variantes de §02 mapean a component properties (variant, size, tone, status).
• Los tres breakpoints de §07 mapean a page/frame widths 390 · 834 · 1440.